/* Header 3.0 (DS 2.1) · markup parts/header3.php · hành vi assets/js/header3.js · thiết kế Claude Design templates/header-3 (05/10/2026).
   Mốc: ≥1180 đủ (ô tìm dạng viên, chữ EU·G7, ảnh bên mega) · ≥1024 có dải tiện ích + menu + mega · <1024 ngăn kéo · <600 capsule 60px, ẩn CTA.
   Nút/CTA cam chữ trắng: quyết định user 05/10/2026, chỉ áp cho header + phần làm mới (trang cũ giữ chữ ink). */

/* Cầu nối tới khi gỡ legacy-kit.css (giai đoạn D): trên trang Elementor, legacy-kit.css đặt lại token DS 2.0 ở :root → ghim lại
   giá trị DS 2.1 trong phạm vi header, ô tìm, ngăn kéo (cùng cách với footer.css). */
.hd3, .hd3-search, .hd3-drawer, .hd3-scrim {
  --tkt-blue-900: var(--bg-dark); --tkt-blue-200: var(--fg-on-dark-2);
  --tkt-blue-600: rgb(0 79 159); --tkt-blue-050: rgb(238 244 252); --fg-1: rgb(10 35 70); --fg-4: rgb(142 155 176);
  --glass-stroke: rgba(255,255,255,0.90);
  --hd3-e: var(--ease-out); --hd3-t: 450ms;
  font-family: var(--font-display); font-feature-settings: normal; -webkit-font-smoothing: antialiased;
}
/* Trang Elementor: CSS Kit đặt kiểu cho mọi button/input/a (nền, viền, đệm, bo góc) → trả về trắng trơn trong header (độ ưu tiên 0,1,2) */
body :is(.hd3, .hd3-search, .hd3-drawer) :is(button, input) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none; min-height: 0; width: auto; height: auto; cursor: pointer; }
body :is(.hd3, .hd3-search, .hd3-drawer) a { text-decoration: none; }
:is(.hd3, .hd3-search, .hd3-drawer) *, :is(.hd3, .hd3-search, .hd3-drawer) *::before, :is(.hd3, .hd3-search, .hd3-drawer) *::after { box-sizing: border-box; }
:is(.hd3, .hd3-search, .hd3-drawer) [hidden], .hd3-drawer[hidden], .hd3-scrim[hidden] { display: none !important; } /* display:flex/grid của khối đè [hidden] mặc định */
:is(.hd3, .hd3-search, .hd3-drawer) :focus-visible { outline: 2px solid var(--tkt-blue-600); outline-offset: 2px; }

/* Chỗ chừa cho header cố định: dải tiện ích 38 + lề 12 + capsule 72 = 122 · <1024: 12 + 72 · <600: 12 + 60. JS chỉnh theo đo thật. */
body.tkt-h3 { padding-top: var(--tkh3-h, 122px); }
@media (max-width: 1023px) { body.tkt-h3 { padding-top: var(--tkh3-h, 84px); } }
@media (max-width: 599px)  { body.tkt-h3 { padding-top: var(--tkh3-h, 72px); } }

/* ---------- Khung cố định ---------- */
.hd3 { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-overlay) - 10); color: var(--fg-1); transition: transform var(--hd3-t) var(--hd3-e); }
.hd3.is-sc { transform: translateY(-38px); }
.hd3.is-hid { transform: translateY(-140%); }

/* Dải tiện ích */
.hd3-util { height: 38px; background: linear-gradient(90deg, var(--tkt-blue-900) 0%, var(--tkt-blue-600) 100%); transition: opacity 300ms; } /* dừng ở Cobalt: chữ nhỏ trên nền đạt ≥4,5:1 (blue-400 làm EN/email còn 2,4–3,8:1) */
.hd3-util :focus-visible { outline-color: var(--fg-on-dark-1); }
.hd3 .hd3-util a { min-height: 38px; display: flex; align-items: center; } /* vùng chạm = cả chiều cao dải */
.hd3.is-sc .hd3-util { opacity: 0; }
.hd3-util-in { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hd3-util-l, .hd3-util-r { display: flex; align-items: center; min-width: 0; font-size: 12.5px; }
.hd3-util-l { gap: 14px; color: rgba(255,255,255,.88); }
.hd3-util-r { gap: 4px; font-weight: var(--w-bold); }
.hd3 .hd3-util-tel { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--fg-on-dark-1); font-weight: var(--w-bold); }
.hd3 .hd3-util-tel:hover { color: var(--tkt-orange-300); }
.hd3 .hd3-util-mail { white-space: nowrap; color: rgba(255,255,255,.88); }
.hd3 .hd3-util-mail:hover { color: var(--fg-on-dark-1); }
.hd3-util-sep { width: 1px; height: 14px; margin: 0 6px; background: rgba(255,255,255,.22); }
.hd3-util-l .hd3-util-sep { margin: 0; }
.hd3 .hd3-util-r a { white-space: nowrap; padding: 6px 10px; color: var(--fg-on-dark-1); transition: color 250ms; }
.hd3 .hd3-util-r a:hover { color: var(--tkt-blue-100); }
.hd3 .hd3-util-r .hd3-util-stock { display: flex; align-items: center; gap: 8px; color: var(--tkt-orange-300); }
.hd3 .hd3-util-r .hd3-util-stock:hover { color: var(--tkt-orange-200); }
.hd3-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tkt-orange-500); box-shadow: 0 0 0 3px rgba(239,125,0,.28); }

