/* =====================================================================
   PAKI-TECH · Bao bì giấy — demo redesign (bố cục tham khảo hoabanfood.com)
   Hệ màu: lấy từ logo (xanh · đỏ · cam) trên nền trắng – xám xanh lạnh; màu kraft chỉ dành cho sản phẩm. Hệ chuyển động: nhẹ, ease-out.
   ===================================================================== */

:root {
  /* Trung tính lạnh: nền trắng + xám xanh — để sản phẩm màu kraft tự nổi bật */
  --page: #ffffff;
  --mist: #eef3f8;
  --mist-2: #e2eaf3;
  --well: #f3f6fa;
  --card: #ffffff;
  --line: #dae3ed;
  --line-2: #c4d1df;
  --ink: #112132;
  --text: #2b3a4b;
  --text-2: #546478;
  --text-3: #8393a5;

  /* Màu thương hiệu — lấy đúng từ logo Paki-Tech: xanh #2A8FCE · đỏ #C80303 · cam #ED9827 */
  --blue: #1665a0;
  --blue-logo: #2a8fce;
  --blue-light: #8fc6ee;
  --blue-50: #eaf3fb;
  --blue-100: #d3e5f5;
  --deep: #0a3a63;
  --night: #0b1c2c;
  --accent: #1570c9;   /* màu nhấn: nút chính, giá, nút gọi (đỏ #C80303 chỉ còn trong logo) */
  --accent-2: #0f5aa6;
  --orange: #ed9827;
  --zalo: #0068ff;
  --ok: #1f8a4c;

  /* Bề rộng nội dung: desktop = 86% chiều ngang trang, căn giữa (theo website-build-system) */
  --wrap: 86%;

  --f-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-num: "Barlow Condensed", "Be Vietnam Pro", system-ui, sans-serif;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --sh-1: 0 1px 2px rgba(17, 33, 50, .06), 0 2px 8px rgba(17, 33, 50, .05);
  --sh-2: 0 10px 30px -12px rgba(17, 33, 50, .26), 0 4px 10px -4px rgba(17, 33, 50, .1);
  --sh-3: 0 30px 60px -20px rgba(17, 33, 50, .42);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --intro: .1s;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --flute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22' viewBox='0 0 28 22'%3E%3Cpath d='M0 11 C7 -1 7 -1 14 11 S21 23 28 11' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M0 1h28M0 21h28' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}
html.pk-intro { --intro: 3.05s; }

/* Bảng màu xem thử (?palette=1|2|3) — xanh dương là màu nhấn: nút chính, giá, liên kết; đỏ chỉ còn trong logo */
html.pal-1 { /* Cobalt — xám đá lạnh + xanh coban */
  --ink: #0f172a; --text: #334155; --text-2: #475569; --text-3: #7b8799; --line: #e2e8f0; --line-2: #cbd5e1;
  --mist: #f1f5f9; --mist-2: #e2e8f0; --well: #f8fafc;
  --blue: #2563eb; --blue-light: #93c5fd; --blue-50: #eff6ff; --blue-100: #dbeafe; --deep: #1e3a8a; --night: #0b1120;
  --accent: #2563eb; --accent-2: #1d4ed8; --orange: #f59e0b;
}
html.pal-2 { /* Navy công nghiệp + xanh điện */
  --ink: #0a1628; --text: #2a3a52; --text-2: #4f617a; --text-3: #7a8aa0; --line: #dfe6ef; --line-2: #c6d2e0;
  --mist: #edf2f8; --mist-2: #dfe7f1; --well: #f4f7fb;
  --blue: #0062e6; --blue-light: #7fb6ff; --blue-50: #e8f1ff; --blue-100: #d0e3ff; --deep: #0b2a55; --night: #071a33;
  --accent: #0062e6; --accent-2: #004fbd; --orange: #ffb020;
}
html.pal-3 { /* Xanh trời theo logo + cam logo làm điểm nhấn nhỏ */
  --ink: #102a3d; --text: #2f4659; --text-2: #587083; --text-3: #7890a3; --line: #dbe7f0; --line-2: #c2d5e3;
  --mist: #edf5fa; --mist-2: #dceaf4; --well: #f4f9fc;
  --blue: #1279bd; --blue-light: #9fd3f5; --blue-50: #eaf5fc; --blue-100: #d2eaf8; --deep: #0c4a75; --night: #082338;
  --accent: #1279bd; --accent-2: #0d66a3; --orange: #ed9827;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
/* Lenis (cuộn mượt bằng bánh xe chuột) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 16px/1.65 var(--f-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue-100); color: var(--ink); }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.container { width: var(--wrap); margin: 0 auto; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10001; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }
.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.kbd { display: inline-block; padding: 0 7px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--ink); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  background: var(--bg); color: var(--fg); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap;
  border: 1.5px solid transparent; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s, color .25s, border-color .25s;
}
.btn .ic { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn::after { /* vệt sáng lướt qua khi hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
  .btn:hover::after { transform: translateX(120%); }
  .btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
}
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-block { display: flex; width: 100%; }
.btn-red { --bg: var(--accent); }
.btn-red:hover { --bg: var(--accent-2); }
.btn-dark { --bg: var(--ink); }
.btn-zalo { --bg: var(--zalo); }
.btn-light { --bg: #fff; --fg: var(--ink); }
.btn-glass { --bg: rgba(255, 255, 255, .12); --fg: #fff; border-color: rgba(255, 255, 255, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-glass:hover { --bg: rgba(255, 255, 255, .2); }
.btn-ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-outline-light { --bg: transparent; --fg: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-outline-light:hover { border-color: #fff; }
.play-dot { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; background: #fff; color: var(--accent); }
.play-dot .ic { width: 12px; height: 12px; margin-left: 2px; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--ink); transition: background-color .2s, transform .3s var(--ease-out); }
.icon-btn:hover { background: var(--blue-50); transform: rotate(90deg); }
.icon-btn .ic { width: 22px; height: 22px; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--accent); }

/* ---------- Badges ---------- */
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 11px 5px 10px; border-radius: 6px 999px 999px 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
  color: #fff; background: var(--accent); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45);
}
.badge-navy { background: var(--deep); }
.badge-kraft { background: var(--orange); color: var(--ink); }
.badge-new { background: var(--blue); }

/* =====================================================================
   INTRO — 3,5s: 4 góc nẹp ôm logo → thanh nạp → tách dọc giữa màn hình
   ===================================================================== */
.intro { display: none; }
html.pk-intro .intro { display: block; position: fixed; inset: 0; z-index: 10000; pointer-events: none; animation: introGone 0s linear 3.5s forwards; }
.intro-half { position: absolute; top: 0; bottom: 0; width: 50.1%; background: var(--night); will-change: transform; }
.intro-half-l { left: 0; animation: halfL .7s cubic-bezier(.76, 0, .24, 1) 2.8s forwards; }
.intro-half-r { right: 0; animation: halfR .7s cubic-bezier(.76, 0, .24, 1) 2.8s forwards; }
@keyframes halfL { to { transform: translateX(-101%); } }
@keyframes halfR { to { transform: translateX(101%); } }
.intro-seam {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform: scaleY(0);
  background: linear-gradient(180deg, transparent, var(--blue-light) 25%, var(--blue-light) 75%, transparent); box-shadow: 0 0 18px var(--blue);
  animation: seamIn .4s cubic-bezier(.65, 0, .35, 1) 2.45s forwards, seamOut .3s ease 2.85s forwards;
}
@keyframes seamIn { to { transform: scaleY(1); } }
@keyframes seamOut { from { transform: scaleY(1); } to { transform: scaleY(1); opacity: 0; } }
.intro-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; animation: stageOut .35s ease-in 2.45s forwards; }
@keyframes stageOut { to { opacity: 0; transform: scale(.96); } }
.intro-frame { position: relative; width: clamp(220px, 28vw, 360px); padding: clamp(24px, 3vw, 40px); }
.intro-frame i { position: absolute; width: 28px; height: 28px; border: 0 solid var(--orange); opacity: 0; animation: cornerIn .7s var(--ease-out) forwards; }
.intro-frame .c-tl { top: 0; left: 0; border-width: 3px 0 0 3px; transform: translate(-30px, -30px); animation-delay: .15s; }
.intro-frame .c-tr { top: 0; right: 0; border-width: 3px 3px 0 0; transform: translate(30px, -30px); animation-delay: .22s; }
.intro-frame .c-br { bottom: 0; right: 0; border-width: 0 3px 3px 0; transform: translate(30px, 30px); animation-delay: .29s; }
.intro-frame .c-bl { bottom: 0; left: 0; border-width: 0 0 3px 3px; transform: translate(-30px, 30px); animation-delay: .36s; }
@keyframes cornerIn { to { opacity: 1; transform: none; } }
.intro-mark {
  display: block; width: 100%; height: auto; opacity: 0; transform: translateY(14px); filter: blur(6px);
  animation: markIn .9s var(--ease-out) .55s forwards;
}
@keyframes markIn { to { opacity: 1; transform: none; filter: blur(0); } }
.intro-tag { font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; transform: translateY(8px); animation: tagIn .7s var(--ease-out) 1.1s forwards; }
@keyframes tagIn { to { opacity: 1; transform: none; } }
.intro-bar { width: clamp(160px, 18vw, 220px); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.intro-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-light)); transform: scaleX(0); transform-origin: 0 50%; animation: barFill 1.3s cubic-bezier(.65, 0, .35, 1) 1.1s forwards; }
@keyframes barFill { to { transform: scaleX(1); } }
@keyframes introGone { to { visibility: hidden; } }

