/* =============================================================
   XE TẢI THÀNH HƯNG — Header / Topbar / Sticky CTA (bộ "hh")
   Dùng cho TOÀN SITE. Nạp sau style.css.
   Đổi màu 1 chỗ duy nhất ở khối :root bên dưới.
   ============================================================= */
:root{
  --hh-red:#d6252b;   --hh-redd:#b0191e;   --hh-reds:#fdecec;
  --hh-orange:#f7941d;--hh-oranged:#e07d00;--hh-oranges:#fff3e2;
  --hh-ink:#16202c;   --hh-muted:#5a6675;  --hh-line:#e6ebf1;
  --hh-bg:#f4f7fb;    --hh-amber:#ffb300;  --hh-sep:#eef2f6;
  --hh-r:16px;
}

/* =============================================================
   ẨN NÚT GỌI NỔI CŨ CỦA TRANG CHỦ
   Markup nằm trong page-home.php, khối có comment "TH: NUT GOI NOI"
   (<div class="th-float"><a class="th-float-call">1800.0077</a></div>).
   Nó fixed ở left:18px;bottom:20px nên bị thanh hotline đỏ của theme đè lên,
   chỉ lòi ra một mẩu bo tròn trông như nút rỗng.
   Đã có hotline ở header + thanh CTA mobile nên bỏ đi cho gọn.
   Muốn bật lại: xoá rule dưới đây (markup vẫn còn nguyên trong page-home.php).
   ============================================================= */
.th-float{display:none!important}

/* --- nền chung --- */
.hh-top{font-family:'Be Vietnam Pro',Arial,sans-serif;color:var(--hh-ink);line-height:1.65}
.hh-top *{box-sizing:border-box}
.hh-top a{text-decoration:none;color:inherit}
.hh-top a:hover,.hh-top a:focus{text-decoration:none}
.hh-top img{max-width:100%;display:block;height:auto}
.hh-top ul{list-style:none;margin:0;padding:0}
.hh-ico{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hh-wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%}