/* Chuyển ngôn ngữ */
.hd3-lang { display: flex; padding: 2px; border-radius: var(--r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
body .hd3-lang button { display: grid; place-items: center; min-width: 32px; height: 20px; padding: 1px 10px 0; border-radius: var(--r-pill); font-size: 10.5px; font-weight: var(--w-bold); line-height: 1;
  position: relative; color: rgba(255,255,255,.92); transition: background-color 250ms, color 250ms; }
body .hd3-lang button::after { content: ""; position: absolute; inset: -9px -3px; } /* vùng chạm ≈ 38×38 trong dải 38px */
body .hd3-lang button[aria-pressed="true"] { background: var(--bg-pure); color: var(--tkt-blue-800); }
.hd3-lang--light { background: var(--tkt-blue-050); border: 0; }
body .hd3-lang--light button { min-width: 44px; height: 40px; font-size: 12px; color: var(--fg-2); }
body .hd3-lang--light button[aria-pressed="true"] { background: var(--tkt-blue-600); color: var(--fg-on-dark-1); }

/* Capsule */
.hd3-wrap { position: relative; max-width: 1280px; margin: 12px auto 0; padding: 0 clamp(10px, 2vw, 16px); transition: max-width var(--hd3-t) var(--hd3-e), margin var(--hd3-t) var(--hd3-e); }
.hd3.is-sc .hd3-wrap { max-width: 1180px; margin-top: 8px; }
.hd3-cap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 8px 0 clamp(14px, 2vw, 20px); border-radius: var(--r-pill);
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.95); box-shadow: 0 12px 32px -24px rgba(0,79,159,.35);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition: height var(--hd3-t) var(--hd3-e), background-color var(--hd3-t), box-shadow var(--hd3-t); }
.hd3.is-sc .hd3-cap { height: 60px; background: rgba(255,255,255,.86); box-shadow: 0 20px 44px -24px rgba(0,79,159,.5); }
.hd3 .hd3-brand { flex: none; display: flex; align-items: center; gap: 12px; }
/* img trong header: độ ưu tiên ≥ (0,2,1) vì trang SP nạp `.woocommerce img{height:auto;max-width:100%}` (0,1,1) → logo về 1024×579, đẩy menu ra ngoài */
body .hd3 img.hd3-logo { display: block; height: 40px; width: auto; max-width: none; transition: height var(--hd3-t) var(--hd3-e); }
body .hd3.is-sc img.hd3-logo { height: 32px; }
.hd3-lockup { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 1px solid var(--line); line-height: 1; white-space: nowrap; }
.hd3-lockup b { font-size: 12px; letter-spacing: .04em; color: var(--tkt-blue-600); }
.hd3-lockup span { font-size: 9.5px; letter-spacing: .2em; color: var(--fg-caption); }
.hd3.is-sc .hd3-lockup { display: none; }

/* Menu chính + viên trắng trượt theo mục */
.hd3-nav { position: relative; display: flex; align-items: center; padding: 4px; border-radius: var(--r-pill); background: rgba(0,79,159,.06); }
.hd3-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--bg-pure); opacity: 0; pointer-events: none;
  box-shadow: 0 8px 18px -10px rgba(0,79,159,.55), inset 0 0 0 1px rgba(0,79,159,.06);
  transition: transform 500ms var(--hd3-e), width 500ms var(--hd3-e), opacity 300ms; }