/* =====================================================================
   HEADER — 1 hàng gọn: logo · menu · tìm kiếm · giỏ báo giá
   Trong suốt tệp vào banner → hết banner: nền đen mờ · cuộn xuống ẩn, cuộn lên hiện
   ===================================================================== */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: #fff;
  transition: transform .45s var(--ease-out), background-color .35s, box-shadow .35s;
}
.masthead.is-dark {
  background: rgba(8, 15, 24, .66);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .7);
}
.masthead.is-hidden { transform: translateY(-105%); }
.masthead.mh-static { position: absolute; } /* trang con: header đứng yên trên banner, không bám theo khi cuộn */
/* Thêm vào giỏ khi đang cuộn ở trang con: tạm ghim header lên đầu màn hình */
.masthead.mh-static.mh-peek {
  position: fixed; background: rgba(8, 15, 24, .86); box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .7);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); animation: mhPeekIn .38s var(--ease-out);
}
.masthead.mh-static.mh-peek-out { transform: translateY(-105%); }
@keyframes mhPeekIn { from { transform: translateY(-105%); } }
.mh-in { position: relative; display: flex; align-items: center; gap: 32px; height: 84px; transition: height .35s var(--ease-out); }
.masthead.is-dark .mh-in { height: 70px; }
/* Logo dùng đúng màu thương hiệu (chữ đỏ, vệt + khẩu hiệu xanh) — màu lấy từ giá trị mặc định trong sprite #logo */
.mh-logo { flex: none; display: block; width: 148px; transition: width .35s var(--ease-out); }
.mh-logo svg { display: block; width: 100%; height: auto; }
.masthead.is-dark .mh-logo { width: 128px; }
.mh-burger { display: none; place-items: center; width: 44px; height: 44px; margin-left: -10px; border-radius: 12px; color: inherit; }
.mh-burger .ic { width: 24px; height: 24px; }
.mh-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mh-btn {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26);
  transition: background-color .2s, border-color .2s, color .2s;
}
.mh-btn:hover, .mh-btn[aria-expanded="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.mh-btn .ic { width: 20px; height: 20px; }
.mh-btn .qcount { top: -4px; right: -4px; }
.mh-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-left: 4px; padding: 0 22px 0 18px; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: background-color .2s, color .2s;
}
.mh-cta .ic { width: 17px; height: 17px; color: var(--accent); transition: color .2s; }
.mh-cta:hover { background: var(--accent); color: #fff; }
.mh-cta:hover .ic { color: #fff; }
.qcount {
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent); color: #fff; font: 800 11px/1 var(--f-sans); font-style: normal;
  border: 2px solid #fff; transform: scale(0); transition: transform .4s var(--ease-spring);
}
.qcount.has { transform: scale(1); }
.qcount.bump { animation: bump .6s var(--ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 100% { transform: scale(1); } }
/* Icon giỏ báo giá trên header: rung + sáng 2s sau khi thêm sản phẩm */
.mh-btn.is-cart-anim { animation: cartGlow 2s ease-out; }
.mh-btn.is-cart-anim .ic { animation: cartShake 2s var(--ease-out); transform-origin: 50% 15%; }
@keyframes cartShake {
  0% { transform: none; } 6% { transform: rotate(-18deg) scale(1.15); } 12% { transform: rotate(15deg) scale(1.15); }
  18% { transform: rotate(-12deg) scale(1.1); } 24% { transform: rotate(9deg) scale(1.1); } 30% { transform: rotate(-6deg); }
  36% { transform: rotate(3deg); } 42% { transform: none; } 58% { transform: translateY(-3px) scale(1.12); }
  66% { transform: none; } 74% { transform: translateY(-2px) scale(1.06); } 82%, 100% { transform: none; }
}
@keyframes cartGlow {
  0% { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 0 rgba(21, 112, 201, .7); }
  35% { box-shadow: 0 0 0 12px rgba(21, 112, 201, 0); }
  36% { box-shadow: 0 0 0 0 rgba(21, 112, 201, .55); }
  70% { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 12px rgba(21, 112, 201, 0); }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .mh-btn.is-cart-anim .ic { animation: none; } }

/* Search */
.search { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; height: 50px; padding: 0 5px 0 18px; border-radius: 999px; background: var(--well); border: 1.5px solid var(--line-2); transition: border-color .2s, box-shadow .3s, background-color .2s; }
.search:focus-within { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(22, 101, 160, .14); }
.search-ic { color: var(--text-3); width: 19px; height: 19px; }
.search input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; outline: none; font-size: 15px; color: var(--ink); }
.search input::placeholder { color: var(--text-3); }
.search input::-webkit-search-cancel-button { display: none; }
.search-btn { height: 40px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 700; font-size: 14px; transition: background-color .2s; }
.search-btn:hover { background: var(--ink); }
.search-sug {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 80; max-height: 420px; overflow: auto; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3);
  animation: sugIn .28s var(--ease-out);
}
@keyframes sugIn { from { transform: translateY(-8px) scale(.985); } }
.sug-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; text-align: left; transition: background-color .15s; }
.sug-item:hover, .sug-item.is-active { background: var(--blue-50); }
.sug-item img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--mist); flex: none; }
.sug-item b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.sug-item small { font-size: 12.5px; color: var(--text-3); }
.sug-item mark { background: rgba(237, 152, 39, .3); color: inherit; border-radius: 3px; padding: 0 1px; }
.sug-empty { padding: 14px; font-size: 14px; color: var(--text-2); }
.mh-search { position: absolute; left: 0; right: 0; top: 100%; padding: 4px 0 18px; animation: sugIn .3s var(--ease-out); }
.mh-search .search { height: 56px; background: #fff; border-color: #fff; box-shadow: var(--sh-3); }

/* Menu chính (giữa header) */
.nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: static; display: flex; }
.nav-list > li > a, .nav-list > li > button {
  position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .88); white-space: nowrap; transition: color .2s;
}
.nav-list .chev { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.nav-list > li > a::after, .nav-list > li > button::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease-out);
}
.nav-list > li > a:hover, .nav-list > li > a.is-on, .nav-list > li > button:hover, .has-mega.is-open > button { color: #fff; }
.nav-list > li > a:hover::after, .nav-list > li > a.is-on::after, .nav-list > li > button:hover::after, .has-mega.is-open > button::after { transform: scaleX(1); }
.has-mega.is-open .chev { transform: rotate(180deg); }

/* Mega menu */
.mega {
  position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 70;
  display: grid; grid-template-columns: 1fr 300px; gap: 18px; padding: 20px;
  background: #fff; color: var(--text); border-radius: 20px; box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .28s, transform .38s var(--ease-out), visibility .28s;
}
.has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mega-grid a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; transition: background-color .2s, transform .3s var(--ease-out); }
.mega-grid a:hover { background: var(--blue-50); transform: translateX(3px); }
.mega-grid img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--mist); flex: none; }
.mega-grid b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.mega-grid small { font-size: 13px; color: var(--text-3); }
.mega-promo {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px;
  background: var(--deep); color: #e3edf7;
}
.mega-promo::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 140px; height: 140px; border-left: 16px solid rgba(237, 152, 39, .8); border-bottom: 16px solid rgba(237, 152, 39, .8); transform: rotate(-90deg); }
.mega-promo-k { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.mega-promo b { font-size: 19px; line-height: 1.25; color: #fff; }
.mega-promo span { font-size: 13.5px; opacity: .85; }
.mega-promo-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-weight: 700; opacity: 1 !important; color: #fff; }
.mega-promo:hover .mega-promo-go .ic { transform: translateX(4px); }
.mega-promo-go .ic { transition: transform .3s var(--ease-out); }

/* Mobile drawer nav — panel trái; màu tối ghi đè ở khối "Giao diện tối" bên dưới */
.ndrawer { position: fixed; inset: 0; z-index: 9000; }
.ndrawer-scrim { position: absolute; inset: 0; background: rgba(6, 19, 33, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.ndrawer-panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 88vw); display: flex; flex-direction: column;
  background: var(--page); box-shadow: var(--sh-3); transform: translateX(-102%); transition: transform .45s var(--ease-out);
}
.ndrawer.is-open .ndrawer-scrim { opacity: 1; }
.ndrawer.is-open .ndrawer-panel { transform: none; }
.ndrawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 20px; }
.nd-logo { width: 132px; height: auto; }
.nd-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--well); color: var(--ink); transition: background-color .25s; }
.nd-close .ic { width: 18px; height: 18px; }
.ndrawer-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
.nd-label { margin: 16px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.ndrawer-list a { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: color .2s; }
.ndrawer-list li:last-child a { border-bottom: 0; }
.ndrawer-list a::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .35; }
.ndrawer-list a:hover, .ndrawer-list a:focus-visible { color: var(--blue); }
.nd-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--mist); color: var(--blue); }
.nd-ic .ic { width: 18px; height: 18px; }
.nd-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nd-t b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.nd-t small { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.ndrawer.is-open .ndrawer-list li { animation: drawerItem .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms + .12s); }
@keyframes drawerItem { from { opacity: 0; transform: translateX(-14px); } }

