/* =========================================================
   THEGIOILOP.VN – style.css
   ========================================================= */

:root{
  --blue-900:#04204f;
  --blue-800:#08356f;
  --blue-700:#0a3f8f;
  --blue-600:#0e56b3;
  --blue-500:#1a73d8;
  --gold:#ffd23d;
  --gold-600:#f0a300;
  --red:#e01a2b;
  --ink:#17233a;
  --muted:#6b7a90;
  --line:#e3e8ef;
  --bg-soft:#f4f7fb;
  --radius:8px;
  --shadow:0 10px 30px rgba(6,30,70,.12);
  --container:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button,input,select{font:inherit;color:inherit}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 16px}

/* ---------------- ICON SYSTEM (mask + currentColor) ------ */
.ico{
  display:inline-block;width:22px;height:22px;flex:none;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ico--pin{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.ico--mail{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
.ico--phone,.ico--phone-sm{-webkit-mask-image:var(--i-phone);mask-image:var(--i-phone)}
.ico--cart{-webkit-mask-image:var(--i-cart);mask-image:var(--i-cart)}
.ico--search{-webkit-mask-image:var(--i-search);mask-image:var(--i-search)}
.ico--fb{-webkit-mask-image:var(--i-fb);mask-image:var(--i-fb)}
.ico--call{-webkit-mask-image:var(--i-call);mask-image:var(--i-call)}
.ico--clock{-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)}
.ico--truck{-webkit-mask-image:var(--i-truck);mask-image:var(--i-truck)}
.ico--shield{-webkit-mask-image:var(--i-shield);mask-image:var(--i-shield)}
.ico--tool,.ico--wrench{-webkit-mask-image:var(--i-wrench);mask-image:var(--i-wrench)}
.ico--sos{-webkit-mask-image:var(--i-sos);mask-image:var(--i-sos)}
.ico--tire{-webkit-mask-image:var(--i-tire);mask-image:var(--i-tire)}
.ico--oil{-webkit-mask-image:var(--i-oil);mask-image:var(--i-oil)}
.ico--battery{-webkit-mask-image:var(--i-battery);mask-image:var(--i-battery)}
.ico--seat{-webkit-mask-image:var(--i-seat);mask-image:var(--i-seat)}

:root{
  --i-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>");
  --i-mail:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>");
  --i-phone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.2 11 11 0 0 0 3.6.6 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.3.2 2.5.6 3.6a1 1 0 0 1-.3 1l-2.2 2.2z'/></svg>");
  --i-cart:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM6.2 6 5.3 4H2v2h2l3.6 7.6-1.4 2.4A2 2 0 0 0 8 19h12v-2H8.4l1.1-2h7.1a2 2 0 0 0 1.8-1L22 6H6.2z'/></svg>");
  --i-search:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>");
  --i-fb:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7A10 10 0 0 0 22 12z'/></svg>");
  --i-call:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm5 15.2a1 1 0 0 1-1 1A12 12 0 0 1 4 5.2a1 1 0 0 1 1-1h2.4a1 1 0 0 1 1 .9 8 8 0 0 0 .4 2.2 1 1 0 0 1-.2 1L7.2 9.7a11 11 0 0 0 5 5l1.4-1.4a1 1 0 0 1 1-.2c.7.2 1.5.4 2.3.4a1 1 0 0 1 1 1v2.7z'/></svg>");
  --i-clock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6 3.7 3.7-1.4 1.4L11 13V6h2v6.6z'/></svg>");
  --i-truck:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M20 8h-3V4H3a2 2 0 0 0-2 2v11h2a3 3 0 0 0 6 0h6a3 3 0 0 0 6 0h2v-5l-3-4zM6 18.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm12 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM17 12V9.5h2.5L21.5 12H17z'/></svg>");
  --i-shield:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4zm-1 15-4-4 1.4-1.4L11 13.2l4.6-4.6L17 10l-6 6z'/></svg>");
  --i-wrench:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M22.7 19 13.6 9.9a5.5 5.5 0 0 0-7.1-7.1l3.9 3.9-2.8 2.8-3.9-3.9a5.5 5.5 0 0 0 7.1 7.1L19 22.7a1 1 0 0 0 1.4 0l2.3-2.3a1 1 0 0 0 0-1.4z'/></svg>");
  --i-sos:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 3.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13z'/><path fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM2.5 4 6 7.5 7.5 6 4 2.5 2.5 4zM20 2.5 16.5 6 18 7.5 21.5 4 20 2.5zM4 21.5 7.5 18 6 16.5 2.5 20 4 21.5zm14 0 3.5-1.5-3.5-3.5L16.5 18l1.5 3.5z'/></svg>");
  --i-tire:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm0 3a8 8 0 1 1 0 16 8 8 0 0 1 0-16z'/><path fill='black' d='M12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 3.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6zM11.2 0h1.6v3h-1.6zm0 21h1.6v3h-1.6zM0 11.2h3v1.6H0zm21 0h3v1.6h-3z'/></svg>");
  --i-oil:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2S5.5 9.2 5.5 14a6.5 6.5 0 0 0 13 0C18.5 9.2 12 2 12 2zm0 16.5a4.5 4.5 0 0 1-4.5-4.5h2A2.5 2.5 0 0 0 12 16.5v2z'/></svg>");
  --i-battery:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 2h3v2h2V2h3v2h1a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V2zm.5 9v2h2v2h2v-2h2v-2h-2V9h-2v2h-2z'/></svg>");
  --i-seat:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 3h6a2 2 0 0 1 2 2v9H7V5a2 2 0 0 1 2-2zM6 15h12a3 3 0 0 1 3 3v4h-3v-3H6v3H3v-4a3 3 0 0 1 3-3z'/></svg>");
}

/* ---------------- TOP BAR -------------------------------- */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar__inner{
  display:flex;align-items:center;gap:28px;
  min-height:104px;
}
.logo{flex:none;padding-right:28px;border-right:1px solid var(--line)}
.logo img{width:262px}

.topinfo{display:flex;align-items:center;gap:34px;flex:1;flex-wrap:wrap}
.topinfo li{display:flex;align-items:center;gap:12px;font-size:14.5px}
.topinfo .ico{
  width:46px;height:46px;padding:0;
  background:none;
  color:#fff;
  position:relative;
  -webkit-mask:none;mask:none;
  border-radius:50%;
  background-color:var(--blue-700);
  display:grid;place-items:center;
}
.topinfo .ico::after{
  content:"";width:24px;height:24px;background-color:#fff;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.topinfo .ico--pin::after{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.topinfo .ico--mail::after{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
.topinfo .ico--phone::after{-webkit-mask-image:var(--i-phone);mask-image:var(--i-phone)}
.topinfo__text{color:var(--ink)}
.topinfo__text a{color:var(--ink)}
.topinfo__text a:hover{color:var(--blue-600)}

.cart{
  flex:none;position:relative;width:56px;height:52px;
  border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--blue-800);cursor:pointer;display:grid;place-items:center;
  transition:.2s;
}
.cart:hover{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}
.cart .ico{width:26px;height:26px}
.cart__badge{
  position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;
  border-radius:50%;background:var(--gold);color:var(--blue-900);
  font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 5px;
}

/* ---------------- MAIN NAV ------------------------------- */
.mainnav{background:var(--blue-700);position:sticky;top:0;z-index:60;box-shadow:0 2px 10px rgba(4,32,79,.25)}
.mainnav__inner{display:flex;align-items:center;gap:16px;min-height:56px}
.mainnav__toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;padding:10px;cursor:pointer}
.mainnav__toggle span{width:24px;height:2px;background:#fff;display:block}

.menu{display:flex;align-items:center;flex:1;flex-wrap:wrap}
.menu>li{position:relative}
.menu>li>a{
  display:flex;align-items:center;gap:6px;
  padding:17px 13px;color:#fff;font-size:13.5px;font-weight:600;letter-spacing:.2px;
  text-transform:uppercase;white-space:nowrap;transition:.15s;
}
.menu>li.has-sub>a::after{
  content:"";width:9px;height:6px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='black' d='M0 0h10L5 6z'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='black' d='M0 0h10L5 6z'/></svg>") no-repeat center/contain;
  opacity:.85;
}
.menu>li:hover>a{background:var(--blue-600)}

.submenu{
  position:absolute;top:100%;left:0;min-width:230px;background:#fff;
  border-top:3px solid var(--gold);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:20;
}
.menu>li:hover>.submenu,.menu>li.is-open>.submenu{opacity:1;visibility:visible;transform:none}
.submenu a{display:block;padding:11px 16px;font-size:14px;border-bottom:1px solid var(--line);color:var(--ink)}
.submenu li:last-child a{border-bottom:0}
.submenu a:hover{background:var(--bg-soft);color:var(--blue-600);padding-left:20px}

.search{flex:none;display:flex;align-items:center;width:340px;max-width:38vw;background:#fff;border-radius:4px;overflow:hidden}
.search input{flex:1;border:0;outline:0;padding:11px 14px;font-size:14px;background:transparent}
.search button{border:0;background:transparent;color:var(--blue-800);padding:0 14px;cursor:pointer;height:42px}

/* ---------------- HERO ----------------------------------- */
.hero{position:relative;overflow:hidden;min-height:700px;display:flex;isolation:isolate}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url("../img/hero-bg.svg") center/cover no-repeat,#04204f;
}
.hero__grid{
  position:relative;z-index:3;width:100%;
  display:grid;grid-template-columns:305px 1fr;align-items:stretch;
}

/* --- sidebar tra cứu --- */
.finder{
  background:rgba(4,22,54,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-right:1px solid rgba(255,255,255,.12);
  padding:28px 22px;color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
}
.finder__title{margin:0;font-size:19px;font-weight:700;letter-spacing:.3px;text-align:center;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-radius:4px;overflow:hidden}
.tab{
  border:0;padding:12px 8px;background:#f2f5f9;color:var(--blue-800);
  font-weight:600;font-size:15px;cursor:pointer;transition:.15s;
}
.tab.is-active{background:var(--blue-700);color:#fff}
.finder__form{display:flex;flex-direction:column;gap:12px}
.select{position:relative;display:block}
.select::after{
  content:"";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:11px;height:7px;background-color:var(--muted);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='black' d='M0 0h10L5 6z'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path fill='black' d='M0 0h10L5 6z'/></svg>") no-repeat center/contain;
}
.select select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:1px solid rgba(255,255,255,.35);border-radius:4px;
  background:rgba(255,255,255,.08);color:#fff;
  padding:13px 38px 13px 14px;font-size:15px;outline:0;cursor:pointer;
}
.select select option{color:var(--ink);background:#fff}
.btn-find{
  border:0;border-radius:4px;padding:14px;background:var(--blue-700);color:#fff;
  font-weight:700;letter-spacing:.5px;cursor:pointer;transition:.15s;
}
.btn-find:hover{background:var(--blue-600)}
.finder__hotline{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:rgba(255,255,255,.9)}
.finder__hotline li{display:flex;align-items:center;gap:8px}
.finder__hotline .ico{width:16px;height:16px;color:var(--gold)}

/* --- nội dung hero --- */
.hero__main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;
  padding:44px 24px 40px;text-align:center;
}
.hero__logo img{width:min(430px,60vw);filter:drop-shadow(0 6px 22px rgba(0,0,0,.45))}

.hero__quickmenu{
  display:grid;grid-template-columns:repeat(3,minmax(150px,232px));gap:22px 26px;
}
.qbtn{
  display:grid;place-items:center;min-height:74px;padding:10px 14px;
  background:#fff;border-radius:6px;
  color:var(--blue-800);font-size:clamp(18px,2vw,27px);font-weight:800;letter-spacing:.5px;
  box-shadow:0 8px 22px rgba(0,10,40,.35);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.qbtn:hover{transform:translateY(-3px);background:var(--gold);color:var(--blue-900);box-shadow:0 12px 26px rgba(0,10,40,.45)}

.hero__contact{display:flex;align-items:center;gap:46px;flex-wrap:wrap;justify-content:center}
.hcontact{
  display:flex;align-items:center;gap:14px;color:#fff;
  font-size:clamp(20px,2.4vw,32px);font-weight:800;letter-spacing:.5px;
  text-shadow:0 3px 12px rgba(0,0,0,.5);
}
.hcontact .ico{width:52px;height:52px;color:#fff;filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}
.hcontact:first-child .ico{color:#1877f2;background-color:#1877f2}
.hcontact:hover{color:var(--gold)}

/* --- khối Quốc Khánh --- */
.celebrate{
  position:absolute;left:2%;bottom:2%;z-index:1;
  display:flex;align-items:flex-end;gap:10px;pointer-events:none;user-select:none;
}
.celebrate__num{
  font-size:clamp(150px,20vw,300px);line-height:.8;font-weight:800;
  background:linear-gradient(180deg,#fff6b0 0%,#ffd83d 38%,#e79a12 70%,#ffeb9c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.celebrate__text{display:flex;flex-direction:column;padding-bottom:14px}
.celebrate__script{
  font-family:"Dancing Script",cursive;font-size:clamp(30px,4vw,58px);
  color:rgba(255,255,255,.28);line-height:1;margin-bottom:-6px;
}
.celebrate__big{
  font-size:clamp(34px,5vw,74px);font-weight:800;line-height:1.05;letter-spacing:1px;
  background:linear-gradient(180deg,#ffffff 0%,#ffe9a8 55%,#f3b41c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.celebrate__sub{
  font-size:clamp(11px,1.25vw,19px);font-weight:700;color:var(--gold);letter-spacing:.6px;
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

/* ---------------- STRIP ---------------------------------- */
.strip{background:var(--blue-700);color:#fff}
.strip__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:22px;padding-bottom:22px}
.strip__item{display:flex;align-items:center;gap:14px}
.strip__item .ico{width:34px;height:34px;color:var(--gold)}
.strip__item b{display:block;font-size:15px}
.strip__item span{font-size:13px;color:rgba(255,255,255,.75)}

/* ---------------- SECTIONS ------------------------------- */
.section{padding:56px 0}
.section--grey{background:var(--bg-soft)}
.section__title{
  margin:0 0 30px;text-align:center;font-size:26px;font-weight:800;color:var(--blue-800);
  letter-spacing:.5px;position:relative;
}
.section__title::after{content:"";display:block;width:70px;height:4px;background:var(--gold);margin:12px auto 0;border-radius:2px}

.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.cat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:.18s;
}
.cat:hover{border-color:var(--blue-600);box-shadow:var(--shadow);transform:translateY(-4px)}
.cat__ico{width:46px;height:46px;color:var(--blue-600)}
.cat b{font-size:16px;color:var(--blue-800)}
.cat span{font-size:13px;color:var(--muted)}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:10px;transition:.18s;
}
.product:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.product__thumb{
  height:150px;border-radius:6px;background:var(--bg-soft);
  display:grid;place-items:center;color:var(--blue-600);
}
.product__thumb .ico{width:74px;height:74px}
.product h3{margin:0;font-size:15.5px;font-weight:600;min-height:44px}
.price{margin:0;font-size:18px;font-weight:800;color:var(--red)}
.price s{font-size:13px;font-weight:500;color:var(--muted);margin-left:6px}
.tag{
  position:absolute;top:14px;left:14px;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px;
}
.btn{
  border:0;border-radius:4px;padding:11px 16px;background:var(--blue-700);color:#fff;
  font-weight:600;cursor:pointer;transition:.15s;
}
.btn:hover{background:var(--blue-600)}
.btn--gold{background:var(--gold);color:var(--blue-900);font-weight:800}
.btn--gold:hover{background:var(--gold-600);color:#fff}

/* ---------------- CTA ------------------------------------ */
.cta{background:linear-gradient(120deg,var(--blue-900),var(--blue-600));color:#fff;padding:44px 0}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta h2{margin:0 0 6px;font-size:24px;font-weight:800}
.cta p{margin:0;color:rgba(255,255,255,.82)}
.cta__form{display:flex;gap:10px;flex-wrap:wrap}
.cta__form input{border:0;border-radius:4px;padding:13px 16px;min-width:270px;outline:0}

/* ---------------- FOOTER --------------------------------- */
.footer{background:var(--blue-900);color:rgba(255,255,255,.82);padding-top:46px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:34px}
.footer__logo{width:250px;margin-bottom:14px}
.footer h3{margin:0 0 14px;font-size:16px;color:#fff}
.footer p{margin:0;font-size:14px;line-height:1.7}
.flist li{padding:5px 0;font-size:14px}
.flist a:hover{color:var(--gold)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:16px;text-align:center;font-size:13.5px}

/* ---------------- HOTLINE FLOAT -------------------------- */
.hotline-float{
  position:fixed;right:22px;bottom:96px;z-index:80; /* chua cho bubble chat 60px o goc phai duoi */
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(224,26,43,.5);
  animation:ring 1.6s infinite;
}
.hotline-float .ico{width:30px;height:30px}
@keyframes ring{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ---------------- RESPONSIVE ----------------------------- */
@media (max-width:1300px){
  .topinfo{gap:20px;font-size:13.5px}
  .logo img{width:220px}
  .menu>li>a{padding:16px 9px;font-size:12.5px}
  .search{width:250px}
  .cats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .hero{min-height:auto}
  .hero__grid{grid-template-columns:1fr}
  .finder{order:2;border-right:0;border-top:1px solid rgba(255,255,255,.12)}
  .hero__main{padding:32px 16px}
  .celebrate{position:static;justify-content:center;padding:0 16px 26px;order:3}
  .products{grid-template-columns:repeat(2,1fr)}
  .strip__inner{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .topbar__inner{flex-wrap:wrap;gap:14px;padding-top:12px;padding-bottom:12px;min-height:0}
  .logo{border-right:0}
  .topinfo{order:3;width:100%}
  .cart{margin-left:auto}

  .mainnav__inner{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .mainnav__toggle{display:flex;order:1}
  .search{order:2;flex:1;max-width:none;width:auto}
  .menu{order:3;width:100%;flex-direction:column;align-items:stretch;display:none}
  .mainnav.is-open .menu{display:flex}
  .menu>li>a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.12);justify-content:space-between}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;background:rgba(255,255,255,.06);border-top:0}
  .menu>li.is-open>.submenu{display:block}
  .submenu a{color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
  .submenu a:hover{background:rgba(255,255,255,.1);color:var(--gold)}

  .hero__quickmenu{grid-template-columns:repeat(2,minmax(130px,1fr));gap:14px;width:100%;max-width:460px}
  .hero__contact{gap:22px}
  .cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .products,.footer__grid,.strip__inner{grid-template-columns:1fr}
  .topinfo{flex-direction:column;align-items:flex-start;gap:12px}
  .section{padding:38px 0}
  .celebrate{flex-direction:column;align-items:center;gap:0}
}