body .hd3 .hd3-navitem { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 15px; border-radius: var(--r-pill);
  color: var(--fg-1); font-size: 14.5px; font-weight: var(--w-bold); line-height: 1.2; transition: color 250ms; }
body .hd3 .hd3-navitem[aria-expanded="true"], body .hd3 .hd3-navitem:hover { color: var(--tkt-blue-600); }
.hd3-caret { color: var(--tkt-orange-500); transition: transform 350ms var(--hd3-e); }
.hd3-navitem[aria-expanded="true"] .hd3-caret { transform: scaleY(-1); } /* lật, không xoay (DS motion) */

/* Nút bên phải */
.hd3-actions { flex: none; display: flex; align-items: center; gap: 8px; }
body .hd3 .hd3-find { display: flex; align-items: center; gap: 10px; height: 44px; width: 232px; padding: 0 8px 0 14px; border-radius: var(--r-pill); background: rgba(0,79,159,.06);
  color: var(--fg-caption); font-size: 13px; text-align: left; transition: background-color 250ms, width var(--hd3-t) var(--hd3-e); }
body .hd3 .hd3-find:hover { background: rgba(0,79,159,.11); }
.hd3-find svg { flex: none; color: var(--tkt-blue-600); }
.hd3-find-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd3-find kbd { flex: none; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--bg-pure); border: 1px solid var(--line);
  font: var(--w-bold) 11px/1 var(--font-display); color: var(--fg-2); }
.hd3.is-sc .hd3-find { width: 44px; padding: 0; justify-content: center; gap: 0; } /* thu gọn: thành nút tròn thay vì cắt chữ gợi ý */
.hd3.is-sc .hd3-find-tx, .hd3.is-sc .hd3-find kbd { display: none; }
body .hd3 .hd3-icn { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--tkt-blue-600);
  border: 1px solid var(--line); background: rgba(255,255,255,.7); transition: background-color 250ms, border-color 250ms; }
body .hd3 .hd3-icn:hover { background: var(--bg-pure); border-color: var(--tkt-blue-600); }
body .hd3 .hd3-hot { border: 0; background: var(--tkt-blue-050); }
body .hd3 .hd3-hot:hover { background: var(--tkt-blue-100); color: var(--tkt-blue-600); }
.hd3-hot svg { width: 17px; height: 17px; }
.hd3-hot-dot { position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--semantic-success-dot); border: 2px solid var(--bg-pure); }
/* CTA: Cobalt chữ trắng, rê chuột lấp cam từ đáy, chữ vẫn trắng */
.hd3 .hd3-cta { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 18px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--fg-on-dark-1); font-size: 13.5px; font-weight: var(--w-bold); background-color: var(--tkt-blue-600);
  background-image: linear-gradient(0deg, var(--tkt-orange-500) 0%, var(--tkt-orange-500) 60%, transparent 100%); background-repeat: no-repeat; background-position: bottom; background-size: 100% 0%;
  transition: background-size var(--dur-fill) var(--ease-fill); }
.hd3 .hd3-cta:hover, .hd3 .hd3-cta:focus-visible { background-size: 100% 170%; color: var(--fg-on-dark-1); }
.hd3-cta-ic { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.hd3-cta-ic svg { width: 14px; height: 14px; }
.hd3-cta-s { display: none; }
body .hd3 .hd3-burger { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-pure); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.hd3-burger span { width: 16px; height: 2px; border-radius: 2px; background: var(--fg-1); }
.hd3-burger span:last-child { width: 10px; margin-left: 6px; background: var(--tkt-orange-500); }

/* ---------- Mega ---------- */
.hd3-mega { position: absolute; top: calc(100% + 10px); left: clamp(10px, 2vw, 16px); right: clamp(10px, 2vw, 16px); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  border-radius: var(--r-24); overflow: hidden; background: linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(234,241,250,.86) 100%);
  border: 1px solid rgba(255,255,255,.95); box-shadow: var(--elev-5); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  animation: hd3In 280ms var(--hd3-e); }