/* Giao diện tối (khách chọn mẫu 3): panel trái, lan ra từ nút menu */
.ndrawer-panel { background: var(--night); color: #fff; transform: none; clip-path: circle(0 at 34px 32px); transition: clip-path .6s var(--ease-out); }
.ndrawer.is-open .ndrawer-panel { clip-path: circle(150% at 34px 32px); }
.nd-close { background: rgba(255, 255, 255, .1); color: #fff; }
.ndrawer-body { counter-reset: nd; }
.nd-label { color: rgba(255, 255, 255, .42); }
.ndrawer-list a { color: #fff; border-color: rgba(255, 255, 255, .09); }
.ndrawer-list a:hover { color: var(--blue-light); }
.nd-ic { display: none; }
.nd-prod a::before { counter-increment: nd; content: counter(nd, decimal-leading-zero); flex: none; width: 24px; font-size: 12px; font-weight: 700; color: var(--orange); }
.nd-prod .nd-t b { font-size: 15.5px; font-weight: 700; }
.nd-t small { color: rgba(255, 255, 255, .5); }
.ndrawer.is-open .ndrawer-list li { animation-name: drawerUp; animation-delay: calc(var(--i, 0) * 40ms + .2s); }
@keyframes drawerUp { from { opacity: 0; transform: translateY(12px); } }

/* =====================================================================
   BANNER ẢNH — tràn 100% chiều ngang, cao vừa 1 màn hình
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 440px; /* vừa khít 1 màn hình */
  padding-top: var(--mh, 84px); background: var(--night); color: #fff;
}
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.92); }
.hero-vid { position: absolute; inset: 0; } /* video banner phủ lên ảnh (ảnh = ảnh chờ khi video đang tải) */
.hero-vid[hidden] { display: none; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 19, 33, .7) 0%, rgba(6, 19, 33, 0) 30%),
    linear-gradient(90deg, rgba(7, 22, 38, .94) 0%, rgba(7, 22, 38, .8) 36%, rgba(7, 22, 38, .36) 66%, rgba(7, 22, 38, .2) 100%);
}
.hero-in { flex: 1; min-height: 0; display: flex; align-items: center; padding-block: clamp(16px, 5vh, 72px); }
.hero-txt { position: relative; max-width: 660px; }
.hero-kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-light);
}
.hero-kicker::before { content: ""; width: 36px; height: 2px; border-radius: 2px; background: var(--orange); }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.hero-h1 { font-size: clamp(28px, min(4.1vw, 6.6vh), 58px); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.hero-h1 .ln { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.05em; }
.hero-h1 .ln > span { display: inline-block; position: relative; }
.hero-h1 .ln-accent > span { color: var(--orange); }
.hero-h1 .ln-accent > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .085em; border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), rgba(237, 152, 39, .2)); transform-origin: 0 50%;
}
.hero-sub { margin-top: clamp(10px, 2vh, 18px); max-width: 540px; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(16px, 3.1vh, 28px); }

/* Banner — biên đạo khi tải trang (chỉ khi JS sẵn sàng) */
.anim .hero-img { transform: scale(1.12); transition: transform 2.6s var(--ease-out) calc(var(--intro) - .1s); }
.anim .hero-h1 .ln > span { transform: translateY(108%); transition: transform 1.05s var(--ease-out) calc(var(--intro) + var(--d, 0s)); }
.anim .hero-h1 .ln-accent > span::after { transform: scaleX(0); transition: transform 1s var(--ease-out) calc(var(--intro) + .85s); }
.anim .h-in { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease-out) calc(var(--intro) + var(--d, 0s)), transform .9s var(--ease-out) calc(var(--intro) + var(--d, 0s)); }
.anim.is-loaded .hero-img { transform: none; }
.anim.is-loaded .hero-h1 .ln > span { transform: none; }
.anim.is-loaded .hero-h1 .ln-accent > span::after { transform: scaleX(1); }
.anim.is-loaded .h-in { opacity: 1; transform: none; }

/* =====================================================================
   TICKER
   ===================================================================== */
.ticker {
  position: relative; z-index: 1; overflow: hidden; color: #fff;
  background: rgba(6, 19, 33, .42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ticker-track { display: flex; width: max-content; animation: ticker 68s linear infinite; }
.ticker-list { display: flex; flex: none; }
.ticker-list li {
  display: flex; align-items: center; gap: 14px; padding: 13px 0 13px 26px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .88); white-space: nowrap;
}
.ticker-list li::before { content: ""; width: 10px; height: 10px; border-left: 2.5px solid var(--orange); border-bottom: 2.5px solid var(--orange); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* =====================================================================
   SECTIONS & HEADINGS
   ===================================================================== */
.sec { position: relative; padding: clamp(60px, 7vw, 100px) 0; }
.sec > .container { position: relative; z-index: 1; }
/* Khối màu (năng lực · video · báo giá): hộp rộng 86% bo góc, nằm trên nền trắng */
.sec-cap, .sec-dark, .sec-quote { width: var(--wrap); margin-inline: auto; border-radius: 28px; overflow: hidden; isolation: isolate; }
.sec-cap > .container, .sec-dark > .container, .sec-quote > .container { width: auto; padding-inline: clamp(28px, 4.4vw, 76px); }
.sec-quote { margin-bottom: clamp(56px, 6vw, 88px); }
.sec-head { margin-bottom: clamp(30px, 4vw, 46px); text-align: center; }
.sec-title { display: flex; align-items: center; gap: 20px; }
.sec-line { flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); transform-origin: 100% 50%; }
.sec-line:last-child { background: linear-gradient(270deg, transparent, var(--line-2)); transform-origin: 0 50%; }
.sec-title h2 {
  display: inline-flex; align-items: center; gap: 11px; max-width: 80%;
  font-size: clamp(19px, 2.05vw, 26px); font-weight: 800; line-height: 1.25; letter-spacing: .015em; text-transform: uppercase; color: var(--ink);
}
.sec-title h2 .ic { width: 1.05em; height: 1.05em; color: var(--blue); stroke-width: 2; }
.sec-sub { max-width: 720px; margin: 12px auto 0; font-size: 15.5px; color: var(--text-2); }
.sec-sub b { color: var(--ink); }
.sec-head-light .sec-title h2 { color: #fff; }
.sec-head-light .sec-title h2 .ic { color: var(--blue-light); }
.sec-head-light .sec-line { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25)); }
.sec-head-light .sec-line:last-child { background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .25)); }
.sec-head-light .sec-sub { color: rgba(255, 255, 255, .68); }