/* --- nút --- */
.hh-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;height:52px;padding:0 28px;border-radius:10px;font-size:16px;transition:.2s;cursor:pointer;border:0;line-height:1.2}
.hh-btn .hh-ico{width:20px;height:20px}
.hh-top .hh-btn-main,.hh-page .hh-btn-main{background:var(--hh-red);color:#fff}
.hh-top .hh-btn-main:hover,.hh-page .hh-btn-main:hover{background:var(--hh-redd);color:#fff}
.hh-top .hh-btn-orange,.hh-page .hh-btn-orange{background:var(--hh-orange);color:#fff}
.hh-top .hh-btn-orange:hover,.hh-page .hh-btn-orange:hover{background:var(--hh-oranged);color:#fff}

/* --- TOPBAR --- */
.hh-topbar{background:var(--hh-red);color:#fff;font-size:13px}
.hh-topbar .hh-wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;flex-wrap:wrap;gap:8px}
.hh-topbar a{color:#fff;font-weight:600}
.hh-topbar a:hover{color:#ffe08a}
.hh-topbar .hh-g{color:#ffe08a;font-weight:700}

/* --- HEADER --- */
.hh-head{background:#fff;position:sticky;top:0;z-index:60;box-shadow:0 1px 0 var(--hh-line),0 6px 18px rgba(20,40,70,.05)}
.hh-head .hh-wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px;position:relative}

/* logo: ép về kích thước chuẩn, bỏ inline style của Customizer */
.hh-logo{display:flex;align-items:center;flex:none}
.hh-logo>div{margin:0;padding:0}
.hh-logo a{display:block!important;width:auto!important;height:auto!important;line-height:0!important;font-size:20px!important;font-weight:800;color:var(--hh-red)!important}
.hh-logo img{height:52px!important;width:auto!important;max-width:220px;object-fit:contain}

/* menu */
.hh-nav{display:flex;align-items:stretch;align-self:stretch;gap:20px;font-weight:600;font-size:14.5px}
.hh-navitem{position:relative;display:flex;align-items:center}
.hh-navitem>a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--hh-ink)}
.hh-nav a:hover{color:var(--hh-red)}
.hh-navitem.hh-current>a{color:var(--hh-red)}
.hh-navitem.hh-has-sub>a:after{content:"";width:0;height:0;flex:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55}
.hh-sub{display:none;position:absolute;top:100%;left:-16px;min-width:250px;max-height:70vh;overflow-y:auto;background:#fff;border:1px solid var(--hh-line);border-radius:12px;box-shadow:0 16px 36px rgba(20,40,70,.14);padding:8px 0;z-index:70}
.hh-navitem:hover>.hh-sub{display:block}
.hh-sub .hh-navitem{display:block}
.hh-sub .hh-navitem>a{display:flex;width:100%;padding:9px 16px;font-size:14px;font-weight:600;white-space:normal}
.hh-sub .hh-navitem>a:hover{background:var(--hh-reds);color:var(--hh-red)}
.hh-sub .hh-sub{position:static;display:block;box-shadow:none;border:0;padding:0 0 0 14px;min-width:0;max-height:none}

/* hotline + CTA */
.hh-head-cta{display:flex;align-items:center;gap:14px}
.hh-top .hh-head-phone{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--hh-red);font-size:18px;line-height:1;white-space:nowrap}
.hh-head-phone .hh-ico{color:var(--hh-orange)}
.hh-head-phone small{font-size:11px;color:var(--hh-muted);font-weight:600;line-height:1;display:block}
.hh-head .hh-btn{height:auto;padding:11px 20px;font-size:15px}
/* ĐỢ ĐỘ ƯU TIÊN với style.css của theme (theme có rule đè màu nút trong header) */
.hh-head .hh-head-cta a.hh-btn-main{background:var(--hh-red);color:#fff;border:0}
.hh-head .hh-head-cta a.hh-btn-main:hover{background:var(--hh-redd);color:#fff}
.hh-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:40px;height:40px;background:#fff;border:1px solid var(--hh-line);border-radius:9px;cursor:pointer;padding:0}
.hh-burger span{width:18px;height:2px;background:var(--hh-red);border-radius:2px;display:block}

/* --- THANH CTA DÍNH (mobile) --- */
.hh-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;gap:10px;background:#fff;border-top:1px solid var(--hh-line);box-shadow:0 -4px 20px rgba(21,33,46,.10);padding:10px 12px calc(10px + env(safe-area-inset-bottom));font-family:'Be Vietnam Pro',Arial,sans-serif}
.hh-sticky a{flex:1;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.hh-sticky .hh-ico{width:19px;height:19px;stroke-width:2}
.hh-sticky a.hh-sk-call{background:var(--hh-reds);color:var(--hh-red)}
.hh-sticky a.hh-sk-main{background:var(--hh-red);color:#fff;flex:.9}
.hh-sticky a.hh-sk-zalo{background:#e8f1ff;color:#1877f2}

/* --- TABLET --- */
@media(max-width:1024px){
  .hh-nav{gap:14px;font-size:13.5px}
  .hh-logo img{height:46px!important}
}
@media(max-width:960px){
  .hh-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;align-self:auto;padding:4px 24px 14px;max-height:76vh;overflow-y:auto;border-bottom:1px solid var(--hh-line);box-shadow:0 14px 26px rgba(0,0,0,.08);gap:0;font-size:15px}
  .hh-nav.hh-open{display:flex}
  .hh-navitem{display:block}
  .hh-navitem>a{display:flex;justify-content:space-between;align-items:center;padding:11px 4px;border-bottom:1px solid #f0f4f7}
  .hh-sub{display:block;position:static;min-width:0;max-height:none;overflow:visible;margin:0;padding:0 0 4px 14px;border:0;box-shadow:none;border-radius:0}
  .hh-sub .hh-navitem>a{padding:9px 4px;font-size:13.5px;color:var(--hh-muted);border-bottom:1px solid #f6f8fa}
  .hh-burger{display:flex}
}

/* --- MOBILE --- */
@media(max-width:560px){
  body{padding-bottom:72px}
  .hh-sticky{display:flex}
  /* Ẩn thanh hotline/Zalo cũ của theme để không chồng với thanh CTA mới */
  .hh-legacy-hotline{display:none!important}
  .scrolltop{bottom:80px!important}
  .hh-wrap{padding:0 16px}
  .hh-topbar{font-size:11.5px}
  .hh-topbar .hh-wrap{min-height:0;padding:6px 12px;justify-content:center;text-align:center;gap:4px}
  .hh-topbar .hh-tb-2{display:none}
  .hh-head .hh-wrap{height:auto;min-height:60px;padding:10px 14px;gap:8px}
  .hh-logo img{height:38px!important;max-width:150px}
  .hh-head-cta{gap:8px}
  .hh-top .hh-head-phone{height:40px;padding:0 12px;gap:7px;background:var(--hh-reds);border-radius:10px;font-size:14px}
  .hh-head-phone small{display:none}
  .hh-head .hh-btn{display:none}
}
@media(max-width:400px){
  .hh-sticky{gap:7px;padding-left:8px;padding-right:8px}
  .hh-sticky a{font-size:13.5px;gap:5px}
  .hh-sticky .hh-ico{width:17px;height:17px}
}
@media(max-width:360px){
  .hh-top .hh-head-phone{font-size:13px;padding:0 9px}
}