.hd3-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* cầu nối chuột từ menu xuống panel */
@keyframes hd3In { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes hd3Slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.hd3-mega-main { min-width: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; container-type: inline-size; }
.hd3-mega-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hd3-tabs { min-width: 0; } /* tab + nút xem danh mục luôn 1 hàng (trước: wrap → nút rớt xuống hàng 2 ở ~1320px) */
@container (max-width: 880px) { /* panel hẹp: nút chỉ còn mũi tên tròn, nhãn vẫn ở aria-label */
  .hd3 .hd3-round { width: 44px; padding: 0; justify-content: center; }
  .hd3-round span { display: none; }
  .hd3-round svg { width: 16px; height: 16px; padding: 0; background: none; }
}
.hd3-tabs { position: relative; display: flex; max-width: 100%; padding: 4px; border-radius: var(--r-pill); overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 var(--bg-pure), 0 8px 20px -14px rgba(0,79,159,.35); }
.hd3-tabink { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-pill); pointer-events: none;
  background: linear-gradient(160deg, var(--tkt-blue-400), var(--tkt-blue-600)); box-shadow: 0 8px 18px -8px rgba(0,79,159,.6);
  transition: transform 500ms var(--hd3-e), width 500ms var(--hd3-e); }
body .hd3 .hd3-tab { position: relative; z-index: 1; display: flex; align-items: center; height: 40px; padding: 0 13px; border-radius: var(--r-pill); white-space: nowrap;
  color: var(--fg-2); font-size: 14px; font-weight: var(--w-bold); transition: color 300ms; }
body .hd3 .hd3-tab[aria-selected="true"] { color: var(--fg-on-dark-1); }
.hd3 .hd3-round { flex: none; height: 44px; padding: 0 8px 0 18px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 10px; color: var(--tkt-blue-600); font-size: 13.5px; font-weight: var(--w-bold); white-space: nowrap;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 var(--bg-pure), 0 8px 20px -14px rgba(0,79,159,.35);
  transition: background-color 250ms, color 250ms, transform 300ms var(--hd3-e); }
.hd3 .hd3-round:hover { background: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.hd3-round svg { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--tkt-blue-050); transition: transform 300ms var(--hd3-e), background-color 250ms; }
.hd3 .hd3-round:hover svg { background: rgba(255,255,255,.18); transform: translateX(2px); }
.hd3-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.hd3-tiles.is-in { animation: hd3Slide 260ms var(--hd3-e); }
.hd3 .hd3-tile { display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 12px; border-radius: 18px; color: var(--fg-1);
  background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.95); transition: transform 300ms var(--hd3-e), box-shadow 300ms, border-color 300ms, color 300ms; }
.hd3 .hd3-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -20px rgba(0,79,159,.45); border-color: var(--tkt-blue-200); color: var(--tkt-blue-600); }
.hd3-tile-media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-12); overflow: hidden; background: var(--bg-canvas); }
body .hd3 img.hd3-tile-img { position: absolute; max-width: none; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; } /* ảnh SP nền trắng hoà vào nền Mist */
.hd3-tile b { padding: 0 4px; font-size: 14px; line-height: 1.3; font-weight: var(--w-bold); text-wrap: balance; }
.hd3-stock { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.9);
  font-size: 10.5px; font-weight: var(--w-bold); color: var(--semantic-success); pointer-events: none; }
.hd3-stock span { width: 6px; height: 6px; border-radius: 50%; background: var(--semantic-success-dot); }

/* Thẻ ảnh bên phải (hàng kho / ảnh hiện trường ngành) */
.hd3 .hd3-aside { position: relative; display: block; width: 300px; min-height: 300px; margin: 10px 10px 10px 0; border-radius: 18px; overflow: hidden; color: var(--fg-on-dark-1);
  background: linear-gradient(160deg, var(--tkt-blue-600), var(--tkt-blue-800)); box-shadow: 0 20px 40px -24px rgba(5,38,81,.7); }
.hd3 .hd3-aside--sol { background: var(--tkt-blue-100); }
body .hd3 img.hd3-aside-img { position: absolute; max-width: none; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd3-plate { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; pointer-events: none;
  background: rgba(0,79,159,.64); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }
.hd3-plate-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hd3-plate-tx b { font-size: 17px; line-height: 1.2; font-weight: var(--w-bold); }
.hd3-plate-tx span { font-size: 12.5px; color: var(--tkt-blue-100); }
.hd3-plate-go { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tkt-orange-500); color: var(--fg-on-dark-1); display: grid; place-items: center; }
.hd3-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 450ms; }
.hd3-scene[data-on] { opacity: 1; }
.hd3-scene[data-on] .hd3-plate { animation: hd3Slide 260ms var(--hd3-e); }