/* Tagline + USP */
.sec-intro { padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(48px, 5vw, 72px); }
.tagline { max-width: 860px; margin: 0 auto; text-align: center; }
.tagline h2 { font-size: clamp(27px, 3.5vw, 46px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.tagline em { position: relative; font-style: normal; color: var(--blue); white-space: nowrap; }
.tagline em::after {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -.12em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 50 2, 120 2, 198 7' fill='none' stroke='%23e8962a' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out) .5s;
}
.tagline.is-in em::after, html:not(.anim) .tagline em::after { clip-path: inset(0 0 0 0); }
.tagline p { margin-top: 18px; font-size: 16.5px; color: var(--text-2); }
.tagline strong { color: var(--ink); }
.usp { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(36px, 4.5vw, 54px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.usp li { display: flex; align-items: center; gap: 14px; padding: 22px 22px; }
.usp li + li { border-left: 1px solid var(--line); }
.usp-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--blue-50); color: var(--blue); border: 1px solid var(--blue-100); transition: background-color .35s, color .35s, transform .5s var(--ease-spring); }
.usp-ic .ic { width: 24px; height: 24px; }
.usp li:hover .usp-ic { background: var(--blue); color: #fff; transform: rotate(-8deg) scale(1.06); }
.usp li > span:last-child { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.usp b { font-size: 15px; color: var(--ink); font-weight: 700; margin-bottom: 2px; }

/* =====================================================================
   FEATURED (3 cột ảnh lớn — kiểu hoabanfood)
   ===================================================================== */
/* 3 thẻ / hàng, căn trái */
.feat { --cols: 3; --gap: 24px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--gap); }
.feat > .fcard { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
.fcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .3s;
}
.fcard-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--well); }
.fcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease-out); }
.fcard-media.is-cut img { object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.fcard-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 22px 24px; text-align: center; }
.fcard-title { font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.fcard-desc { font-size: 13.5px; color: var(--text-2); }
.fcard-price { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.fcard-price strong { color: var(--accent); font-weight: 800; }
.fcard-go {
  position: absolute; right: 16px; top: 0; margin-top: calc(75% - 23px);
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: var(--sh-2); transition: background-color .3s, color .3s, transform .5s var(--ease-out);
}
.fcard-go .ic { width: 20px; height: 20px; }
@media (hover: hover) {
  .fcard:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--line-2); }
  .fcard:hover .fcard-media img { transform: scale(1.07); }
  .fcard:hover .fcard-go { background: var(--accent); color: #fff; transform: rotate(-45deg); }
}
.notice {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 30px; padding: 15px 20px;
  background: var(--blue-50); border: 1px solid var(--blue-100); border-left: 4px solid var(--blue); border-radius: 12px;
  font-size: 14.5px; color: var(--text-2);
}
.notice .ic { width: 22px; height: 22px; color: var(--blue); margin-top: 1px; }
.notice b { color: var(--ink); }
.notice a { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* =====================================================================
   PROMO SLIDER
   ===================================================================== */
.sec-promo { padding-top: clamp(44px, 5vw, 72px); padding-bottom: 0; }
.promo { position: relative; overflow: hidden; border-radius: 24px; box-shadow: var(--sh-2); isolation: isolate; }
.promo-track { display: grid; }
.promo-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1.05fr 1fr; min-height: 420px;
  opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s;
}
.promo-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.promo-slide[data-theme="blue"] { background: var(--blue); color: #fff; }
.promo-slide[data-theme="night"] { background: var(--night); color: #e3edf7; }
.promo-slide[data-theme="mist"] { background: var(--mist); color: var(--ink); }
.promo-txt { position: relative; z-index: 1; align-self: center; padding: clamp(34px, 5vw, 64px) clamp(28px, 5vw, 64px) clamp(84px, 8vw, 96px); }
.promo-k { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.promo-slide[data-theme="blue"] .promo-k { color: #cfe6f8; }
.promo-slide[data-theme="mist"] .promo-k { color: var(--blue); }
.promo-h { margin: 12px 0 14px; font-size: clamp(25px, 3vw, 40px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.promo-p { max-width: 470px; margin-bottom: 26px; font-size: 16px; opacity: .86; }
.promo-media { position: relative; overflow: hidden; min-height: 260px; }
.promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-slide.is-active .promo-media img { animation: kenburns 7.5s ease-out both; }
@keyframes kenburns { from { transform: scale(1.14) translate(1.5%, 1%); } to { transform: scale(1.02); } }
.promo-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 30%); pointer-events: none; }
.promo-media-cut { background: var(--well); }
.promo-media-cut img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.promo-media-cut::after, .promo-fan::after { display: none; }
.promo-fan { display: grid; place-items: center; }
.promo-fan img { position: absolute; inset: auto; width: 34%; height: auto; border-radius: 6px; box-shadow: 0 24px 40px -18px rgba(8, 28, 50, .5); transform-origin: 50% 120%; transition: transform 1.1s var(--ease-out); }
.promo-fan img:nth-child(1) { transform: rotate(0) translateX(0); }
.promo-fan img:nth-child(2) { transform: rotate(0); }
.promo-fan img:nth-child(3) { transform: rotate(0); }
.promo-slide.is-active .promo-fan img { animation: none; }
.promo-slide.is-active .promo-fan img:nth-child(1) { transform: rotate(-13deg) translateX(-34%); }
.promo-slide.is-active .promo-fan img:nth-child(3) { transform: rotate(12deg) translateX(34%); }
.promo-slide.is-active .promo-fan img:nth-child(2) { transform: translateY(-4%); }
.promo-slide.is-active .promo-k, .promo-slide.is-active .promo-h, .promo-slide.is-active .promo-p, .promo-slide.is-active .btn {
  animation: promoIn .9s var(--ease-out) both;
}
.promo-slide.is-active .promo-h { animation-delay: .08s; }
.promo-slide.is-active .promo-p { animation-delay: .16s; }
.promo-slide.is-active .btn { animation-delay: .24s; }
@keyframes promoIn { from { opacity: 0; transform: translateY(22px); } }
.promo-nav { position: absolute; z-index: 3; left: clamp(28px, 5vw, 64px); bottom: 28px; display: flex; align-items: center; gap: 14px; color: #fff; }
.promo[data-theme="mist"] .promo-nav { color: var(--ink); }
.promo-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; transition: opacity .2s, background-color .2s, color .2s; }
.promo-arrow:hover { opacity: 1; background: #fff; color: var(--ink); border-color: #fff; }
.promo-arrow .ic { width: 18px; height: 18px; }
.promo-dots { display: flex; gap: 7px; }
.promo-dots button { width: 9px; height: 9px; border-radius: 999px; background: currentColor; opacity: .35; transition: width .45s var(--ease-out), opacity .3s; }
.promo-dots button[aria-current="true"] { width: 30px; opacity: 1; }
.promo-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.promo-bar i { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.promo-bar i.run { animation: promoBar var(--dur, 6.5s) linear forwards; }
.promo.is-paused .promo-bar i.run { animation-play-state: paused; }
@keyframes promoBar { to { transform: scaleX(1); } }

/* =====================================================================
   PRODUCT GRID + CARD
   ===================================================================== */
.grid-p { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pcard {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.pcard-media {
  position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r) var(--r) 0 0;
  background: var(--well); cursor: zoom-in;
}
.pcard-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pcard-media.is-cut img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.pcard-media .badge { top: 12px; left: 12px; font-size: 10.5px; padding: 4px 9px 4px 8px; }
.pcard-body { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 3px; padding: 16px 16px 18px; text-align: center; }
.pcard-t { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-t button { text-align: center; }
.pcard-t button:hover { color: var(--accent); }
.pcard-spec { font-size: 13px; color: var(--text-3); }
.pcard-price { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.pcard-price b { font-size: 16px; font-weight: 800; color: var(--accent); }
.pcard-add {
  position: absolute; left: 50%; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); transform: translate(-50%, 160%); transition: transform .45s var(--ease-out), background-color .2s;
}
.pcard-add .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.pcard-add:hover { background: var(--accent); }
.pcard-add.is-added { background: var(--ok); }
.pcard-add i { font-style: normal; }
.pa-off { display: none; }
@media (hover: hover) {
  .pcard-add.is-added:hover { background: var(--ink); }
  .pcard-add.is-added:hover .pa-on { display: none; }
  .pcard-add.is-added:hover .pa-off { display: inline; }
}
.pcard-qv {
  position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: var(--sh-2); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--ease-spring), background-color .2s;
}
.pcard-qv:hover { background: var(--ink); color: #fff; }
.pcard-qv .ic { width: 18px; height: 18px; }
/* góc nẹp nhỏ khi hover */
@media (hover: hover) {
  .pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--line-2); }
  .pcard:hover .pcard-media img { transform: scale(1.06); }
  .pcard:hover .pcard-add, .pcard:focus-within .pcard-add { transform: translate(-50%, 0); }
  .pcard:hover .pcard-qv, .pcard:focus-within .pcard-qv { opacity: 1; transform: none; }
  .pcard:hover .badge { opacity: 0; }
}
.pcard .badge { transition: opacity .25s; }
@media (hover: none) {
  .pcard-add { left: auto; right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0; justify-content: center; transform: none; background: var(--ink); }
  .pcard-add span { display: none; }
  .pcard-qv { display: none; }
}
.pcard.is-flash { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); } 20% { box-shadow: 0 0 0 6px rgba(200, 16, 46, .35); } }

/* =====================================================================
   SPEC EXPLORER
   ===================================================================== */
.spec { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-2); }
.spec-visual {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px;
  background:
    linear-gradient(rgba(22, 101, 160, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(22, 101, 160, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    #fafcfe;
  border-right: 1px solid var(--line);
}
#specSvg { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.spec-layers path { fill: none; stroke: rgba(92, 58, 30, .3); stroke-width: .9; }
.spec-dim path { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.spec-dim text { font: 700 15px var(--f-num); fill: var(--ink); letter-spacing: .02em; }
.spec-dim #stT { fill: var(--accent); }
.spec-dim #sdT { stroke: var(--accent); }
.spec-cap { font-size: 12.5px; color: var(--text-3); }
.spec-ghost { transition: opacity .4s; }
.spec-ghost.is-off { opacity: 0; }
.spec-panel { padding: clamp(26px, 4vw, 46px); }
.spec-chips { display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 6px; }
.spec-chips button {
  height: 44px; padding: 0 4px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff;
  font: 700 18px/1 var(--f-num); letter-spacing: .02em; color: var(--ink);
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-spring);
}
.spec-chips button:hover { border-color: var(--ink); transform: translateY(-2px); }
.spec-chips button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.spec-k { margin-top: 26px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
@keyframes specSwap { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.spec-rows { margin-top: 8px; }
.spec-rows div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); }
.spec-rows dt { font-size: 13.5px; color: var(--text-3); }
.spec-rows dd { font-size: 15px; font-weight: 600; color: var(--ink); }
.spec-rows dd.swap { animation: specSwap .5s var(--ease-out); }
.spec-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.spec-actions .btn { min-height: 40px; padding: 0 16px; gap: 7px; font-size: 13.5px; }
.spec-actions .btn .ic { width: 16px; height: 16px; }

/* =====================================================================
   CAPABILITY BAND (nền xanh đậm)
   ===================================================================== */
.sec-cap { background: var(--deep); color: #d9e6f2; overflow: hidden; }
.sec-cap::after { content: ""; position: absolute; right: 28px; top: 52px; width: 140px; height: 140px; border-top: 12px solid rgba(255, 255, 255, .07); border-right: 12px solid rgba(255, 255, 255, .07); pointer-events: none; }
.flute { position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--flute) repeat-x 0 0 / 28px 22px; opacity: .2; animation: flute 30s linear infinite; }
@keyframes flute { to { background-position: -560px 0; } }
.cap { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cap-intro .kicker { color: var(--orange); }
.cap-h { text-wrap: balance; margin: 12px 0 18px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.cap-intro p { color: rgba(243, 230, 212, .74); font-size: 16px; }
.cap-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; overflow: hidden; }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 26px 28px; background: #0e426e; transition: background-color .4s; }
.stat:hover { background: #134c7b; }
.stat-n { font: 700 clamp(52px, 5.4vw, 72px)/.95 var(--f-num); color: #fff; letter-spacing: -.01em; }
.stat-n i { font-style: normal; font-size: .55em; margin-left: 2px; }
.stat-l { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; }
.stat-l small { font-size: 12.5px; font-weight: 500; color: rgba(243, 230, 212, .6); margin-top: 3px; }
.inds-k { margin: clamp(44px, 5vw, 64px) 0 18px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); text-align: center; }
.inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.inds li { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); transition: transform .5s var(--ease-out), background-color .3s, border-color .3s; }
.inds li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .32); }
.inds .ic { width: 30px; height: 30px; color: var(--blue-light); stroke-width: 1.5; margin-bottom: 6px; }
.inds b { font-size: 16px; color: #fff; }
.inds span { font-size: 13.5px; color: rgba(243, 230, 212, .66); }

/* =====================================================================
   SPLIT (Sản xuất thùng carton)
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.split-media { position: relative; aspect-ratio: 1 / .86; border-radius: 24px; background: var(--well); border: 1px solid var(--line); }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
@keyframes floaty { 50% { transform: rotate(-4deg) translateY(-8px); } }
.split-txt h3 { margin: 10px 0 20px; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.18; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.checks { display: grid; gap: 11px; }
.checks li { display: flex; gap: 12px; font-size: 15.5px; color: var(--text); }
.checks .ic { width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--blue-50); color: var(--blue); stroke-width: 2.6; }
.split-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* =====================================================================
   RoHS
   ===================================================================== */
.sec-rohs { overflow: hidden; } /* tem PASS phóng to trước khi hiện không làm tràn ngang trang */
.rohs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cert { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.cert-btn {
  position: relative; display: block; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1); cursor: zoom-in;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.cert-btn img { width: 100%; aspect-ratio: .72; object-fit: cover; object-position: top; border-radius: 6px; }
.cert-zoom { position: absolute; inset: 12px; display: grid; place-items: center; border-radius: 6px; background: rgba(11, 28, 44, .5); color: #fff; opacity: 0; transition: opacity .3s; }
.cert-zoom .ic { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); box-sizing: content-box; }
@media (hover: hover) {
  .cert-btn:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--sh-3); }
  .cert-btn:hover .cert-zoom { opacity: 1; }
}
.cert figcaption { display: flex; flex-direction: column; gap: 2px; }
.cert figcaption b { font-size: 15px; color: var(--ink); }
.cert figcaption small { font-size: 12.5px; color: var(--text-3); }

/* =====================================================================
   VIDEO XƯỞNG (nền tối)
   ===================================================================== */
.sec-dark { background: var(--night); color: #e3edf7; }
.vgrid { display: grid; grid-template-columns: 1.9fr 1fr 1fr; grid-template-rows: repeat(2, minmax(200px, 1fr)); gap: 18px; min-height: 460px; }
.vcard { position: relative; display: block; overflow: hidden; border-radius: 18px; background: #000; border: 1px solid rgba(255, 255, 255, .08); text-align: left; color: #fff; isolation: isolate; }
.vcard-lg { grid-row: 1 / 3; }
.vcard:nth-child(2) { grid-column: 2 / 4; }
.vcard video, .vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .4s; }
/* Ảnh bìa YouTube của video quay dọc: nền là chính ảnh đó làm mờ, giữa là dải 9:16 cắt đúng phần có hình */
.vcard img.vt-bg { transform: scale(3.2); filter: blur(10px) brightness(.6) saturate(1.1); } /* phóng to để chỉ còn phần giữa có hình, bỏ dải đen */
.vcard img.vt-fg { left: 50%; right: auto; width: auto; aspect-ratio: 9 / 16; transform: translateX(-50%); box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
.vcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 10, 18, .85) 0%, rgba(5, 10, 18, 0) 55%); pointer-events: none; }
.vcard-play {
  position: absolute; z-index: 2; left: 50%; top: 46%; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1.5px solid rgba(255, 255, 255, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%); transition: transform .5s var(--ease-spring), background-color .3s;
}
.vcard-play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); animation: ring 2.4s var(--ease-out) infinite; }
.vcard-play .ic { width: 26px; height: 26px; margin-left: 4px; }
.vcard:not(.vcard-lg) .vcard-play { width: 56px; height: 56px; }
.vcard:not(.vcard-lg) .vcard-play .ic { width: 20px; height: 20px; }
.vcard-meta { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.vcard-meta b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.vcard-lg .vcard-meta b { font-size: clamp(18px, 1.8vw, 24px); }
.vcard-meta small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .72); }
.vcard-meta .ic { width: 14px; height: 14px; }
@media (hover: hover) {
  .vcard:hover video, .vcard:hover img { transform: scale(1.05); }
  .vcard:hover img.vt-fg { transform: translateX(-50%) scale(1.05); }
  .vcard:hover img.vt-bg { transform: scale(3.3); }
  .vcard:hover .vcard-play { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); border-color: var(--accent); }
}
.vcard.is-previewing .vcard-play { transform: translate(-50%, -50%) scale(.8); opacity: .85; }

/* =====================================================================
   BLOG
   ===================================================================== */
.blog { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.post { display: flex; flex-direction: column; gap: 6px; }
.post-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 10px; border-radius: 16px; background: var(--mist); border: 1px solid var(--line); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.post-k { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.post-t { font-size: 16.5px; font-weight: 700; line-height: 1.4; color: var(--ink); transition: color .2s; }
.post-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--accent); }
.post-go .ic { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
@media (hover: hover) {
  .post:hover .post-media img { transform: scale(1.06); }
  .post:hover .post-t { color: var(--blue); }
  .post:hover .post-go .ic { transform: translateX(5px); }
}

/* =====================================================================
   BÁO GIÁ
   ===================================================================== */
.sec-quote { background: var(--blue); color: #eaf3fb; overflow: hidden; padding-block: clamp(36px, 4.4vw, 60px); }
.quote { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.quote-intro .kicker { color: #cfe6f8; }
.quote-intro { container-type: inline-size; }
/* Tiêu đề luôn 2 dòng (ngắt bằng <br>), dòng dài nhất rộng ~80% cột trái: cỡ chữ tính theo bề ngang cột (cqi) */
.quote-h { max-width: 80%; margin: 10px 0 12px; font-size: clamp(19px, 7.2cqi, 44px); white-space: nowrap; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.quote-sub { max-width: 440px; font-size: 15px; color: rgba(234, 243, 251, .78); }
.quote-lines { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.quote-lines a { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); transition: background-color .25s, transform .4s var(--ease-out); }
.quote-lines a:hover { background: rgba(255, 255, 255, .13); transform: translateY(-2px); }
.quote-lines .ic { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--accent); color: #fff; box-sizing: border-box; }
.quote-lines span { display: flex; flex-direction: column; line-height: 1.25; }
.quote-lines small { font-size: 12px; color: rgba(246, 234, 217, .65); }
.quote-lines b { font-size: 19px; color: #fff; }
.quote-card { position: relative; padding: clamp(24px, 3.4vw, 38px); border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.lead h3, .lead-done h3 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--well);
  font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.field textarea { resize: vertical; min-height: 92px; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365584b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(22, 101, 160, .14); }
.field.is-err input { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(200, 16, 46, .12); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.lead-basket { margin: -2px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--blue-50); border: 1px dashed var(--blue-light); font-size: 13.5px; color: var(--blue); }
.lead-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.lead-done { text-align: center; padding: 18px 4px; animation: promoIn .7s var(--ease-out); }
.done-ic { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; background: #e7f5ec; color: var(--ok); }
.done-ic .ic { width: 36px; height: 36px; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s var(--ease-out) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.lead-done p { color: var(--text-2); margin-bottom: 20px; }
.done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.ft { position: relative; background: var(--night); color: rgba(255, 255, 255, .74); font-size: 14.5px; }
.flute-ft { opacity: .14; }
.ft-grid { display: grid; grid-template-columns: 1.35fr .9fr 1.1fr; gap: clamp(32px, 4vw, 56px); padding-top: 76px; padding-bottom: 48px; }
.ft-logo { width: 190px; height: auto; margin-bottom: 18px; }
.ft-about h3 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: .02em; }
.ft-mst { margin: 4px 0 16px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.ft-addr { display: grid; gap: 10px; }
.ft-addr li { display: flex; gap: 10px; line-height: 1.55; }
.ft-addr .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--blue-light); }
.ft-addr b { color: #fff; font-weight: 600; }
.ft-addr a:hover { color: #fff; }
.ft-calls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ft h4 { position: relative; margin-bottom: 16px; padding-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ft h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--orange); }
.ft-links { display: grid; gap: 9px; margin-bottom: 28px; }
.ft-links a { display: inline-flex; transition: color .2s, transform .3s var(--ease-out); }
.ft-links a:hover { color: #fff; transform: translateX(4px); }
.map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #15304a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239bc7ea' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.4a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.6' r='2.6'/%3E%3C/svg%3E") no-repeat center / 36px; border: 1px solid rgba(255, 255, 255, .1); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85) contrast(1.02); }
.map-open { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; font-weight: 700; box-shadow: var(--sh-2); }
.map-open .ic { width: 14px; height: 14px; color: var(--accent); }
.ft-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.ft-social span { font-size: 13px; margin-right: 4px; }
.ft-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .25s, transform .4s var(--ease-spring); }
.ft-social a:hover { background: var(--accent); transform: translateY(-3px); }
.ft-social .ic { width: 19px; height: 19px; }
.ft-bot { background: #0a1828; font-size: 13px; color: rgba(255, 255, 255, .55); }
.ft-bot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-top: 16px; padding-bottom: 16px; }

/* =====================================================================
   FLOATING BUTTONS
   ===================================================================== */
/* Nút liên hệ nổi — kiểu sovijobs: cột tròn 41px viền trắng, rê chuột hiện nhãn */
.fab { position: fixed; right: 18px; bottom: 22px; z-index: 80; display: grid; justify-items: end; gap: 9px; }
.fab-btn { /* 40px ≈ 45px × 0,9 (giảm 10% theo yêu cầu 11/10/2026) */
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .9); color: #fff; box-shadow: 0 9px 24px rgba(6, 31, 70, .2);
  transition: transform .25s, box-shadow .25s, opacity .35s;
}
.fab-btn:hover { transform: translateX(-4px) scale(1.04); box-shadow: 0 14px 34px rgba(6, 31, 70, .28); }
.fab-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.fab-btn .ic { width: 19px; height: 19px; }
.fab-ic { display: contents; }
.fab-lbl { display: none; }
/* biểu tượng theo thiết kế gốc của thương hiệu (11/10/2026): Zalo, Facebook, YouTube, TikTok, Gmail */
.fab-zalo { background: #fff; border-color: var(--line); animation: zaloBeat 2s ease-in-out infinite; } /* nảy nhẹ, lặp mỗi 2s */
.fab-zalo .ib-zalo { display: block; width: 27px; height: 27px; } /* logo Zalo gốc (img/brand/zalo.webp) */
.fab-zalo::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #0068ff; pointer-events: none; animation: dockPing 2s var(--ease-out) infinite; opacity: 0; }
.fab-fb { background: #1877f2; border-color: #1877f2; overflow: hidden; }
.fab-yt, .fab-mail { background: #fff; border-color: var(--line); } /* nền trắng: viền mảnh để tách khỏi nền trang */
.fab-tt { background: #000; border-color: #000; }
.fab-top { background: var(--deep); }
.fab-btn .ic-brand { fill: none; stroke: none; }
.fab-btn .ib-facebook { width: 100%; height: 100%; transform: translateY(2px); }
.fab-btn .ib-youtube { width: 22px; height: 22px; }
.fab-btn .ib-tiktok { width: 20px; height: 20px; }
.fab-btn .ib-gmail { width: 22px; height: 22px; }
.fab-call { background: var(--accent); }
.fab-call::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(21, 112, 201, .55); pointer-events: none; animation: dockPulse 2s ease-out 2; opacity: 0; }
.fab-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; padding: 7px 10px; border-radius: 6px; background: var(--deep); color: #fff;
  font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity .25s, transform .25s;
}
.fab-btn:hover .fab-tip, .fab-btn:focus-visible .fab-tip { opacity: 1; transform: translate(0, -50%); }
@keyframes dockPulse { 0% { opacity: 1; transform: scale(1); } 70%, 100% { transform: scale(1.25); opacity: 0; } }
@keyframes dockPing { 0%, 28% { opacity: 0; transform: scale(1); } 38% { opacity: .8; } 72%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes zaloBeat { 0%, 42%, 100% { transform: scale(1) rotate(0); } 52% { transform: scale(1.14) rotate(-4deg); } 62% { transform: scale(1.06) rotate(4deg); } 72% { transform: scale(1.12); } 84% { transform: scale(1); } }
.fab-top { opacity: 0; transform: translateY(14px) scale(.8); pointer-events: none; }
.fab-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-away .fab-btn:not(.fab-top) { opacity: 0; transform: translateY(16px) scale(.85); pointer-events: none; }
.fab.is-away .fab-zalo, .fab.is-away .fab-zalo::before { animation: none; }
@keyframes wiggle { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-16deg); } 80% { transform: rotate(14deg); } 84% { transform: rotate(-10deg); } 88% { transform: rotate(6deg); } }

/* =====================================================================
   QUOTE DRAWER
   ===================================================================== */
.qdrawer { position: fixed; inset: 0; z-index: 9100; }
.qdrawer-scrim { position: absolute; inset: 0; background: rgba(6, 19, 33, .48); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.qdrawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 100%); display: flex; flex-direction: column; background: var(--page); box-shadow: var(--sh-3); transform: translateX(104%); transition: transform .5s var(--ease-out); }
.qdrawer.is-open .qdrawer-scrim { opacity: 1; }
.qdrawer.is-open .qdrawer-panel { transform: none; }
.qd-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 18px 16px 24px; border-bottom: 1px solid var(--line); }
.qd-head h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--ink); }
.qd-n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 13px/1 var(--f-sans); font-style: normal; }
.qd-body { flex: 1; overflow: auto; padding: 16px 18px; }
.qd-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 18px; text-align: center; color: var(--text-2); }
.qd-empty-ic { display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 50%; background: var(--blue-50); color: var(--blue); }
.qd-empty-ic .ic { width: 34px; height: 34px; }
.qd-empty b { font-size: 17px; color: var(--ink); }
.qd-empty p { font-size: 14px; margin-bottom: 10px; }
.qd-list { display: grid; gap: 10px; }
.qd-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); animation: qdIn .45s var(--ease-out); }
.qd-item.is-out { animation: qdOut .35s var(--ease-out) forwards; }
@keyframes qdIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes qdOut { to { opacity: 0; transform: translateX(30px); height: 0; } }
.qd-item img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--mist); }
.qd-item b { display: block; font-size: 14px; line-height: 1.35; color: var(--ink); }
.qd-item small { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.qd-item input { width: 100%; height: 34px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--line-2); background: var(--well); font-size: 13.5px; outline: none; }
.qd-item input:focus { border-color: var(--blue); background: #fff; }
.qd-del { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-3); transition: background-color .2s, color .2s; }
.qd-del:hover { background: #fdecef; color: var(--accent); }
.qd-del .ic { width: 18px; height: 18px; }
.qd-foot { padding: 16px 18px 20px; border-top: 1px solid var(--line); background: #fff; text-align: center; }
.qd-form-t { margin-bottom: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.qd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.qd-fields input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: 11px; border: 1.5px solid var(--line-2); background: var(--well); font-size: 14.5px; outline: none; transition: border-color .2s, background .2s; }
.qd-fields input:focus { border-color: var(--blue); background: #fff; }
.qd-fields input.is-err { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(200, 16, 46, .12); animation: shake .4s; }
.qd-form .btn[disabled], .lead .btn[disabled] { opacity: .65; pointer-events: none; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.qd-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 52px 22px; text-align: center; color: var(--text-2); animation: promoIn .7s var(--ease-out); }
.qd-done .done-ic { margin-bottom: 6px; }
.qd-done b { font-size: 19px; color: var(--ink); }
.qd-done p { font-size: 14.5px; margin-bottom: 12px; }
.qd-tip { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; font-size: 12.5px; color: var(--text-2); text-align: left; }
.qd-tip .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--orange); }

/* =====================================================================
   MODALS
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 20px; }
.modal-scrim { position: absolute; inset: 0; background: rgba(5, 15, 27, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s; }
.modal.is-open .modal-scrim { opacity: 1; }
.modal-x { position: absolute; right: 10px; top: 10px; z-index: 3; background: rgba(255, 255, 255, .92); }
.modal-box, .lb-fig, .vm-fig { position: relative; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .35s, transform .5s var(--ease-out); }
.modal.is-open .modal-box, .modal.is-open .lb-fig, .modal.is-open .vm-fig { opacity: 1; transform: none; }
.qv-box { display: grid; grid-template-columns: 1fr 1fr; width: min(940px, 100%); max-height: calc(100vh - 40px); overflow: auto; border-radius: 24px; background: #fff; box-shadow: var(--sh-3); }
.qv-media { position: relative; display: grid; place-items: center; min-height: 320px; background: var(--well); }
.qv-media img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.qv-media.is-cut img { object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.qv-info { padding: clamp(24px, 3.4vw, 40px); }
.qv-info h3 { margin: 8px 0 8px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; line-height: 1.2; color: var(--ink); }
.qv-price { font-size: 16px; font-weight: 600; color: var(--text-2); }
.qv-price b { font-size: 22px; color: var(--accent); }
.qv-desc { margin: 16px 0; font-size: 15px; color: var(--text-2); }
.qv-rows div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line-2); font-size: 14px; }
.qv-rows dt { color: var(--text-3); }
.qv-rows dd { font-weight: 600; color: var(--ink); }
.qv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.lb-fig { max-width: min(760px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-fig img { max-height: calc(100vh - 110px); width: auto; border-radius: 10px; background: #fff; box-shadow: var(--sh-3); }
.lb-fig figcaption, .vm-fig figcaption { color: #fff; font-weight: 600; font-size: 15px; text-align: center; }
.lb .modal-x, .vm .modal-x { right: -8px; top: -8px; }
.vm-fig { width: min(1040px, 100%); display: flex; flex-direction: column; gap: 12px; }
.vm-fig video, .vm-yt { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: var(--sh-3); }
.vm-fig video[hidden], .vm-yt[hidden] { display: none; }
.vm-yt { overflow: hidden; }
.vm-yt iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 9800; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 20px 12px 14px; border-radius: 24px; background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 600; box-shadow: var(--sh-3);
  opacity: 0; transform: translate(-50%, 24px); pointer-events: none; transition: opacity .3s, transform .5s var(--ease-spring);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-err .ic { background: var(--accent); }
.toast .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ok); stroke-width: 2.6; box-sizing: border-box; }

/* ---------- Fly-to-quote ---------- */
.fly { position: fixed; z-index: 9900; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff center / cover no-repeat; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .55); border: 3px solid #fff; pointer-events: none; }

/* =====================================================================
   REVEAL SYSTEM (chỉ bật khi JS đã chạy → không bao giờ ẩn nội dung nếu JS lỗi)
   ===================================================================== */
.anim [data-reveal] {
  transition: opacity .95s var(--ease-out), transform .95s var(--ease-out), clip-path 1.1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 75ms);
}
.anim [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 30px, 0); }
.anim [data-reveal="fade"]:not(.is-in) { transform: none; }
.anim [data-reveal="scale"]:not(.is-in) { transform: scale(.96); }
.anim .sec-head .sec-line { transition: transform 1.2s var(--ease-out) .1s; }
.anim .sec-head:not(.is-in) .sec-line { transform: scaleX(0); }
.anim .sec-head .sec-sub { transition: opacity .9s var(--ease-out) .2s, transform .9s var(--ease-out) .2s; }
.anim .sec-head:not(.is-in) .sec-sub { opacity: 0; transform: translateY(12px); }
.anim .sec-head:not(.is-in) { transform: none; opacity: 1; }
.anim .sec-head h2 { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.anim .sec-head:not(.is-in) h2 { opacity: 0; transform: translateY(16px); }
.anim .fcard[data-reveal] .fcard-media img { transition: transform 1.4s var(--ease-out); }
.anim .fcard[data-reveal]:not(.is-in) .fcard-media img { transform: scale(1.15); }
.anim .split[data-reveal] .split-media { transition: clip-path 1.3s var(--ease-out); }
.anim .split[data-reveal]:not(.is-in) .split-media { clip-path: inset(0 0 100% 0 round 24px); }
.anim .split[data-reveal]:not(.is-in) { transform: none; opacity: 1; }
.anim .split[data-reveal] .split-txt > * { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.anim .split[data-reveal]:not(.is-in) .split-txt > * { opacity: 0; transform: translateY(18px); }
.anim .split[data-reveal] .split-txt > :nth-child(2) { transition-delay: .08s; }
.anim .split[data-reveal] .split-txt > :nth-child(3) { transition-delay: .16s; }
.anim .split[data-reveal] .split-txt > :nth-child(4) { transition-delay: .24s; }
.anim .spec[data-reveal]:not(.is-in) { transform: translateY(30px) scale(.985); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* Desktop: ảnh trong các section cao tối đa 60% màn hình (theo website-build-system) */
@media (min-width: 761px) {
  .split-media, .cert-btn img { max-height: 60vh; }
  .promo-slide { min-height: min(420px, 60vh); }
  .promo-txt { padding-top: clamp(28px, 4vh, 56px); padding-bottom: clamp(78px, 11vh, 96px); }
  .vgrid { min-height: min(460px, 60vh); grid-template-rows: repeat(2, minmax(min(200px, 28vh), 1fr)); }
}
@media (min-width: 761px) and (max-height: 800px) {
  .promo-h { font-size: clamp(24px, 2.6vw, 34px); }
  .promo-p { margin-bottom: 20px; font-size: 15px; }
}
@media (max-width: 1360px) {
  .sec-cap::after { display: none; }
}
@media (max-width: 1240px) {
  .mh-in { gap: 20px; }
  .nav-list > li > a, .nav-list > li > button { padding: 0 12px; font-size: 14.5px; }
  .nav-list > li > a::after, .nav-list > li > button::after { left: 12px; right: 12px; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .mh-burger { display: grid; }
  .mh-in { height: 72px; gap: 12px; }
  .masthead.is-dark .mh-in { height: 62px; }
  .mh-logo { width: 124px; }
  .masthead.is-dark .mh-logo { width: 110px; }
  html { scroll-padding-top: 70px; }
  .feat { --gap: 16px; }
  .grid-p { gap: 16px; }
  .usp { grid-template-columns: repeat(2, 1fr); }
  .usp li:nth-child(3) { border-left: 0; }
  .usp li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cap { grid-template-columns: 1fr; }
  .inds { grid-template-columns: repeat(2, 1fr); }
  .rohs { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
  .blog { grid-template-columns: repeat(2, 1fr); }
  .quote { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-about { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .promo-slide { grid-template-columns: 1fr; }
  .promo-media { order: -1; min-height: 240px; aspect-ratio: 16 / 9; }
  .promo-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, .25), transparent 40%); }
  .promo-txt { padding: 26px 24px 90px; }
  .promo-nav { left: 24px; bottom: 24px; }
  .spec { grid-template-columns: minmax(0, 1fr); }
  .spec-visual { border-right: 0; border-bottom: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; }
  .vgrid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; }
  .vcard-lg { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .vcard:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .vcard-photo { aspect-ratio: 1; }
  .qv-box { grid-template-columns: 1fr; }
  .qv-media { min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; }
  .qv-media img { position: absolute; inset: 0; max-height: none; }
}
/* Khi các khối xếp 1 cột: căn giữa chữ (năng lực, số liệu, slide khuyến mãi, tiêu đề thùng carton) */
@media (max-width: 1100px) {
  .cap-intro { text-align: center; }
  .cap-intro p { max-width: 640px; margin-inline: auto; }
  .stat { align-items: center; text-align: center; }
  .stat-l { align-items: center; }
}
@media (max-width: 860px) {
  .promo-txt { text-align: center; }
  .promo-nav { left: 0; right: 0; justify-content: center; }
  .split-txt h3 { text-align: center; }
  .split-ctas { justify-content: center; }
}
@media (max-width: 1100px) {
  .quote-intro { text-align: center; }
  .quote-h, .quote-sub { margin-inline: auto; }
  .quote-lines { justify-content: center; }
}
/* Lưới sản phẩm: 4 thẻ/hàng (chủ lực 3) tới 900px, nhỏ hơn thì 2 */
@media (max-width: 900px) {
  .grid-p { grid-template-columns: repeat(2, 1fr); }
  .feat { --cols: 2; }
}

@media (max-width: 760px) {
  .mh-in { height: 64px; }
  .masthead.is-dark .mh-in { height: 58px; }
  .mh-logo, .masthead.is-dark .mh-logo { position: absolute; left: 50%; width: 100px; transform: translateX(-50%); }
  .mh-btn { width: 40px; height: 40px; }
  .mh-btn .ic { width: 19px; height: 19px; }
  .mh-tools { gap: 8px; }
  .mh-cta, .hk-loc { display: none; }
  body { font-size: 15.5px; }
  .sec-cap, .sec-dark, .sec-quote { border-radius: 22px; }
  .sec-cap > .container, .sec-dark > .container, .sec-quote > .container { padding-inline: 16px; }
  .sec-quote { margin-bottom: 40px; }

  .hero { padding-top: var(--mh, 64px); }
  .hero-shade { background: linear-gradient(180deg, rgba(6, 19, 33, .82) 0%, rgba(6, 19, 33, .5) 18%, rgba(6, 19, 33, .66) 45%, rgba(6, 19, 33, .78) 75%, rgba(6, 19, 33, .92) 100%); }
  .hero-in { align-items: center; padding-block: 16px; }
  .hero-kicker { margin-bottom: 12px; gap: 10px; font-size: 11px; letter-spacing: .12em; }
  .hero-kicker::before { width: 24px; }
  .hero-h1 { font-size: clamp(26px, min(8.6vw, 5vh), 40px); }
  .hero-sub { font-size: 14.5px; margin-top: 12px; }
  .hero-ctas { margin-top: 18px; gap: 10px; }
  .hero-ctas .btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; font-size: 14.5px; }
  .b-tl { left: -6px; top: -6px; } .b-tr { right: -6px; top: -6px; } .b-br { right: -6px; bottom: -6px; } .b-bl { left: -6px; bottom: -6px; }

  .ticker-list li { font-size: 12px; padding: 11px 0 11px 20px; gap: 10px; }
  .sec { padding: 56px 0; }
  .sec-title { gap: 10px; }
  .sec-title h2 { font-size: 18.5px; max-width: 86%; white-space: normal; text-align: center; text-wrap: balance; }
  .sec-title h2 .ic { display: none; }
  .sec-sub { font-size: 14.5px; }
  .tagline p { font-size: 15px; }
  .usp { grid-template-columns: 1fr; }
  .usp li { padding: 16px 18px; }
  .usp li + li { border-left: 0; border-top: 1px solid var(--line); }
  .feat { --gap: 12px; }
  .fcard-body { padding: 14px 12px 16px; }
  .fcard-title { font-size: 13.5px; }
  .fcard-desc { display: none; }
  .fcard-price { font-size: 12.5px; margin-top: 2px; }
  .fcard-go { display: none; }
  .fcard .badge { top: 10px; left: 10px; font-size: 10px; padding: 4px 8px; }
  .notice { font-size: 13.5px; padding: 13px 14px; }
  .grid-p { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pcard-body { padding: 12px 10px 14px; }
  .pcard-t { font-size: 13.5px; }
  .pcard-spec { font-size: 12px; }
  .pcard-price { font-size: 12.5px; }
  .pcard-price b { font-size: 14.5px; }
  .promo-h { font-size: 24px; }
  .promo-p { font-size: 14.5px; margin-bottom: 20px; }
  .spec-visual { padding: 18px 12px; }
  .spec-chips { grid-template-columns: repeat(var(--nm, 4), minmax(0, 1fr)); }
  .spec-chips button { height: 42px; font-size: 16.5px; }
  .spec-rows div { grid-template-columns: 110px 1fr; }
  .spec-actions { gap: 8px; }
  .spec-actions .btn { flex: 0 0 auto; padding: 0 14px; font-size: 12.5px; }
  .spec-actions #specAdd { flex: 1 1 auto; }
  .spec-actions .sa-zalo { width: 40px; padding: 0; }
  .sa-lbl { display: none; }
  .cap-stats .stat { padding: 20px 18px; }
  .stat-n { font-size: 50px; }
  .inds { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inds li { padding: 16px; }
  .inds span { font-size: 12.5px; }
  .rohs { gap: 14px; }
  .cert-btn { padding: 8px; }
  .cert figcaption b { font-size: 13.5px; }
  .vgrid { gap: 12px; }
  .vcard-meta { left: 14px; right: 14px; bottom: 12px; }
  .vcard-meta b { font-size: 14.5px; }
  .blog { gap: 18px 12px; }
  .post-t { font-size: 14.5px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  /* Footer gọn trên mobile */
  .ft { font-size: 13.5px; }
  .ft-grid { grid-template-columns: 1fr; gap: 26px; padding-top: 44px; padding-bottom: 26px; }
  .ft-logo { width: 150px; margin-bottom: 12px; }
  .ft-about h3 { font-size: 14.5px; }
  .ft-mst { margin: 2px 0 12px; font-size: 12.5px; }
  .ft-addr { gap: 7px; }
  .ft-addr li { line-height: 1.45; }
  .ft-addr .ic { width: 16px; height: 16px; margin-top: 2px; }
  .ft-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .ft-calls .btn { justify-content: center; height: 44px; padding: 0 10px; font-size: 14px; }
  .ft-col:not(.ft-about):not(.ft-map) { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 16px; }
  .ft h4 { margin-bottom: 12px; padding-bottom: 9px; font-size: 12px; }
  .ft-links { gap: 7px; margin-bottom: 0; }
  .map { aspect-ratio: 2 / 1; border-radius: 14px; }
  .ft-social { margin-top: 14px; gap: 8px; }
  .ft-social a { width: 36px; height: 36px; }
  .ft-social .ic { width: 17px; height: 17px; }
  .ft-bot { font-size: 12px; }
  .ft-bot-in { justify-content: center; text-align: center; padding-top: 12px; padding-bottom: 12px; }
  .ft-bot-in > span:last-child { display: none; }
  /* Mobile: 5 nút thành thanh ngang cố định ở đáy */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .fab {
    left: 0; right: 0; bottom: 0; grid-template-columns: repeat(5, 1fr); gap: 0; justify-items: stretch;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px -16px rgba(6, 31, 70, .35); transition: transform .4s var(--ease-out);
  }
  .fab.is-away { transform: translateY(110%); }
  .fab.is-away .fab-btn:not(.fab-top), .fab .fab-top { opacity: 1; transform: none; pointer-events: auto; }
  .fab .fab-btn {
    width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0;
    border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-2); animation: none;
  }
  .fab .fab-btn:hover { transform: none; box-shadow: none; }
  .fab-zalo::before, .fab-call::after { display: none; }
  .fab-ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--deep); }
  .fab-btn .ic { width: 17px; height: 17px; }
  /* 5 nút đều nhau: cùng cỡ, cùng hàng, không phóng to/nhảy */
  .fab-zalo .fab-ic { background: #fff; box-shadow: inset 0 0 0 1px var(--line); animation: none; }
  .fab-zalo .ib-zalo { width: 24px; height: 24px; }
  .fab-fb .fab-ic { background: #1877f2; overflow: hidden; }
  .fab-mail .fab-ic { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .fab-btn .ib-gmail { width: 20px; height: 20px; }
  .fab-btn .ib-facebook { width: 100%; height: 100%; }
  .fab-call { order: 3; }
  .fab-mail { order: 4; }
  .fab-top { order: 5; }
  .fab-call .fab-ic { background: var(--accent); }
  .fab-lbl { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
  .fab-tip { display: none; }
  .fab-yt, .fab-tt { display: none !important; } /* thanh đáy mobile giữ 5 nút; YouTube / TikTok có ở footer */
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .quote-lines { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .quote-lines a { padding: 10px 12px; border-radius: 14px; }
  .quote-lines .ic { display: none; }
  .quote-lines b { font-size: 15.5px; white-space: nowrap; }
}
@media (max-width: 380px) {
}

.nw { white-space: nowrap; }