/* ================================================================
   DL SAFETY - MAIN SITE CSS
   Font: Be Vietnam Pro | Colors: Navy #1A2B6D + Red #C8102E
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --navy:       #1A2B6D;
  --navy-d:     #10193f;
  --navy-l:     #243580;
  --red:        #C8102E;
  --red-d:      #a00d24;
  --orange:     #f5820d;
  --bg:         #f7f8fc;
  --card:       #ffffff;
  --text:       #1a1f2e;
  --muted:      #6b7280;
  --border:     #e5e7eb;
  --radius:     10px;
  --shadow:     0 2px 12px rgba(26,43,109,.09);
  --shadow-md:  0 6px 28px rgba(26,43,109,.13);
  --tr:         .22s cubic-bezier(.4,0,.2,1);
}
html { scroll-behavior:smooth; font-size:15px; overflow-x:hidden !important; width:100% !important; }
body { font-family:'Be Vietnam Pro',sans-serif; background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden !important; width:100% !important; position:relative !important; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button,input,textarea,select { font-family:inherit; }

/* ── SMOOTH CSS MARQUEE TICKER (EXACTLY 1 LINE, 34PX HEIGHT) ── */
.top-marquee-bar {
  background: var(--navy) !important;
  color: #ffffff !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  white-space: nowrap !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  z-index: 1000 !important;
  width: 100% !important;
  display: block !important;
}
.marquee-track {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  white-space: nowrap !important;
  will-change: transform !important;
  animation: marqueeScroll 22s linear infinite !important;
}
.top-marquee-bar:hover .marquee-track {
  animation-play-state: paused !important;
}
@keyframes marqueeScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.marquee-item {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  margin-right: 40px !important;
  font-size: .8rem !important;
  line-height: 34px !important;
  gap: 6px !important;
}
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 20px; }