/* Mega Giải pháp: 8 ngành 2 cột */
.hd3-solcol { min-width: 0; padding: 16px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.hd3 .hd3-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; color: var(--tkt-blue-600); font-size: 13.5px; font-weight: var(--w-bold); }
.hd3-all svg { width: 14px; height: 14px; color: var(--tkt-orange-500); transition: transform 300ms var(--hd3-e); }
.hd3 .hd3-all:hover svg { transform: translateX(3px); }
.hd3-sols { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.hd3 .hd3-sol { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 14px; color: var(--fg-1);
  border: 1px solid rgba(255,255,255,.95); background: rgba(255,255,255,.72); box-shadow: 0 8px 20px -16px rgba(0,79,159,.4);
  transition: background-color 300ms, border-color 300ms, color 300ms; }
.hd3 .hd3-sol b { font-size: 14px; line-height: 1.3; font-weight: var(--w-bold); }
.hd3-sol-n { flex: none; font-size: 12px; font-weight: var(--w-bold); color: var(--tkt-orange-700); transition: color 300ms; }
.hd3 .hd3-sol[aria-current="true"] { background: linear-gradient(160deg, var(--tkt-blue-400), var(--tkt-blue-600)); border-color: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.hd3 .hd3-sol[aria-current="true"] .hd3-sol-n { color: var(--tkt-orange-300); }

/* ---------- Tìm kiếm (engine mu-plugins/tkt-search.php: mở/đóng bằng data-open, kết quả .tkts-*) ---------- */
.hd3-search { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; justify-content: center; align-items: flex-start; padding: min(12vh, 96px) 10px 10px;
  background: rgba(5,38,81,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hd3-search[data-open="true"] { display: flex; }
.hd3-search-box { width: min(680px, 100%); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.95); box-shadow: 0 40px 80px -30px rgba(5,38,81,.55); animation: hd3In 300ms var(--hd3-e); }
.hd3-search-bar { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line-soft); }
.hd3-search-bar > svg { flex: none; width: 20px; height: 20px; color: var(--tkt-blue-600); }
body .hd3-search .hd3-search-bar input { flex: 1; min-width: 0; height: 44px; outline: 0; font-size: 16px; color: var(--fg-1); cursor: text; -webkit-appearance: none; appearance: none; }
.hd3-search-bar input::placeholder { color: var(--fg-4); }
.hd3-search-bar input::-webkit-search-cancel-button { -webkit-appearance: none; }
body .hd3-search .hd3-esc { flex: none; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-pure); font-size: 11px; font-weight: var(--w-bold); color: var(--fg-caption); }
.hd3-search-body { flex: 1; overflow-y: auto; padding: 10px; }
.hd3-search-pop { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 10px; }
.hd3-search-h { font-size: 11px; font-weight: var(--w-bold); letter-spacing: .16em; color: var(--fg-caption); }
.hd3-search-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hd3-search .hd3-search-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); background: var(--tkt-blue-050);
  color: var(--tkt-blue-600); font-size: 13px; font-weight: var(--w-bold); white-space: nowrap; transition: background-color 250ms, color 250ms; }
.hd3-search .hd3-search-tags a:hover { background: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.hd3-search .hd3-results { margin: 0; border: 0; max-height: none; }
.hd3-search-body:has(.hd3-results[data-show="true"]) .hd3-search-pop { display: none; } /* đang có kết quả → ẩn gợi ý phổ biến */
.hd3-search-hint { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--fg-caption); }

/* ---------- Ngăn kéo mobile ---------- */
.hd3-scrim { position: fixed; inset: 0; z-index: calc(var(--z-modal) - 1); background: rgba(5,38,81,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: hd3Fade 300ms; }
@keyframes hd3Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd3Drawer { from { transform: translateX(100%); } to { transform: none; } }
.hd3-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal); width: min(400px, 88vw); display: flex; flex-direction: column; background: var(--bg-pure);
  color: var(--fg-1); box-shadow: -30px 0 60px -30px rgba(5,38,81,.5); animation: hd3Drawer 300ms var(--hd3-e); }
.hd3-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 14px 18px; border-bottom: 1px solid var(--line-soft); }
body .hd3-drawer .hd3-drawer-logo img { display: block; height: 30px; width: auto; max-width: none; }
.hd3-drawer-tools { display: flex; align-items: center; gap: 8px; }
body .hd3-drawer .hd3-x { width: 44px; height: 44px; border-radius: 50%; background: var(--tkt-blue-050); color: var(--fg-1); display: grid; place-items: center; }
.hd3-drawer-body { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.hd3-drawer-body > * { flex-shrink: 0; } /* khối cuộn: không co ô tìm/menu khi nội dung dài hơn khung */
/* Trợ lý chat tkt-care nổi trên mọi lớp: ẩn khi ngăn kéo hoặc ô tìm đang mở để không che CTA/kết quả */
body:has(.hd3-drawer:not([hidden])) :is(#tktc-launchstack, #tktc-launcher, #tktc-toup, .tktc-teaser),
body:has(#tkt-search[data-open="true"]) :is(#tktc-launchstack, #tktc-launcher, #tktc-toup, .tktc-teaser) { display: none !important; }
body .hd3-drawer .hd3-drawer-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg-elev);
  color: var(--fg-caption); font-size: 16px; text-align: left; }
.hd3-drawer-search svg { color: var(--tkt-blue-600); }
.hd3-dnav { display: flex; flex-direction: column; }
.hd3-dgrp { border-bottom: 1px solid var(--line-soft); }
body .hd3-drawer .hd3-ditem { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 54px; padding: 0 6px; font-size: 17px; font-weight: var(--w-bold); color: var(--fg-1); text-align: left; }
.hd3-ditem svg { width: 16px; height: 16px; color: var(--fg-4); }
.hd3-ditem .hd3-caret { color: var(--tkt-orange-500); }
body .hd3-drawer .hd3-ditem[aria-expanded="true"] { color: var(--tkt-blue-600); }
.hd3-ditem[aria-expanded="true"] .hd3-caret { transform: scaleY(-1); }
.hd3-dkids { display: flex; flex-direction: column; gap: 2px; padding: 0 0 12px; }
.hd3-drawer .hd3-dkids a { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border-radius: var(--r-12); background: var(--bg-media);
  color: var(--fg-1); font-size: 15px; }
.hd3-drawer .hd3-dkids a:hover { background: var(--tkt-blue-050); color: var(--tkt-blue-600); }
.hd3-dkids small { font-size: 12px; color: var(--fg-caption); white-space: nowrap; }
.hd3-drawer-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--bg-elev); }
.hd3-status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-caption); }
.hd3-status > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--semantic-success-dot); }
.hd3-status.is-off > span:first-child { background: var(--tkt-orange-500); }
.hd3-drawer .hd3-drawer-cta { display: flex; justify-content: center; align-items: center; height: 48px; border-radius: var(--r-12); background: var(--tkt-orange-500);
  color: var(--fg-on-dark-1); font-size: 15px; font-weight: var(--w-bold); transition: background-color 250ms; }
.hd3-drawer .hd3-drawer-cta:hover { background: var(--tkt-orange-600); color: var(--fg-on-dark-1); }
.hd3-drawer-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hd3-drawer .hd3-drawer-row a { display: flex; justify-content: center; align-items: center; height: 48px; border-radius: var(--r-12); font-size: 14px; font-weight: var(--w-bold); white-space: nowrap;
  color: var(--tkt-blue-600); background: var(--tkt-blue-050); }
.hd3-drawer .hd3-drawer-row a:first-child { border: 1.5px solid var(--tkt-blue-600); background: var(--bg-pure); }

/* ---------- Khổ màn hình ---------- */
.hd3-icn--search, .hd3-hot { display: none !important; }
.hd3.is-sc .hd3-hot { display: grid !important; }
@media (max-width: 1179px) {
  .hd3-lockup, .hd3-aside, .hd3-find { display: none !important; }
  .hd3-icn--search { display: grid !important; }
}
@media (max-width: 1023px) {
  .hd3-util, .hd3-nav, .hd3-mega, .hd3.is-sc .hd3-hot { display: none !important; }
  .hd3.is-sc { transform: none; }
  .hd3.is-hid { transform: translateY(-140%); }
  body .hd3 .hd3-burger { display: flex; }
  .hd3-cta-l { display: none; }
  .hd3-cta-s { display: inline; }
}
@media (max-width: 599px) {
  .hd3-wrap { padding: 0 10px; }
  .hd3-cap, .hd3.is-sc .hd3-cap { height: 60px; padding-left: 14px; }
  body .hd3 img.hd3-logo, body .hd3.is-sc img.hd3-logo { height: 30px; }
  .hd3 .hd3-cta { display: none; }
  .hd3-search { padding: 10px; }
  .hd3-search-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.hd3, .hd3-search, .hd3-drawer, .hd3-scrim), :is(.hd3, .hd3-search, .hd3-drawer) * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}