/* ── TOPBAR ── */
.topbar { background:var(--navy-d); color:#c8d0e7; font-size:.77rem; font-weight:500; padding:7px 0; }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.topbar a, .topbar span { color:#c8d0e7; display:inline-flex; align-items:center; gap:5px; }
.topbar a:hover { color:#fff; }
.topbar .hl { color:#ffd700; font-weight:700; }
.tb-left,.tb-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* ── HEADER ── */
.site-header { background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:900; }
.header-wrap { display:flex; align-items:center; gap:20px; padding:12px 0; }
.logo-link { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.logo-img { height:64px; width:auto; object-fit:contain; mix-blend-mode:multiply; }
.logo-txt .brand { font-size:1rem; font-weight:800; color:var(--navy); line-height:1.2; }
.logo-txt .brand em { color:var(--red); font-style:normal; }
.logo-txt .sub { font-size:.67rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

.header-search { flex:1; max-width:500px; position:relative; }
.header-search input { width:100%; padding:10px 44px 10px 16px; border:2px solid var(--border); border-radius:50px; font-size:.87rem; transition:border-color var(--tr); background:var(--bg); }
.header-search input:focus { outline:none; border-color:var(--navy); background:#fff; }
.search-btn { position:absolute; right:4px; top:50%; transform:translateY(-50%); background:var(--red); border:none; border-radius:50px; width:34px; height:34px; color:#fff; cursor:pointer; display:grid; place-items:center; transition:background var(--tr); }
.search-btn:hover { background:var(--red-d); }
.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.btn-call { display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; padding:9px 18px; border-radius:50px; font-weight:700; font-size:.84rem; white-space:nowrap; transition:all var(--tr); }
.btn-call:hover { background:var(--red-d); transform:translateY(-1px); }
.btn-call i { animation:ring .9s ease-in-out infinite alternate; }
@keyframes ring { from{transform:rotate(-18deg)} to{transform:rotate(18deg)} }
.btn-zalo { display:inline-flex; align-items:center; gap:7px; background:#0068ff; color:#fff; padding:9px 18px; border-radius:50px; font-weight:700; font-size:.84rem; white-space:nowrap; transition:all var(--tr); text-decoration:none; }
.btn-zalo:hover { background:#0053cc; transform:translateY(-1px); }
.btn-fb { display:inline-flex; align-items:center; gap:7px; background:#1877F2; color:#fff; padding:9px 18px; border-radius:50px; font-weight:700; font-size:.84rem; white-space:nowrap; transition:all var(--tr); text-decoration:none; }
.btn-fb:hover { background:#0c63d4; transform:translateY(-1px); }
.menu-toggle { display:none; background:none; border:2px solid var(--navy); color:var(--navy); border-radius:8px; padding:7px 10px; cursor:pointer; font-size:1.05rem; }

/* ── NAVBAR ── */
.navbar { background:var(--navy); }
.nav-list { display:flex; }
.nav-item { position:relative; }
.nav-link { display:flex; align-items:center; gap:6px; padding:13px 15px; color:rgba(255,255,255,.75); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; transition:all var(--tr); }
.nav-link:hover,.nav-item:hover>.nav-link { background:var(--navy-l); color:#fff; }
.nav-link.active { background:var(--red); color:#fff; }
.nav-link .ch { font-size:.6rem; transition:transform var(--tr); }
.nav-item:hover .ch { transform:rotate(180deg); }
.dropdown { position:absolute; top:100%; left:0; background:#fff; min-width:240px; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-md); border-top:3px solid var(--red); opacity:0; visibility:hidden; transform:translateY(6px); transition:all var(--tr); z-index:800; }
.nav-item:hover>.dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li { position:relative; }
.dropdown li a { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; font-size:.85rem; color:var(--text); font-weight:500; border-bottom:1px solid var(--border); transition:all var(--tr); }
.dropdown li:last-child > a { border:none; }
.dropdown li > a:hover, .dropdown li:hover > a { background:var(--bg); color:var(--red); padding-left:22px; }
.dropdown li a i { color:var(--red); width:18px; text-align:center; font-size:.85rem; }
.dropdown li a .fa-chevron-right { font-size:.65rem; color:var(--muted); }
.btn-all-cat { background:var(--navy) !important; color:#fff !important; padding:13px 24px !important; display:flex; align-items:center; justify-content:space-between; gap:20px; font-weight:700; }
.btn-all-cat:hover { background:var(--navy-d) !important; }
.cat-group-title { font-weight:800; color:var(--navy); text-transform:uppercase; padding:16px 16px 8px; font-size:.85rem; letter-spacing:.02em; }
.dropdown li > a { padding:10px 16px 10px 24px; border-bottom:none; }
/* Sub Dropdown (Flyout) */
.sub-dropdown { position:absolute; top:0; left:100%; min-width:400px; display:grid; grid-template-columns:1fr 1fr; align-content:start; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateX(10px); transition:all var(--tr); z-index:801; border:1px solid var(--border); border-left:3px solid var(--red); padding:8px; gap:4px; }
.dropdown li:hover > .sub-dropdown { opacity:1; visibility:visible; transform:translateX(0); }
.sub-dropdown li a { padding:8px 12px; font-size:.8rem; justify-content:flex-start; gap:8px; border-bottom:none; border-radius:6px; }
.sub-dropdown li:last-child > a { border-bottom:none; }
.sub-dropdown li > a:hover, .sub-dropdown li:hover > a { padding-left:12px; background:var(--bg); color:var(--red); }

/* ── HERO ── */
.hero { position:relative; min-height:480px; display:flex; align-items:center; overflow:hidden; background:linear-gradient(135deg, var(--navy-d) 0%, var(--navy) 55%, #1e3a8a 100%); }
.hero-bg { position:absolute; inset:0; background-image:url('images/hero-bg.jpg'); background-size:cover; background-position:center; opacity:.15; }
.hero-ov { position:absolute; inset:0; background:linear-gradient(90deg,rgba(16,25,63,.95) 38%,rgba(26,43,109,.55) 100%); }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding:60px 0; }
.hero-content { color:#fff; }
.hero-badge { display:inline-flex; align-items:center; gap:7px; background:rgba(200,16,46,.22); border:1px solid rgba(200,16,46,.45); color:#ff8fa3; padding:5px 14px; border-radius:50px; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.hero-title { font-size:clamp(1.7rem,3.5vw,2.7rem); font-weight:900; line-height:1.15; margin-bottom:14px; }
.hero-title .hl { color:var(--red); display:block; }
.hero-sub { font-size:.95rem; color:#a8b4d0; margin-bottom:26px; max-width:460px; line-height:1.75; }
.hero-phones { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.hero-phone { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:9px 18px; border-radius:50px; color:#fff; font-weight:700; transition:background var(--tr); }
.hero-phone:hover { background:rgba(200,16,46,.35); }
.hero-phone .ph-icon { width:34px; height:34px; background:var(--red); border-radius:50%; display:grid; place-items:center; font-size:.85rem; flex-shrink:0; }
.hero-phone .ph-lbl { font-size:.7rem; color:#a8b4d0; display:block; font-weight:400; }
.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; }
.btn-hero-p { display:inline-flex; align-items:center; gap:8px; background:var(--red); color:#fff; padding:12px 26px; border-radius:50px; font-weight:700; font-size:.88rem; border:2px solid var(--red); transition:all var(--tr); }
.btn-hero-p:hover { background:var(--red-d); border-color:var(--red-d); transform:translateY(-2px); box-shadow:0 8px 22px rgba(200,16,46,.4); }
.btn-hero-s { display:inline-flex; align-items:center; gap:8px; background:transparent; color:#fff; padding:12px 26px; border-radius:50px; font-weight:700; font-size:.88rem; border:2px solid rgba(255,255,255,.38); transition:all var(--tr); }
.btn-hero-s:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.hero-stats { display:flex; gap:20px; flex-wrap:wrap; }
.h-stat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:16px 22px; text-align:center; flex:1; min-width:90px; }
.h-stat .sn { font-size:1.65rem; font-weight:900; color:var(--red); line-height:1; }
.h-stat .sl { font-size:.74rem; color:#a8b4d0; margin-top:3px; }

/* ── TRUST ── */
.trust-bar { background:var(--red); padding:13px 0; }
.trust-inner { display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; gap:12px; }
.trust-item { display:flex; align-items:center; gap:9px; color:#fff; font-size:.83rem; font-weight:600; }
.trust-item i { font-size:1.25rem; opacity:.85; }
.trust-div { width:1px; height:26px; background:rgba(255,255,255,.28); }

/* ── SECTION HEADER ── */
.sec-hd { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.sec-title { font-size:clamp(1.2rem,2.5vw,1.75rem); font-weight:800; color:var(--navy); position:relative; padding-bottom:10px; }
.sec-title::after { content:''; position:absolute; bottom:0; left:0; width:46px; height:3px; background:var(--red); border-radius:2px; }
.sec-title.center { text-align:center; }
.sec-title.center::after { left:50%; transform:translateX(-50%); }
.view-all { display:inline-flex; align-items:center; gap:5px; color:var(--red); font-weight:600; font-size:.84rem; transition:gap var(--tr); }
.view-all:hover { gap:9px; }

/* ── CATEGORIES ── */
.cats-sec { padding:56px 0; }
.cat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.cat-card { background:var(--card); border-radius:var(--radius); padding:22px 14px 18px; text-align:center; border:1px solid var(--border); cursor:pointer; transition:all var(--tr); position:relative; overflow:hidden; }
.cat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--navy); transform:scaleX(0); transition:transform var(--tr); }
.cat-card:hover::before { transform:scaleX(1); }
.cat-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#c7d2e8; }
.cat-icon { width:58px; height:58px; background:linear-gradient(135deg,#eef2ff,#e0e7ff); border-radius:14px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:1.6rem; transition:background var(--tr); }
.cat-card:hover .cat-icon { background:linear-gradient(135deg,var(--navy),var(--navy-l)); }
.cat-name { font-size:.84rem; font-weight:700; color:var(--navy); line-height:1.3; margin-bottom:3px; }
.cat-cnt { font-size:.72rem; color:var(--muted); }

/* ── PRODUCTS ── */
.prods-sec { padding:0 0 56px; }
.prod-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.tab-btn { background:none; border:none; padding:11px 20px; font-size:.83rem; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all var(--tr); }
.tab-btn.active { color:var(--red); border-bottom-color:var(--red); }
.tab-btn:hover { color:var(--navy); }
.prod-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.prod-card { background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:0 1px 4px rgba(0,0,0,.05); transition:all var(--tr); }
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#c7d2e8; }
.prod-img-wrap { position:relative; aspect-ratio:1; background:var(--bg); overflow:hidden; }
.prod-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.prod-card:hover .prod-img-wrap img { transform:scale(1.06); }
.prod-badge { position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:4px; text-transform:uppercase; }
.prod-badge.new { background:#16a34a; }
.prod-badge.hot { background:var(--orange); }
.prod-actions { position:absolute; bottom:-38px; left:0; right:0; display:flex; justify-content:center; gap:8px; padding:7px; background:rgba(255,255,255,.95); transition:bottom var(--tr); }
.prod-card:hover .prod-actions { bottom:0; }
.act-btn { width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border); background:#fff; color:var(--navy); display:grid; place-items:center; cursor:pointer; font-size:.82rem; transition:all var(--tr); }
.act-btn:hover { background:var(--red); color:#fff; border-color:var(--red); }
.prod-body { padding:13px; }
.prod-cat { font-size:.7rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
.cat-prods-hd h2 { font-size:1.15rem; font-weight:800; color:var(--navy); margin:0; padding-bottom:6px; border-bottom:3px solid var(--navy); }
.prod-name { font-size:.83rem; font-weight:600; color:var(--text); line-height:1.45; margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-pricing { display:flex; align-items:baseline; gap:7px; margin-bottom:10px; flex-wrap:wrap; }
.price-now { font-size:.98rem; font-weight:800; color:var(--red); }
.price-old { font-size:.78rem; color:#aaa; text-decoration:line-through; }
.disc-tag { font-size:.68rem; color:#fff; background:var(--red); padding:2px 6px; border-radius:4px; font-weight:700; }
.btn-buy { width:100%; background:var(--navy); color:#fff; border:none; border-radius:7px; padding:9px; font-size:.81rem; font-weight:700; cursor:pointer; transition:background var(--tr); display:flex; align-items:center; justify-content:center; gap:7px; }
.btn-buy:hover { background:var(--red); }
.empty-grid { grid-column:1/-1; text-align:center; padding:48px; color:var(--muted); }
.empty-grid i { font-size:3rem; opacity:.25; margin-bottom:12px; display:block; }

/* ── WHY CHOOSE ── */
.why-sec { padding:68px 0; background:linear-gradient(135deg,var(--navy-d),var(--navy)); position:relative; overflow:hidden; }
.why-sec::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:rgba(255,255,255,.03); right:-150px; top:-150px; }
.why-inner { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; position:relative; }
.why-content .sec-title { color:#fff; }
.why-content .sec-title::after { background:var(--red); }
.why-desc { color:#a8b4d0; margin:16px 0 28px; line-height:1.8; }
.why-feats { display:flex; flex-direction:column; gap:14px; }
.why-feat { display:flex; align-items:flex-start; gap:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); padding:15px 18px; transition:background var(--tr); }
.why-feat:hover { background:rgba(255,255,255,.09); }
.feat-icon { width:42px; height:42px; background:var(--red); border-radius:10px; display:grid; place-items:center; font-size:1rem; color:#fff; flex-shrink:0; }
.feat-title { color:#fff; font-weight:700; font-size:.9rem; margin-bottom:2px; }
.feat-desc { color:#8896b3; font-size:.8rem; line-height:1.5; }
.why-img { border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.why-img img { width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ── PROMO BANNERS ── */
.promo-sec { padding:48px 0; }
.promo-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.promo-card { border-radius:14px; overflow:hidden; position:relative; min-height:200px; display:flex; align-items:flex-end; padding:26px; }
.promo-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.promo-card:hover img { transform:scale(1.04); }
.promo-ov { position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,43,109,.88),rgba(26,43,109,.5)); }
.promo-cnt { position:relative; z-index:1; color:#fff; }
.promo-tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#ffd700; margin-bottom:5px; }
.promo-title { font-size:1.25rem; font-weight:800; margin-bottom:5px; line-height:1.2; }
.promo-sub { font-size:.82rem; color:rgba(255,255,255,.75); margin-bottom:14px; }
.btn-promo { display:inline-flex; align-items:center; gap:6px; background:var(--red); color:#fff; padding:7px 16px; border-radius:50px; font-size:.8rem; font-weight:700; transition:all var(--tr); }
.btn-promo:hover { background:var(--red-d); transform:translateY(-1px); }

/* ── TESTIMONIALS ── */
.testi-sec { padding:56px 0; background:var(--bg); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:28px; }
.testi-card { background:var(--card); border-radius:var(--radius); padding:22px; border:1px solid var(--border); box-shadow:var(--shadow); transition:all var(--tr); }
.testi-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stars { display:flex; gap:2px; margin-bottom:10px; }
.stars i { color:#f59e0b; font-size:.82rem; }
.testi-text { font-size:.86rem; color:var(--muted); line-height:1.7; margin-bottom:14px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:10px; }
.t-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--navy),var(--navy-l)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:.95rem; flex-shrink:0; }
.t-name { font-weight:700; font-size:.86rem; }
.t-role { font-size:.73rem; color:var(--muted); }

/* ── CTA ── */
.cta-sec { background:var(--red); padding:48px 0; }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-heading { font-size:1.45rem; font-weight:800; color:#fff; margin-bottom:5px; }
.cta-sub { color:rgba(255,255,255,.78); font-size:.88rem; }
.cta-acts { display:flex; gap:12px; flex-wrap:wrap; }
.btn-white { display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--red); padding:12px 26px; border-radius:50px; font-weight:700; font-size:.88rem; transition:all var(--tr); }
.btn-white:hover { background:var(--navy); color:#fff; transform:translateY(-2px); }
.btn-wghost { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); color:#fff; padding:12px 26px; border-radius:50px; font-weight:700; font-size:.88rem; border:2px solid rgba(255,255,255,.38); transition:all var(--tr); }
.btn-wghost:hover { background:rgba(255,255,255,.24); transform:translateY(-2px); }

/* ── FOOTER ── */
.footer { background:var(--navy-d); color:#a8b4d0; padding:54px 0 22px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:36px; margin-bottom:40px; }
.f-brand-logo { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.f-brand-logo img { height:52px; width:auto; object-fit:contain; background:#ffffff; padding:4px 8px; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.f-brand-name { color:#fff; font-weight:800; font-size:.95rem; }
.f-brand-name em { color:var(--red); font-style:normal; }
.f-brand-sub { color:#64748b; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; }
.f-desc { font-size:.83rem; line-height:1.75; margin-bottom:18px; }
.f-social { display:flex; gap:9px; }
.soc-btn { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.1); color:#a8b4d0; display:grid; place-items:center; font-size:.9rem; transition:all var(--tr); }
.soc-btn:hover { background:var(--red); color:#fff; border-color:var(--red); }
.f-col h4 { color:#fff; font-size:.88rem; font-weight:700; margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.07); text-transform:uppercase; letter-spacing:.05em; }
.f-links { display:flex; flex-direction:column; gap:8px; }
.f-links a { color:#8896b3; font-size:.83rem; display:flex; align-items:center; gap:6px; transition:all var(--tr); }
.f-links a i { color:var(--red); font-size:.72rem; }
.f-links a:hover { color:#fff; gap:10px; }
.f-contact { display:flex; flex-direction:column; gap:13px; }
.f-ci { display:flex; gap:11px; align-items:flex-start; }
.f-ci-icon { width:32px; height:32px; background:rgba(200,16,46,.18); border-radius:7px; display:grid; place-items:center; color:var(--red); font-size:.82rem; flex-shrink:0; }
.f-ci-lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:#64748b; }
.f-ci-val { color:#e2e8f0; font-size:.86rem; font-weight:600; }
.f-ci-val a { color:#e2e8f0; }
.f-ci-val a:hover { color:var(--red); }
.footer-bot { border-top:1px solid rgba(255,255,255,.06); padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.79rem; }
.footer-bot-r { display:flex; gap:16px; }
.footer-bot-r a { color:#64748b; }
.footer-bot-r a:hover { color:#fff; }

/* ── FLOATING BTNS ── */
.float-wrap { position:fixed; bottom:26px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:990; }
.float-btn { width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-size:1.25rem; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.22); transition:all var(--tr); position:relative; }
.float-btn:hover { transform:scale(1.1) translateY(-2px); }
.float-btn.fb-phone { background:var(--red) !important; background-color:var(--red) !important; color:#fff !important; animation:pulse-r 2.2s infinite !important; }
.float-btn.fb-zalo { background:#0068ff !important; background-color:#0068ff !important; color:#fff !important; animation:pulse-b 2.2s 1.1s infinite !important; }
#floatFb, a#floatFb, .float-btn.fb-facebook { background:#1877F2 !important; background-color:#1877F2 !important; color:#ffffff !important; display:grid !important; place-items:center !important; box-shadow:0 4px 16px rgba(24,119,242,.45) !important; animation:pulse-f 2.2s .5s infinite !important; }
#floatFb i, a#floatFb i, .float-btn.fb-facebook i { color:#ffffff !important; font-size:1.25rem !important; }
.float-btn.fb-top { background:var(--navy); opacity:0; pointer-events:none; transition:opacity var(--tr),transform var(--tr); }
.float-btn.fb-top.show { opacity:1; pointer-events:auto; }
@keyframes pulse-r { 0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.4)} 50%{box-shadow:0 0 0 10px rgba(200,16,46,0)} }
@keyframes pulse-b { 0%,100%{box-shadow:0 0 0 0 rgba(0,104,255,.4)} 50%{box-shadow:0 0 0 10px rgba(0,104,255,0)} }
@keyframes pulse-f { 0%,100%{box-shadow:0 0 0 0 rgba(24,119,242,.45)} 50%{box-shadow:0 0 0 10px rgba(24,119,242,0)} }
.f-tooltip { position:absolute; right:58px; background:rgba(0,0,0,.72); color:#fff; font-size:.73rem; font-weight:600; padding:4px 10px; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity var(--tr); font-family:'Be Vietnam Pro',sans-serif; }
.float-btn:hover .f-tooltip { opacity:1; }

/* ── QUICK VIEW MODAL ── */
#qvModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:2000; align-items:center; justify-content:center; padding:18px; }
#qvModal.open { display:flex; }
.qv-box { background:#fff; border-radius:16px; max-width:780px; width:100%; max-height:90vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; position:relative; }
.qv-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%; background:#f1f5f9; border:none; cursor:pointer; font-size:.9rem; display:grid; place-items:center; z-index:1; transition:.2s; }
.qv-close:hover { background:var(--red); color:#fff; }
.qv-left { background:var(--bg); border-radius:16px 0 0 16px; overflow:hidden; }
.qv-left img { width:100%; height:340px; object-fit:cover; }
.qv-right { padding:26px; display:flex; flex-direction:column; gap:10px; }
.qv-code { font-size:.72rem; color:var(--muted); }
.qv-name { font-size:1.05rem; font-weight:800; color:var(--navy); line-height:1.3; }
.qv-price { font-size:1.35rem; font-weight:900; color:var(--red); }
.qv-old { font-size:.87rem; color:#aaa; text-decoration:line-through; }
.qv-lbl { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-top:3px; }
.qv-text { font-size:.85rem; color:var(--muted); line-height:1.7; }
.qv-specs { font-size:.82rem; background:var(--bg); padding:9px 13px; border-radius:8px; line-height:1.6; }
.qv-cta { width:100%; background:var(--red); color:#fff; border:none; padding:12px; border-radius:9px; font-size:.88rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; transition:.2s; }
.qv-cta:hover { background:var(--red-d); }

/* ── CATALOG PAGE ── */
.cat-page-hero { background:var(--navy); padding:28px 0; color:#fff; }
.cat-page-title { font-size:1.5rem; font-weight:800; }
.cat-page-sub { color:rgba(255,255,255,.6); font-size:.85rem; margin-top:4px; }
.catalog-layout { display:grid; grid-template-columns:240px 1fr; gap:24px; padding:28px 0 56px; }
.sidebar-filters { background:var(--card); border-radius:var(--radius); padding:20px; border:1px solid var(--border); height:fit-content; position:sticky; top:80px; }
.sf-title { font-weight:700; font-size:.9rem; color:var(--navy); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.sf-clear { font-size:.75rem; color:var(--red); cursor:pointer; font-weight:600; }
.sf-sec { margin-bottom:18px; }
.sf-sec-title { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.sf-item { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; font-size:.84rem; border-radius:6px; }
.sf-item input { accent-color:var(--navy); width:15px; height:15px; cursor:pointer; }
.sf-item label { cursor:pointer; flex:1; }
.catalog-main {}
.catalog-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.catalog-count { font-size:.84rem; color:var(--muted); }
.sort-select { padding:8px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:.84rem; background:#fff; cursor:pointer; }
.sort-select:focus { outline:none; border-color:var(--navy); }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ── PAGINATION ── */
.pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding:28px 0 0; flex-wrap:wrap; }
.pg-btn { width:36px; height:36px; border-radius:8px; border:1.5px solid var(--border); background:#fff; cursor:pointer; font-size:.85rem; display:grid; place-items:center; transition:all var(--tr); }
.pg-btn:hover { border-color:var(--navy); color:var(--navy); }
.pg-btn.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.pg-btn:disabled { opacity:.35; cursor:not-allowed; }

/* ── RESPONSIVE ── */
@media(max-width:1100px) { .cat-grid{grid-template-columns:repeat(4,1fr);} .prod-grid{grid-template-columns:repeat(4,1fr);} }
@media(max-width:900px) {
  .hero-inner{grid-template-columns:1fr;gap:28px;} .hero-stats{display:none;}
  .why-inner{grid-template-columns:1fr;} .why-img{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .testi-grid{grid-template-columns:1fr 1fr;}
  .promo-grid{grid-template-columns:1fr;}

  /* ── XÓA PHẦN DANH MỤC TRÊN MOBILE & TRẢI SẢN PHẨM 2 CỘT FULL-WIDTH ── */
  .catalog-layout { display: block !important; width: 100% !important; padding-top: 16px !important; }
  .sidebar-filters { display: none !important; }
  .catalog-main { width: 100% !important; }
  .catalog-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; width: 100% !important; }
}
@media(max-width:768px) {
  .topbar{display:none;}
  .header-wrap{flex-wrap:wrap;gap:10px;padding:10px 0;}
  .header-search{order:3;flex:1 1 100%;max-width:100%;}
  .logo-link{flex:1;}
  .menu-toggle{display:block;}
  .btn-call span,.btn-zalo span,.btn-fb span{display:none !important;}
  .btn-call,.btn-zalo,.btn-fb{padding:9px 11px !important;border-radius:50% !important;width:36px !important;height:36px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
  .navbar{display:none;} .navbar.open{display:block;}
  .nav-list{flex-direction:column;}
  .nav-link{padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.07);}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-radius:0;border-top:none;display:none;}
  .nav-item.open>.dropdown{display:block;}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid{grid-template-columns:repeat(2,1fr);}
  .testi-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .qv-box{grid-template-columns:1fr;} .qv-left{border-radius:16px 16px 0 0;} .qv-left img{height:200px;}
  .cta-inner{flex-direction:column;text-align:center;} .cta-acts{justify-content:center;}
  
  /* ── SẮP XẾP THANH CẢM ƠN (TRUST BAR) THÀNH 2 HÀNG CÂN ĐỐI TRÊN MOBILE ── */
  .trust-bar { padding: 10px 0 !important; }
  .trust-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 14px !important;
    text-align: center !important;
  }
  .trust-item {
    font-size: .76rem !important;
    white-space: nowrap !important;
    gap: 5px !important;
  }
  .trust-div { display: none !important; }

  /* ── FIX BỐ CỤC PANEL HEADER TRÊN MOBILE (CHUẨN 3 HÀNG - HÀNG 2 ĐỨNG SÁT CẠNH NHAU) ── */
  .site-header > .container > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    padding: 8px 0 !important;
    gap: 6px 8px !important;
  }

  /* HÀNG 1: LOGO ẢNH TO PHÓNG LỚN SÁT TRÁI - CHỮ ĐINH LÊ BẢO HỘ LAO ĐỘNG RA GIỮA TO NỔI BẬT */
  .site-header .logo-link {
    order: 1 !important;
    flex: 0 0 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    justify-content: flex-start !important;
    margin-bottom: 6px !important;
    height: 68px !important;
  }
  .site-header .logo-img {
    height: 68px !important;
    flex-shrink: 0 !important;
  }
  .site-header .logo-link > div {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .site-header .logo-link > div > div:first-child {
    font-size: 1.45rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }
  .site-header .logo-link > div > div:last-child {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
  }

  /* HÀNG 2: TẤT CẢ DANH MỤC + TRANG CHỦ + LIÊN HỆ ĐỨNG SÁT CẠNH NHAU (CÙNG 1 DÒNG) */
  .site-header .nav-item {
    order: 2 !important;
    flex: 0 0 auto !important;
  }
  .btn-all-cat {
    padding: 7px 11px !important;
    font-size: .79rem !important;
    white-space: nowrap !important;
    gap: 6px !important;
    border-radius: 6px !important;
  }
  .site-header nav {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
  }
  .site-header nav a {
    padding: 6px 8px !important;
    font-size: .79rem !important;
    font-weight: 800 !important;
    color: var(--navy) !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
  }

  /* HÀNG 3: Ô TÌM KIẾM TRẢI HẾT DÒNG (100% CHIỀU RỘNG TRÊN TRANG CHỦ & TẤT CẢ CÁC TRANG) */
  .site-header form {
    order: 4 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 0 0 !important;
    display: block !important;
  }
  .site-header form > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .site-header form input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── FIX ẢNH BÌA HERO SLIDER TRÊN MOBILE ── */
  .hero-slider-wrap, #heroSlider {
    height: 180px !important;
  }
  .hero-slider-wrap img, #heroSlider img {
    height: 180px !important;
    object-fit: cover !important;
  }

  /* ── DROPDOWN MOBILE BEHAVIOR: FULL-WIDTH NỔI BẬT KHÔNG BAO GIỜ BỊ CẮT CHE CHỮ ── */
  #navDropdown {
    position: absolute !important;
    top: 100% !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100% - 16px) !important;
    max-width: none !important;
    z-index: 9999 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.25) !important;
    transition: all 0.3s ease !important;
    background: #ffffff !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
  }
  #navDropdown.open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .dropdown li {
    position: relative !important;
  }
  .sub-dropdown {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: none !important;
    padding: 6px 12px 6px 20px !important;
    border: none !important;
    border-left: 3px solid var(--red) !important;
    background: #f8fafc !important;
    margin: 4px 0 !important;
    border-radius: 6px !important;
  }
  .dropdown li.sub-open > .sub-dropdown {
    display: flex !important;
    flex-direction: column !important;
  }
  .dropdown li.sub-open > a .fa-chevron-right {
    transform: rotate(90deg) !important;
    color: var(--red) !important;
  }
  .sub-dropdown li a {
    padding: 8px 10px !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: var(--text) !important;
  }
}
@media(max-width:480px) {
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .prod-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .prod-body{padding:10px;}
  .catalog-layout{grid-template-columns:130px 1fr !important; gap:8px !important;}
  .catalog-grid{grid-template-columns:1fr !important;}
  .btn-all-cat { font-size: .78rem !important; padding: 8px 12px !important; }
}