/* =========================================================
   FASON ATELIER — hệ thống giao diện trang khách
   Bản sắc: XANH DƯƠNG ĐIỆN × XANH CHANH NEON
   · Xanh dương điện (--accent) = màu chủ đạo: phần mở đầu, khối kêu gọi, phiếu dự toán, tiêu đề mục.
   · Xanh cobalt đậm (--accent2) = chiều sâu: thanh trên cùng, băng năng lực, chân trang.
   · Xanh chanh neon (--brand)  = chữ ký: nút chính, số bước, điểm nhấn trên nền xanh.
   · Nền trung tính sáng: #F7F8FA, thẻ #FFFFFF / #F1F3F5, chữ #101828.
   Quy tắc tương phản: chữ trắng trên xanh dương · chữ navy trên xanh chanh · KHÔNG dùng xanh chanh làm chữ trên nền sáng.
   Họa tiết trang trí đều lấy từ nghề may: lưới rập, đường chỉ may (nét đứt), mũi tên vẽ tay, thẻ thông số.

   Màu, font, bo góc do admin chọn (content/site.json › theme). Máy chủ chèn sẵn vào <head>:
   --brand --on-brand --accent --on-accent --accent2 --on-accent2 --ink --bg --soft --c-dark --c-light
   --accent-text --radius --font-h --font-b --font-a --font-m --h-weight --h-track --upper …

   Khối màu (.scheme-*) đổi --bg / --ink cục bộ; mọi màu suy ra được tính lại trong từng khối.
   Điểm ngắt: 480px · 760px · 1024px · 1280px
   ========================================================= */
:root{
  /* giá trị dự phòng = bộ mặc định */
  --brand:#B7FF00; --on-brand:#101828; --on-cdark:#B7FF00;
  --primary:#101828; --on-primary:#B7FF00; --accent:#0739CF; --accent2:#08277F; --ink:#101828; --bg:#F7F8FA; --soft:#F1F3F5;
  --c-dark:#101828; --c-light:#F7F8FA; --on-accent:#FFFFFF; --on-accent2:#FFFFFF;
  --accent-on-light:#0739CF; --accent-on-dark:#7FA0FF; --accent2-on-light:#08277F; --accent2-on-dark:#9BB0F0;
  --accent-text:#0739CF; --accent2-text:#08277F;
  --lift:#FFFFFF; --lift-k:55%; --logo-filter:none;
  --radius:14px; --upper:none; --h-weight:600; --h-track:-0.025em;
  --font-h:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-b:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-a:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-m:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --a-display:inline; --a-rotate:0deg; --a-size:1em; --a-weight:600; --a-style:normal; --a-transform:inherit; --a-track:inherit; --a-color:inherit; --a-marker:#B7FF00;
  /* màu gốc (giữ nguyên khi vào khối màu khác) */
  --base-primary:var(--brand); --base-accent:var(--accent); --base-accent2:var(--accent2); --base-on-accent:var(--on-accent); --base-on-accent2:var(--on-accent2);

  /* chữ */
  --fs-base:16.5px; --fs-md:17.5px;
  --fs-xl:clamp(22px, 2.2vw, 28px);
  --fs-2xl:clamp(36px, 5vw, 72px);
  --fs-display:clamp(44px, 6.5vw, 108px);
  --lh-body:1.62;

  /* khoảng cách */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --sec-y:clamp(64px, 8.5vw, 128px);
  --container:1320px;
  --gutter:clamp(16px, 4vw, 40px);

  /* hình khối: nút bo tròn hẳn, thẻ bo lớn, đổ bóng mềm (không bóng lệch kiểu poster) */
  --r:var(--radius); --r-sm:calc(var(--radius) * .7); --r-lg:calc(var(--radius) * 1.7); --r-xl:calc(var(--radius) * 2);
  --pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 4px 12px -6px rgba(16,24,40,.10);
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 18px 40px -22px rgba(16,24,40,.28);
  --shadow-lg:0 2px 4px rgba(4,20,80,.08), 0 40px 80px -36px rgba(4,20,80,.55);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.2s;
  --head-h:72px; --tap:44px;
  /* lưới rập kỹ thuật (đường mảnh) */
  --grid-size:64px;
}
@media (max-width:759px){:root{--head-h:62px;--grid-size:44px}}

/* vùng sáng mặc định: nút chọn/trạng thái dùng xanh dương, chữ nhấn dùng xanh dương */
body{--primary:var(--base-accent);--on-primary:var(--base-on-accent);--ghost:var(--accent-text);--focus-c:var(--base-accent);--hl-marker:var(--brand);--hl-color:inherit;--title:var(--accent-text)}

/* màu suy ra — tính lại trong mỗi khối màu */
body,.scheme{
  --ink-2:color-mix(in srgb, var(--ink) 86%, var(--bg));
  --muted:color-mix(in srgb, var(--ink) 70%, var(--bg));
  --faint:color-mix(in srgb, var(--ink) 38%, var(--bg));
  --surface:color-mix(in srgb, var(--lift) var(--lift-k), var(--bg));
  --surface-2:color-mix(in srgb, var(--lift) calc(var(--lift-k) * 2), var(--bg));
  --line:color-mix(in srgb, var(--ink) 12%, var(--bg));
  --line-2:color-mix(in srgb, var(--ink) 22%, var(--bg));
  --line-strong:color-mix(in srgb, var(--ink) 75%, var(--bg));
  --line-input:color-mix(in srgb, var(--ink) 52%, var(--bg));     /* viền ô nhập ≥ 3:1 */
  --primary-hover:color-mix(in srgb, var(--primary) 84%, var(--ink));
  --primary-tint:color-mix(in srgb, var(--primary) 9%, var(--surface));
  --primary-line:color-mix(in srgb, var(--primary) 40%, var(--bg));
  --gridline:color-mix(in srgb, var(--ink) 7%, transparent);
  --on-ink:var(--bg);
  /* trạng thái: pha với màu chữ nên luôn đọc được trên nền sáng lẫn tối */
  --ok:color-mix(in srgb, #12A150 62%, var(--ink));     --ok-tint:color-mix(in srgb, #12A150 13%, var(--bg));
  --danger:color-mix(in srgb, #E5484D 72%, var(--ink)); --danger-tint:color-mix(in srgb, #E5484D 12%, var(--bg));
  --warn:color-mix(in srgb, #B97700 72%, var(--ink));   --warn-tint:color-mix(in srgb, #E8A317 14%, var(--bg));
  --focus:var(--focus-c);
}
/* các khối màu */
.scheme{background:var(--bg);color:var(--ink)}
/* giấy trắng: thẻ nổi trên nền sáng hoặc trên khối xanh */
.scheme-paper{--bg:#FFFFFF;--ink:var(--c-dark);--soft:color-mix(in srgb, var(--c-dark) 5%, #FFFFFF);--lift:var(--c-light);--lift-k:100%;
  --primary:var(--base-accent);--on-primary:var(--base-on-accent);--accent-text:var(--accent-on-light);--ghost:var(--accent-on-light);--focus-c:var(--base-accent);
  --hl-marker:var(--brand);--hl-color:inherit;--title:var(--accent-on-light);color-scheme:light}
/* xanh dương điện: chữ trắng, nút & điểm nhấn xanh chanh */
.scheme-blue,.scheme-cobalt{--ink:var(--base-on-accent);--soft:color-mix(in srgb, #FFFFFF 9%, var(--bg));--lift:#FFFFFF;--lift-k:9%;
  --primary:var(--brand);--on-primary:var(--on-brand);--accent-text:var(--brand);--accent2-text:var(--brand);--ghost:var(--ink);--focus-c:var(--brand);
  --hl-marker:transparent;--hl-color:var(--brand);--title:var(--ink);--gridline:color-mix(in srgb, #FFFFFF 10%, transparent);color-scheme:dark}
.scheme-blue{--bg:var(--base-accent)}
.scheme-cobalt{--bg:var(--base-accent2);--ink:var(--base-on-accent2)}
.scheme-blue,.scheme-cobalt{--muted:color-mix(in srgb, var(--ink) 80%, var(--bg));--ink-2:color-mix(in srgb, var(--ink) 92%, var(--bg));--line:color-mix(in srgb, var(--ink) 18%, var(--bg));--line-2:color-mix(in srgb, var(--ink) 30%, var(--bg));--line-input:color-mix(in srgb, var(--ink) 62%, var(--bg))}
.scheme-blue .js-brand-logo,.scheme-blue .brand-logo,.scheme-cobalt .js-brand-logo,.scheme-cobalt .brand-logo{filter:brightness(0) invert(1)}

/* ---------- nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px);-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-feature-settings:"kern" 1,"calt" 1}
::selection{background:var(--brand);color:var(--on-brand)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
p{margin:0}
/* line-height ≥ 1.04 + padding nhỏ: dấu tiếng Việt chồng tầng (ẩ, ỗ, Ữ) không bị cắt */
h1,h2,h3,h4{margin:0;font-family:var(--font-h);font-weight:var(--h-weight);letter-spacing:var(--h-track);line-height:1.1;text-wrap:balance;font-optical-sizing:auto;font-kerning:normal}
ol,ul{margin:0;padding:0}
dl,dd{margin:0}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.num{font-family:var(--font-m);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:0;font-weight:500}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--brand);color:var(--on-brand);padding:12px 18px;border-radius:var(--pill);font-weight:600;text-decoration:none}
.skip:focus{left:12px}
.boot-error{margin:0;padding:14px 20px;background:#E5484D;color:#fff;font-weight:600}
.ic{width:22px;height:22px;flex:none}.ic-sm{width:18px;height:18px;flex:none}.ic-lg{width:30px;height:30px;flex:none}
[data-icon]{display:inline-flex}
html.locked,html.menu-open{overflow:hidden}
.brand-logo,.js-brand-logo{filter:var(--logo-filter)}
/* mũi tên vẽ tay (chỉ trang trí) */
.doodle{fill:none;stroke:var(--brand);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;overflow:visible}

/* ---------- chữ ---------- */
.display{font-size:var(--fs-display);line-height:1.02;letter-spacing:-.045em;text-transform:var(--upper)}
.h2{font-size:var(--fs-2xl);line-height:1.06;letter-spacing:-.04em;text-transform:var(--upper);color:var(--title)}
.h3{font-size:var(--fs-xl);line-height:1.15}
/* điểm nhấn: trên nền sáng → nét bút dạ quang xanh chanh dưới chữ navy; trên nền xanh → chữ xanh chanh */
.hl{display:var(--a-display);font-family:var(--font-a);font-weight:var(--a-weight);font-style:var(--a-style,normal);text-transform:var(--a-transform);letter-spacing:var(--a-track);color:var(--hl-color, var(--a-color));
  transform:rotate(var(--a-rotate));font-size:var(--a-size);padding-inline:.06em .1em;margin-inline:-.04em;max-width:96%;
  background-image:linear-gradient(transparent 58%, var(--hl-marker, var(--a-marker)) 58%, var(--hl-marker, var(--a-marker)) 92%, transparent 92%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.h2 .hl{--hl-color:var(--ink)}
.scheme-blue .h2 .hl,.scheme-cobalt .h2 .hl{--hl-color:var(--brand)}
.kicker{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-family:var(--font-b);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.kicker .idx{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 9px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-m);font-weight:600;font-size:12.5px;letter-spacing:0}
.kicker .idx:empty{display:none}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.65;color:var(--ink-2);max-width:54ch}
.sec-intro{font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch}
.link{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb, var(--accent-text) 60%, transparent);transition:color var(--dur),text-decoration-color var(--dur)}
.link:hover{color:var(--accent-text);text-decoration-color:currentColor}
.meta{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- nút: viên thuốc, chữ thường (dễ đọc dấu tiếng Việt) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--pill);border:1.5px solid transparent;
  font-weight:600;font-size:15px;letter-spacing:-.005em;line-height:1.2;text-decoration:none;white-space:nowrap;--spin:currentColor;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color var(--dur),border-color var(--dur),color var(--dur)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}
.btn-lg{min-height:56px;padding:0 30px;font-size:16px}
.btn-block{width:100%;white-space:normal;text-align:center}
/* nút chính: luôn xanh chanh, chữ navy */
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand);--spin:var(--on-brand)}
.btn-primary:hover{transform:translateY(-2px);background:color-mix(in srgb, var(--brand) 90%, #000);border-color:color-mix(in srgb, var(--brand) 90%, #000);box-shadow:0 14px 28px -14px color-mix(in srgb, var(--c-dark) 55%, transparent)}
.btn-primary:active{transform:none;box-shadow:none}
/* nút phụ đặc: xanh dương, chữ trắng */
.btn-dark{background:var(--base-accent);color:var(--base-on-accent);border-color:var(--base-accent);--spin:var(--base-on-accent)}
.btn-dark:hover{transform:translateY(-2px);background:var(--base-accent2);border-color:var(--base-accent2)}
/* nút viền: xanh dương trên nền sáng, trắng trên nền xanh */
.btn-ghost,.btn-onink{background:transparent;border-color:color-mix(in srgb, var(--ghost) 70%, transparent);color:var(--ghost);--spin:var(--ghost)}
.btn-ghost:hover,.btn-onink:hover{background:var(--ghost);border-color:var(--ghost);color:var(--bg)}
.btn-quiet{color:var(--ink-2);padding-inline:14px}
.btn-quiet:hover{background:var(--soft);color:var(--ink)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading > *{visibility:hidden}
.btn.loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb, var(--spin) 30%, transparent);border-top-color:var(--spin);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- thanh trên cùng (cobalt) ---------- */
.topbar{background:var(--base-accent2);color:var(--base-on-accent2);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:env(safe-area-inset-top,0px);--focus:var(--brand)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:6px 24px;min-height:38px;padding-block:6px}
.topbar-items{display:flex;flex-wrap:wrap;gap:4px 28px;min-width:0}
.topbar-items span:first-child{color:var(--brand);font-weight:600}
.topbar-items span + span::before{content:"";display:inline-block;width:16px;margin:0 14px 0 -14px;vertical-align:middle;border-top:1.5px dashed color-mix(in srgb, currentColor 55%, transparent)}
.topbar-hot{color:inherit;text-decoration:none;white-space:nowrap}
.topbar-hot b{font-weight:600;margin-left:6px;color:var(--brand)}
.topbar-hot:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:759px){.topbar-items span:not(:first-child){display:none}}
@media (max-width:479px){.topbar-hot{display:none}}

/* ---------- đầu trang: trắng, chữ navy, nút xanh chanh ---------- */
.site-head{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
/* nền mờ đặt ở lớp giả: backdrop-filter trên chính .site-head sẽ làm menu điện thoại (position:fixed) bị co theo đầu trang */
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb, #FFFFFF 90%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
html.menu-open .site-head::before{background:#FFFFFF}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);height:var(--head-h)}
.brand{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;border-radius:8px}
.brand-logo{height:26px;width:auto}
.brand-tag{font-family:var(--font-b);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-left:14px;border-left:1px solid var(--line-2);white-space:nowrap;line-height:1.3}
.nav{display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--pill);background:var(--soft)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:var(--pill);font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;transition:color var(--dur),background-color var(--dur)}
.nav a:hover{color:var(--accent-text);background:#FFFFFF}
.nav a[aria-current="true"]{color:var(--base-on-accent);background:var(--base-accent)}
.head-act{display:flex;align-items:center;gap:8px;flex:none}
.head-track{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;border-radius:var(--pill);transition:color var(--dur),background-color var(--dur)}
.head-track:hover{color:var(--accent-text);background:var(--soft)}
.head-cta{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c-dark) 10%, transparent)}
.menu-btn{display:none;width:var(--tap);height:var(--tap);border-radius:50%;border:1.5px solid var(--line-input);align-items:center;justify-content:center;flex-direction:column;gap:5px;transition:background-color var(--dur),border-color var(--dur)}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease)}
.menu-btn[aria-expanded="true"]{background:var(--base-accent);border-color:var(--base-accent)}
.menu-btn[aria-expanded="true"] span{background:var(--base-on-accent)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:fixed;left:0;right:0;top:var(--menu-top,var(--head-h));bottom:0;z-index:49;background:#FFFFFF;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom,0px));animation:menuIn .22s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}}
.mnav{display:grid}
.mnav a{display:flex;justify-content:space-between;align-items:center;min-height:64px;font-family:var(--font-h);font-weight:var(--h-weight);font-size:30px;line-height:1.15;letter-spacing:-.03em;text-transform:var(--upper);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a::after{content:"→";display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft);font-family:var(--font-b);font-size:17px;color:var(--accent-text);transition:background-color var(--dur),color var(--dur)}
.mnav a:hover,.mnav a[aria-current="true"]{color:var(--accent-text)}
.mnav a:hover::after,.mnav a[aria-current="true"]::after{background:var(--brand);color:var(--on-brand)}
.mmenu-foot{display:grid;gap:var(--s-3);margin-top:var(--s-5)}
.mmenu-contact{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);justify-content:center;color:var(--muted);font-size:15px}
.mmenu-contact a{color:var(--accent-text);font-weight:600}
@media (max-width:1399px){.brand-tag{display:none}}
@media (max-width:1139px){.nav{display:none}.menu-btn{display:inline-flex}}
@media (max-width:479px){.head-cta{display:none}.head-track .lbl{display:none}.head-track{width:var(--tap);height:var(--tap);justify-content:center;padding:0;border:1.5px solid var(--line-input);border-radius:50%}}

/* ---------- đầu mục ---------- */
.sec{position:relative;padding-block:var(--sec-y)}
.sec-soft{background:var(--soft)}
.sec-head{display:grid;gap:var(--s-4);margin-bottom:clamp(36px,4.5vw,64px)}
.sec-head .kicker{margin:0}
.sec-head.split{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .sec-head.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:var(--s-8)}
  .sec-head.split .kicker{grid-column:1/-1}
}
.sec-head .h2{max-width:17ch}

/* ---------- phần mở đầu: khối xanh dương điện + lưới rập ---------- */
.hero{position:relative;padding-block:clamp(40px,6vw,96px) clamp(48px,6vw,96px);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:var(--grid-size) var(--grid-size);background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero::after{content:"";position:absolute;z-index:-1;right:-12%;bottom:-40%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, var(--base-accent2) 75%, transparent),transparent);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,5vw,72px);align-items:center}
@media (min-width:1024px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:var(--s-5)}
.eyebrow .badge-t{font-family:var(--font-b);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-brand);background:var(--brand);padding:7px 14px;border-radius:var(--pill)}
.eyebrow .eyebrow-sub{font-size:15px;font-weight:500;color:var(--muted)}
.hero h1{max-width:15ch;color:var(--ink)}
/* tiếng Anh: từ dài hơn → tiêu đề nhỏ hơn một chút để vẫn gọn 3–4 dòng */
html[lang="en"] .hero h1{font-size:clamp(42px,5.7vw,94px);max-width:16ch}
.hero h1 .hl{--hl-color:var(--brand)}
.hero h1 .line2{display:block}
.hero .lead{margin-top:var(--s-5);color:var(--ink-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
@media (max-width:479px){.cta-row .btn{width:100%}}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-2)}
.facts div{padding:var(--s-4) var(--s-4) 0 0;min-width:0}
.facts div + div{padding-left:var(--s-4);border-left:1px solid var(--line)}
.facts dt{font-family:var(--font-m);font-weight:600;font-size:clamp(36px,3.8vw,58px);line-height:1;letter-spacing:-.05em;font-variant-numeric:lining-nums;color:var(--ink)}
.facts div:first-child dt{color:var(--accent-text)}
.facts dd{margin-top:8px;font-size:14px;line-height:1.45;color:var(--muted)}
@media (max-width:479px){.facts{grid-template-columns:minmax(0,1fr)}.facts div,.facts div + div{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-3) 0;border-left:0;border-bottom:1px solid var(--line)}.facts dt{min-width:84px;font-size:34px}.facts dd{margin:0}}

/* phần hình: bản vẽ kỹ thuật (minh hoạ) hoặc ảnh thật — thẻ trắng nổi, viền chỉ may phía sau */
.hero-visual{position:relative;min-width:0;padding:30px 12px 20px}
.hero-visual::before{content:"";position:absolute;inset:8px -4px 76px 26px;border:2px dashed color-mix(in srgb, #FFFFFF 38%, transparent);border-radius:calc(var(--r-xl) + 6px);transform:rotate(3.5deg);pointer-events:none}
.hero-photo{position:relative;margin:0;background:#fff;padding:10px;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);transform:rotate(-1deg)}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r-xl) - 8px)}
@media (max-width:1023px){.hero-photo img{aspect-ratio:4/3}}
.hero-photo figcaption{padding:10px 6px 4px;font-size:13px;color:#525F70}
.hero-price{position:absolute;left:-6px;bottom:96px;z-index:3;display:grid;gap:2px;padding:12px 18px;border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow)}
.hero-price small{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hero-price b{font-family:var(--font-m);font-weight:600;font-size:26px;letter-spacing:-.03em}
/* huy hiệu tròn xanh chanh */
.hero-badge{position:absolute;z-index:4;top:30%;right:-26px;display:grid;place-content:center;justify-items:center;width:112px;height:112px;border-radius:50%;background:var(--brand);color:var(--on-brand);text-align:center;line-height:1;transform:rotate(-10deg);box-shadow:0 18px 30px -16px rgba(4,20,80,.6)}
.hero-badge::before{content:"";position:absolute;inset:7px;border-radius:50%;border:1.5px dashed color-mix(in srgb, var(--on-brand) 45%, transparent)}
.hero-badge small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero-badge b{font-family:var(--font-m);font-weight:600;font-size:38px;letter-spacing:-.04em;margin:2px 0}
.hero-doodle{position:absolute;z-index:4;top:calc(30% - 104px);right:-66px;width:110px;height:96px}
/* thẻ thông số nổi (số liệu lấy từ bảng giá) */
.spec-card{position:relative;z-index:4;width:max-content;max-width:100%;margin:-16px 0 0 -36px;display:grid;grid-auto-flow:column;gap:0;border-radius:var(--r-lg);background:#FFFFFF;color:var(--c-dark);box-shadow:var(--shadow-lg);overflow:hidden}
.spec-card div{display:grid;gap:2px;padding:14px 20px}
.spec-card div + div{border-left:1px solid #DCE2EA}
.spec-card small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#525F70;white-space:nowrap}
.spec-card b{font-family:var(--font-m);font-weight:600;font-size:24px;letter-spacing:-.03em;color:var(--base-accent);white-space:nowrap}
@media (max-width:1279px){.spec-card{margin-left:-8px}}
@media (max-width:1023px){.hero-doodle{display:none}.hero-visual{max-width:600px;margin-inline:auto;width:100%}}
@media (max-width:639px){
  .hero-visual{padding:22px 0 0}
  .hero-visual::before{inset:6px -6px 90px 10px}
  .hero-badge{width:84px;height:84px;right:-6px;top:30%}.hero-badge b{font-size:28px}.hero-badge small{font-size:10px}
  .spec-card{width:auto;margin:12px 0 0;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-card div{padding:12px 14px}
  .spec-card small{white-space:normal}.spec-card b{font-size:20px}
}

/* bản vẽ kỹ thuật */
.tp{position:relative;margin:0;background:#FFFFFF;color:var(--c-dark);border-radius:var(--r-xl);padding:clamp(16px,2vw,26px);transform:rotate(-1.2deg);box-shadow:var(--shadow-lg)}
.tp-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid #DCE2EA}
.tp-head .meta{color:var(--c-dark);min-width:0}
@media (max-width:479px){.tp-head .meta{font-size:12px;letter-spacing:.06em}}
.tp-tag{flex:none;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--pill);background:var(--base-accent);color:var(--base-on-accent)}
.tp-art{position:relative;margin:var(--s-3) auto var(--s-2);aspect-ratio:428/520;max-height:min(44vh,420px)}
.tp-art svg{display:block;width:100%;height:100%;overflow:visible}
.tp-gridline{stroke:color-mix(in srgb, var(--base-accent) 9%, transparent);stroke-width:1}
.tp-line{fill:none;stroke:var(--c-dark);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.tp-line circle{fill:var(--c-dark);stroke:none}
.tp-line .draw{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.8s var(--ease) both}
.tp-line .draw:nth-child(2){animation-delay:.15s}.tp-line .draw:nth-child(3){animation-delay:.3s}.tp-line .draw:nth-child(4){animation-delay:.45s}.tp-line .draw:nth-child(5){animation-delay:.6s}
@keyframes draw{from{stroke-dashoffset:1}}
.tp-stitch{fill:none;stroke:color-mix(in srgb, var(--base-accent) 60%, #fff);stroke-width:1.4;stroke-dasharray:4 4;animation:fadein .6s 1.4s both}
.tp-rib{stroke-dasharray:none;stroke:color-mix(in srgb, var(--c-dark) 30%, #fff)}
.tp-print{fill:color-mix(in srgb, var(--base-accent) 10%, transparent);stroke:var(--base-accent);stroke-width:2;stroke-dasharray:6 5;animation:fadein .6s 1.6s both, march 1.2s linear 2.2s 3}
@keyframes march{to{stroke-dashoffset:-22}}
.tp-dim{fill:none;stroke:color-mix(in srgb, var(--c-dark) 45%, #fff);stroke-width:1.2;animation:fadein .6s 1.8s both}
.tp-dim text{fill:color-mix(in srgb, var(--c-dark) 62%, #fff);stroke:none;font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:.12em}
.tp-pin{animation:pop .45s var(--ease) both;transform-box:fill-box;transform-origin:center}
.tp-pin:nth-of-type(1){animation-delay:1.9s}.tp-pin:nth-of-type(2){animation-delay:2.05s}.tp-pin:nth-of-type(3){animation-delay:2.2s}
.tp-pin circle{fill:var(--brand);stroke:var(--c-dark);stroke-width:1.6}
.tp-pin text{fill:var(--c-dark);font-family:var(--font-m);font-size:12px;font-weight:600;text-anchor:middle}
@keyframes fadein{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
.tp-notes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);padding-top:var(--s-3);border-top:1px dashed #C5CEDA}
.tp-notes li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;font-size:13px;font-weight:600;line-height:1.35}
.tp-notes small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#525F70}
.tp-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-family:var(--font-m);font-size:12px;font-weight:600}
@media (max-width:559px){.tp-notes{grid-template-columns:minmax(0,1fr)}}
.tp-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid #DCE2EA;font-size:14px;color:#2A3445}
.tp-foot b{font-size:17px;font-weight:600;color:var(--c-dark)}
.tp-foot a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--pill);background:var(--base-accent);color:var(--base-on-accent);font-weight:600;font-size:14px;text-decoration:none;transition:background-color var(--dur),transform .18s var(--ease)}
.tp-foot a:hover{background:var(--base-accent2);transform:translateY(-1px)}
.tp-foot a:focus-visible{outline-color:var(--base-accent)}

/* ---------- mẫu sản phẩm ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:var(--tap);padding:0 18px;border-radius:var(--pill);border:1px solid var(--line-2);background:#FFFFFF;font-size:14px;font-weight:600;color:var(--ink-2);transition:background-color var(--dur),color var(--dur),border-color var(--dur)}
.chip:hover{border-color:var(--base-accent);color:var(--accent-text)}
.chip[aria-pressed="true"]{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent)}
.chip .c{font-family:var(--font-m);font-size:12px;margin-left:6px;opacity:.75}
.lb-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(28px,3vw,40px) clamp(16px,2vw,28px)}
.lb-btn{display:block;width:100%;text-align:left;border-radius:var(--r-xl)}
.lb-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--soft);border-radius:var(--r-xl);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.lb-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.lb-btn:hover .lb-img{transform:translateY(-4px);box-shadow:var(--shadow)}
.lb-btn:hover .lb-img img{transform:scale(1.04)}
.lb-tag{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:600}
.lb-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s-3);padding:var(--s-3) 4px 0}
.lb-body .meta{grid-column:1/-1}
.lb-body b{font-family:var(--font-h);font-weight:var(--h-weight);font-size:22px;letter-spacing:-.025em;text-transform:var(--upper);line-height:1.15}
.lb-body span.fab{grid-column:1;font-size:14.5px;color:var(--muted)}
.lb-go{grid-column:2;grid-row:2/span 2;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--base-accent);color:var(--base-on-accent);transition:transform var(--dur),background-color var(--dur),color var(--dur)}
.lb-btn:hover .lb-go{transform:rotate(-45deg);background:var(--brand);color:var(--on-brand)}
.empty{position:relative;display:grid;justify-items:start;gap:var(--s-3);padding:clamp(28px,4vw,56px);border-radius:var(--r-xl);overflow:hidden}
.empty.scheme-blue{background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:40px 40px}
.empty h3{font-size:clamp(24px,2.4vw,34px);text-transform:var(--upper);max-width:24ch}
.empty p{color:var(--muted);max-width:56ch}
.empty .row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2)}

/* ---------- bảng tính giá: thẻ trắng, trạng thái chọn xanh dương + xanh chanh ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:start}
@media (min-width:1024px){.calc{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,3vw,48px)}}
.calc-steps{display:grid;gap:var(--s-4);min-width:0}
.fs{border:0;margin:0;padding:clamp(18px,2.4vw,30px);min-width:0;background:#FFFFFF;border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.fs-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);width:100%;padding-bottom:var(--s-3);margin-bottom:var(--s-2);border-bottom:1px solid var(--line)}
legend.fs-head{float:left}
legend.fs-head ~ *{clear:both}
.calc-steps > .fs:nth-child(n) .step{display:inline-grid;place-items:center;min-width:38px;height:28px;padding:0 10px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-m);font-size:13px;font-weight:600}
.fs-head h3{font-size:24px;letter-spacing:-.025em;text-transform:var(--upper);color:var(--title)}
.fs-head small{margin-left:auto;font-size:13px;color:var(--muted);text-align:right}
@media (max-width:479px){.fs-head small{flex-basis:100%;margin-left:0;text-align:left}}
.opts{display:grid;gap:6px}
.opt,.check{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--s-3) var(--s-4);align-items:start;padding:15px 14px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:background-color var(--dur),border-color var(--dur)}
.opt:hover,.check:hover{background:var(--bg)}
.opt input,.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.mark{width:22px;height:22px;margin-top:1px;border:1.5px solid var(--line-input);background:#FFFFFF;display:grid;place-items:center;transition:background-color var(--dur),border-color var(--dur),border-width var(--dur)}
.opt .mark{border-radius:50%}
.check .mark{border-radius:6px}
.opt input:checked + .mark{border-width:7px;border-color:var(--base-accent)}
.check input:checked + .mark{background:var(--base-accent);border-color:var(--base-accent)}
.check input:checked + .mark::after{content:"";width:10px;height:5px;border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg) translate(1px,-1px)}
.opt:has(input:checked),.check:has(input:checked){background:color-mix(in srgb, var(--brand) 22%, #FFFFFF);border-color:color-mix(in srgb, var(--base-accent) 55%, transparent)}
.opt:has(input:focus-visible),.check:has(input:focus-visible){outline:2.5px solid var(--focus);outline-offset:1px}
.opt-main b,.check-txt b{display:block;font-size:16px;font-weight:600;line-height:1.4}
.opt-main small,.check-txt small{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.opt-meta,.check-price{text-align:right;font-family:var(--font-m);font-size:15.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.opt-meta small,.check-price small{display:block;margin-top:2px;font-family:var(--font-b);font-weight:400;font-size:12.5px;color:var(--muted)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr));gap:8px;margin-top:var(--s-4)}
.tier{display:grid;gap:2px;min-height:var(--tap);text-align:left;padding:11px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:#FFFFFF;transition:background-color var(--dur),color var(--dur),border-color var(--dur),transform .15s var(--ease)}
.tier:hover{border-color:var(--base-accent);transform:translateY(-1px)}
.tier b{font-family:var(--font-m);font-size:14px;font-weight:600}
.tier span{font-size:12.5px;color:var(--muted)}
.tier[aria-pressed="true"]{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent)}
.tier[aria-pressed="true"] span{color:var(--brand)}
.qty-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-5)}
.qty-row label{font-weight:600}
.qty-row label small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.stepper{display:flex;align-items:stretch;border:1.5px solid var(--line-input);border-radius:var(--pill);background:#FFFFFF;overflow:hidden}
.stepper button{width:52px;font-size:22px;font-weight:600;color:var(--accent-text);transition:background-color var(--dur),color var(--dur)}
.stepper button:hover{background:var(--base-accent);color:var(--base-on-accent)}
.stepper button:disabled{opacity:.3;cursor:not-allowed;background:none;color:var(--ink)}
.stepper input{width:108px;height:52px;border:0;border-inline:1px solid var(--line-2);text-align:center;font-family:var(--font-m);font-size:20px;font-weight:600;background:transparent;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:var(--primary-tint)}
.stepper:focus-within{outline:2.5px solid var(--focus);outline-offset:3px}
.stepper input[aria-invalid="true"]{background:var(--danger-tint);color:var(--danger)}
.hint{margin-top:var(--s-3);font-size:14px;color:var(--muted)}
.hint.warn{color:var(--warn);font-weight:600}
.hint.bad{color:var(--danger);font-weight:600}

/* ---------- chia size ---------- */
.size-box{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:var(--tap)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .sw{position:relative;flex:none;width:46px;height:26px;border-radius:var(--pill);background:var(--line-input);transition:background-color var(--dur)}
.switch .sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.switch input:checked + .sw{background:var(--base-accent)}
.switch input:checked + .sw::after{transform:translateX(20px);background:var(--brand)}
.switch input:focus-visible + .sw{outline:2.5px solid var(--focus);outline-offset:3px}
.sw-txt b{display:block;font-weight:600;font-size:15.5px}
.sw-txt small{display:block;font-size:13px;color:var(--muted)}
.size-panel{margin-top:var(--s-3);padding:var(--s-4);border-radius:var(--r-lg);background:var(--bg)}
.size-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:639px){.size-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sz{display:grid;gap:4px;text-align:center}
.sz span{font-family:var(--font-m);font-weight:600;font-size:13px;color:var(--accent-text)}
.sz input{width:100%;min-height:46px;padding:0 4px;border:1.5px solid var(--line-input);border-radius:var(--r);background:#fff;text-align:center;font-family:var(--font-m);font-size:17px;font-weight:600;-moz-appearance:textfield;appearance:textfield}
.sz input::-webkit-outer-spin-button,.sz input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sz input:focus{outline:none;border-color:var(--base-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--base-accent) 18%, transparent)}
.size-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:var(--s-3)}
.size-sum{font-size:14px;color:var(--ink-2)}
.size-sum b{font-family:var(--font-m);font-size:17px;color:var(--accent-text)}
.size-sum.bad,.size-sum.bad b{color:var(--danger)}
.tier:disabled{opacity:.45;cursor:not-allowed;transform:none}
.qty-row input[readonly]{background:var(--bg);color:var(--ink-2)}

/* ---------- biểu đồ đơn giá theo số lượng ---------- */
.curve{margin-top:var(--s-5);padding:var(--s-4) var(--s-4) var(--s-3);border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line)}
.curve-head b{display:block;font-family:var(--font-h);font-size:17px;letter-spacing:-.02em;color:var(--title)}
.curve-head small{display:block;font-size:13px;color:var(--muted)}
.curve-plot{margin-top:var(--s-2);touch-action:pan-y;user-select:none}
.curve-plot svg{display:block;width:100%;height:auto;overflow:visible}
.curve .band{fill:color-mix(in srgb, var(--base-accent) 4%, transparent)}
.curve .band.alt{fill:color-mix(in srgb, var(--base-accent) 8%, transparent)}
.curve .band-t{fill:var(--accent-text);font-family:var(--font-m);font-size:12px;font-weight:600;text-anchor:middle}
.curve .axis{stroke:var(--line-2);stroke-width:1}
.curve .yl{fill:var(--muted);font-family:var(--font-m);font-size:12px;text-anchor:end}
.curve .xl{fill:var(--muted);font-family:var(--font-m);font-size:12px;text-anchor:middle}
.cv-s1{stop-color:var(--base-accent);stop-opacity:.22}.cv-s2{stop-color:var(--base-accent);stop-opacity:0}
.cv-area{fill:url(#cv-g)}
.cv-line{fill:none;stroke:var(--base-accent);stroke-width:2.6;stroke-linejoin:round}
.cv-now line{stroke:var(--c-dark);stroke-width:1;stroke-dasharray:3 3}
.cv-now circle{fill:var(--brand);stroke:var(--c-dark);stroke-width:2.5;transition:cx .2s var(--ease),cy .2s var(--ease)}
.cv-tip rect{fill:var(--c-dark)}
.cv-tip text{fill:#fff;font-family:var(--font-m);font-size:12px;font-weight:600;text-anchor:middle}
.cv-hover line{stroke:var(--base-accent);stroke-width:1;opacity:.5}
.cv-hover circle{fill:#fff;stroke:var(--base-accent);stroke-width:2.5}
.cv-hover .cv-tip rect{fill:var(--base-accent)}
.cv-hit{fill:transparent;cursor:crosshair}
.curve.is-locked .curve-plot{opacity:.5;pointer-events:none}
.curve-slider{display:block;width:100%;margin:var(--s-2) 0 0;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.curve-slider::-webkit-slider-runnable-track{height:6px;border-radius:var(--pill);background:linear-gradient(90deg,var(--base-accent),color-mix(in srgb, var(--base-accent) 25%, var(--line)))}
.curve-slider::-moz-range-track{height:6px;border-radius:var(--pill);background:linear-gradient(90deg,var(--base-accent),color-mix(in srgb, var(--base-accent) 25%, var(--line)))}
.curve-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--brand);border:2.5px solid var(--c-dark);box-shadow:0 2px 6px rgba(16,24,40,.25)}
.curve-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--brand);border:2.5px solid var(--c-dark)}
.curve-slider:focus-visible{outline:2.5px solid var(--focus);outline-offset:4px;border-radius:var(--pill)}
.curve-slider:disabled{opacity:.4;cursor:not-allowed}

/* ---------- xưởng thử áo ---------- */
.studio{display:grid;gap:var(--s-5);margin-top:var(--s-3)}
@media (min-width:760px){.studio{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}}
/* phông nền như chụp studio: sáng ở giữa, tối dần ra mép */
.st-stage{position:relative;display:grid;gap:10px;padding:12px;border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(ellipse 75% 65% at 50% 40%,#FFFFFF 0,#F4F5F7 48%,#E2E5EA 100%)}
@media (min-width:1024px){.st-stage{position:sticky;top:calc(var(--head-h) + 16px)}}
.st-views{display:inline-flex;justify-self:center;gap:2px;padding:3px;border-radius:var(--pill);background:#fff;box-shadow:var(--shadow-sm)}
.st-views button{min-height:36px;padding:0 14px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.st-views button[aria-pressed="true"]{background:var(--base-accent);color:var(--base-on-accent)}
.st-art{display:grid;place-items:center}
.garment{display:block;width:100%;max-height:420px}
.g-photo{position:relative;width:100%;max-width:360px;aspect-ratio:428/500;margin:0 auto}
.g-photo canvas,.g-photo .g-ui{position:absolute;inset:0;width:100%;height:100%;max-height:none}
.g-photo canvas{filter:drop-shadow(0 22px 22px rgba(4,10,30,.28)) drop-shadow(0 3px 4px rgba(4,10,30,.18));transition:opacity .35s}
.g-photo.is-loading canvas{opacity:0}
.g-photo.is-loading::before{content:"";position:absolute;inset:18% 22%;border-radius:40% 40% 12% 12%;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--ink) 8%,transparent) 50%,transparent 70%) 0 0/220% 100%;animation:gshim 1.2s linear infinite}
@keyframes gshim{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.g-photo.is-loading::before{animation:none}}
.zone{cursor:pointer}
.zone rect{fill:transparent;stroke:var(--base-accent);stroke-width:1.6;stroke-dasharray:6 4;transition:fill .2s,stroke .2s,opacity .2s}
.zone:hover rect{fill:color-mix(in srgb, var(--brand) 35%, transparent)}
.zone.is-on rect{fill:color-mix(in srgb, var(--brand) 50%, transparent);stroke-dasharray:none;stroke-width:2}
/* đã có logo: ẩn khung để nhìn như áo in thật; rê chuột vào áo mới hiện lại khung */
.zone.has-logo rect{fill:transparent;stroke:transparent}
.st-art:hover .zone.has-logo rect{stroke:var(--brand);stroke-dasharray:5 4}
.zone-pin{transition:opacity .2s}
.zone:not(.is-on) rect{opacity:.6}
.zone.has-logo .zone-pin,.zone:not(.is-on) .zone-pin{opacity:0}
.st-art:hover .zone .zone-pin,.st-art:hover .zone rect{opacity:1}
.zone-pin circle{fill:var(--base-accent);stroke:#fff;stroke-width:2}
.zone-pin text{fill:#fff;font-family:var(--font-m);font-size:12px;font-weight:600;text-anchor:middle}
.zone.is-on .zone-pin circle{fill:var(--brand);stroke:var(--c-dark)}
.zone.is-on .zone-pin text{fill:var(--c-dark)}
.st-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;font-size:12.5px;color:var(--muted);text-align:center}
.st-ctrl{display:grid;gap:var(--s-5)}
.st-label{font-size:14px;font-weight:600;margin-bottom:10px}
.st-label b{font-weight:500;color:var(--muted)}
.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sw-opt{position:relative;cursor:pointer}
.sw-opt input{position:absolute;opacity:0;width:1px;height:1px}
.sw-opt .dot{display:block;width:36px;height:36px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(16,24,40,.18);transition:transform .15s var(--ease)}
.sw-opt:hover .dot{transform:scale(1.08)}
.sw-opt input:checked + .dot{box-shadow:inset 0 0 0 1px rgba(16,24,40,.18),0 0 0 3px #fff,0 0 0 5px var(--base-accent)}
.sw-opt input:focus-visible + .dot{outline:2.5px solid var(--focus);outline-offset:5px}
.dot-none{background:linear-gradient(135deg,transparent 45%,var(--line-input) 45% 55%,transparent 55%),#fff!important}
.dot-custom{background:var(--c,conic-gradient(#e53935,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935))!important}
#g-custom{width:36px;height:36px;padding:0;border:1px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer}
/* mẫu áo (mockup ảnh) */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.md-opt{position:relative;display:grid;gap:4px;padding:6px 6px 8px;border-radius:calc(var(--r-lg) * .6);border:1px solid var(--line-2);background:#fff;cursor:pointer;text-align:center;transition:border-color var(--dur),box-shadow var(--dur)}
.md-opt input{position:absolute;opacity:0;width:1px;height:1px}
.md-thumb{display:block;border-radius:calc(var(--r-lg) * .45);background:radial-gradient(ellipse 80% 70% at 50% 40%,#fff 0,#EEF0F3 100%)}
.md-thumb img{display:block;width:100%;height:auto;aspect-ratio:428/500;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(4,10,30,.18))}
.md-name{font-size:12.5px;font-weight:600;line-height:1.25}
.md-opt:hover{border-color:var(--base-accent)}
.md-opt:has(input:checked){border-color:var(--base-accent);box-shadow:0 0 0 2px var(--base-accent)}
.md-opt:has(input:focus-visible){outline:2.5px solid var(--focus);outline-offset:2px}
.pl-list{display:flex;flex-wrap:wrap;gap:8px}
.pl-chip{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 14px 0 6px;border-radius:var(--pill);border:1px solid var(--line-2);background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background-color var(--dur),color var(--dur),border-color var(--dur)}
.pl-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pl-chip small{font-weight:500;opacity:.75}
.pl-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);font-family:var(--font-m);font-size:12px;font-weight:600;color:var(--brand)}
.pl-chip:hover{border-color:var(--base-accent)}
.pl-chip:has(input:checked){background:var(--base-accent);border-color:var(--base-accent);color:#fff}
.pl-chip:has(input:checked) .pl-n{background:var(--brand);color:var(--on-brand)}
.pl-chip:has(input:focus-visible){outline:2.5px solid var(--focus);outline-offset:2px}
.logo-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.logo-up{cursor:pointer}
.logo-up svg{transform:rotate(-90deg)}
.logo-up:has(input:focus-visible){outline:2.5px solid var(--focus);outline-offset:3px}
.logo-scale{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13.5px;color:var(--muted)}
.logo-scale input{flex:1;accent-color:var(--base-accent)}
.st-note{margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted)}
.st-price{padding:12px 14px;border-radius:var(--r);background:color-mix(in srgb, var(--brand) 18%, #fff);color:var(--ink-2)}
.q-spec{padding:10px 12px;border-radius:var(--r);background:color-mix(in srgb, #FFFFFF 10%, var(--bg));font-size:13.5px;line-height:1.5;color:var(--ink)}
.cfg-spec{display:block;margin-top:4px;font-size:13px;font-weight:500;color:var(--muted)}
.draft-note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:var(--s-4);padding:10px 14px;border-radius:var(--r);background:var(--ok-tint);color:var(--ok);font-size:14px;font-weight:500}
.draft-note .link{margin-left:auto;font-size:13.5px;color:var(--ink)}

/* phiếu dự toán: khối xanh dương, tổng tiền xanh chanh */
.quote{min-width:0}
@media (min-width:1024px){.quote{position:sticky;top:calc(var(--head-h) + 24px)}}
.quote-card{position:relative;display:grid;gap:var(--s-4);padding:clamp(22px,2.6vw,34px);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate}
.quote-card::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
.quote-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2)}
.quote-head h3{font-size:28px;letter-spacing:-.03em;text-transform:var(--upper)}
.est-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);border:1px solid color-mix(in srgb, var(--ink) 45%, transparent);color:var(--ink);font-size:12.5px;font-weight:600}
.est-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand)}
.quote-rows{display:grid;font-size:14.5px;border-top:1px solid var(--line)}
.quote-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:11px 0;border-bottom:1px solid var(--line)}
.quote-rows dt{color:var(--muted);flex:none}
.quote-rows dd{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.breakdown{display:grid;gap:8px;font-size:14px}
.breakdown > div{display:flex;justify-content:space-between;gap:var(--s-4)}
.breakdown dt{color:var(--ink-2);min-width:0}
.breakdown dt small{display:block;font-size:12.5px;color:var(--muted)}
.breakdown dd{font-family:var(--font-m);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.breakdown .disc dd{color:var(--brand)}
.quote-unit{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding-top:var(--s-3);border-top:1px dashed var(--line-2)}
.quote-unit span{font-size:14px;color:var(--muted)}
.quote-unit b{font-family:var(--font-m);font-weight:600;font-size:19px}
.quote-total{display:grid;gap:4px;padding:var(--s-4) var(--s-5);margin-inline:calc(var(--s-2) * -1);border-radius:var(--r-lg);background:color-mix(in srgb, var(--base-accent2) 55%, var(--bg))}
.quote-total span{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.quote-total b{font-family:var(--font-m);font-weight:600;font-size:clamp(38px,4vw,56px);letter-spacing:-.05em;line-height:1.05;color:var(--brand);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.quote-total small{font-size:13.5px;color:var(--ink);font-weight:600;min-height:1.2em}
.quote-lead{display:flex;gap:var(--s-3);align-items:flex-start;font-size:14px;color:var(--ink-2)}
.quote-lead [data-icon]{color:var(--brand);margin-top:1px}
.quote-note{font-size:13px;line-height:1.55;color:var(--muted)}
.quote-invalid{padding:var(--s-4);border-radius:var(--r);background:var(--warn-tint);color:var(--warn);font-size:14px}
.scheme-blue .quote-invalid{background:color-mix(in srgb, #FFFFFF 12%, var(--bg));color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.quote-tools{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:calc(var(--s-2) * -1)}
.quote-tools .btn{flex:1 1 140px;min-height:42px;border-color:color-mix(in srgb, var(--ink) 35%, transparent);color:var(--ink)}
.quote-tools .btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.print-head{display:none}

/* ---------- form gửi yêu cầu ---------- */
.order-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:1024px){.order-wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3vw,48px)}.order-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.order-side{padding:clamp(24px,3vw,40px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.order-side::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.order-side.scheme{position:relative}
@media (min-width:1024px){.order-side.scheme{position:sticky}}
.order-side .h2{font-size:clamp(34px,3.8vw,56px)}
.order-side .sec-intro{margin-top:var(--s-4)}
.next-steps{list-style:none;margin-top:var(--s-6);display:grid;gap:var(--s-2);counter-reset:s}
.next-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px var(--s-3);padding:var(--s-4);border-radius:var(--r-lg);background:color-mix(in srgb, #FFFFFF 9%, var(--bg));counter-increment:s}
.next-steps li:nth-child(n)::before{content:"0" counter(s);grid-row:span 2;align-self:start;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-family:var(--font-m);font-weight:600;font-size:14px;background:var(--brand);color:var(--on-brand)}
.next-steps b{font-weight:600}
.next-steps span{font-size:14.5px;color:var(--muted)}
.side-contact{margin-top:var(--s-5);font-size:15px;color:var(--muted)}
.side-contact .link{color:var(--ink);text-decoration-color:var(--brand)}
.side-contact .link:hover{color:var(--brand)}
.order-card{position:relative;background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3.4vw,44px);box-shadow:var(--shadow)}
.form-sec{display:grid;gap:var(--s-4)}
.form-sec + .form-sec{margin-top:var(--s-6)}
.form-sec h3{display:flex;align-items:center;gap:10px;font-family:var(--font-b);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.form-sec h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--base-accent) 18%, transparent)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) var(--s-5)}
@media (max-width:639px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid .full{grid-column:1/-1}
.f{display:grid;gap:6px;align-content:start;min-width:0}
.f label{font-size:14px;font-weight:600}
.req{color:var(--danger);margin-left:2px}
.f .optional{color:var(--muted);font-weight:400;font-size:13px}
.f .help{font-size:13px;color:var(--muted)}
.f input,.f select,.f textarea{width:100%;min-height:52px;padding:12px 16px;border:1.5px solid var(--line-input);border-radius:var(--r);background:var(--soft);font-size:16px;transition:border-color var(--dur),box-shadow var(--dur),background-color var(--dur)}
.f select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.f textarea{min-height:120px;resize:vertical;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:color-mix(in srgb, var(--ink) 52%, var(--bg))}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-2)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--base-accent);background-color:#FFFFFF;box-shadow:0 0 0 4px color-mix(in srgb, var(--base-accent) 20%, transparent)}
.f [aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent)!important}
.err{display:flex;gap:6px;align-items:flex-start;font-size:13.5px;font-weight:600;color:var(--danger)}
.err::before{content:"!";display:grid;place-items:center;flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--danger);color:#FFFFFF;font-size:12px;font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);border:1.5px dashed color-mix(in srgb, var(--base-accent) 40%, transparent);background:color-mix(in srgb, var(--base-accent) 4%, #FFFFFF)}
.summary .meta{grid-column:1/-1}
.summary .cfg{font-size:14.5px;font-weight:600}
.summary .sum-total{text-align:right}
.summary .sum-total b{display:block;font-family:var(--font-m);font-weight:600;font-size:23px;letter-spacing:-.03em;color:var(--accent-text)}
.summary .sum-total small{font-size:12px;color:var(--muted)}
.summary .edit{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;min-height:32px;font-size:14px}
@media (max-width:479px){.summary{grid-template-columns:minmax(0,1fr)}.summary .sum-total{text-align:left}}
.form-error{display:grid;gap:4px;margin-top:var(--s-5);padding:14px 16px;border-radius:var(--r);background:var(--danger-tint);border-left:4px solid var(--danger);color:var(--ink);font-size:14.5px}
.form-error b{color:var(--danger)}
.form-error a{color:inherit;font-weight:600}
.form-error .err-list{margin:4px 0 0;padding-left:18px;display:grid;gap:2px}
.form-error .err-list a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.privacy{display:flex;align-items:flex-start;gap:8px;flex:1 1 260px;font-size:13.5px;color:var(--muted)}
.privacy [data-icon]{color:var(--accent-text);margin-top:1px}
@media (max-width:479px){.form-foot .btn{width:100%}}
.req-note{font-size:13px;color:var(--muted);margin-bottom:var(--s-5)}

/* gửi thành công */
.done{display:grid;gap:var(--s-4);outline:none}
.done-badge{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--brand);color:var(--on-brand)}
.done h3{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.035em;text-transform:var(--upper);color:var(--title)}
.done > p{color:var(--ink-2);max-width:56ch}
.code-box{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand)}
.code-box .meta{grid-column:1/-1;color:var(--on-brand)}
.code-box b{font-family:var(--font-m);font-weight:600;font-size:clamp(28px,3.2vw,38px);letter-spacing:.03em;overflow-wrap:anywhere}
.code-box .btn-ghost{border-color:var(--on-brand);color:var(--on-brand);--spin:var(--on-brand)}
.code-box .btn-ghost:hover{background:var(--on-brand);color:var(--brand)}
@media (max-width:479px){.code-box{grid-template-columns:minmax(0,1fr)}.code-box .btn{width:100%}}
.done-steps{list-style:none;display:grid;gap:var(--s-2);font-size:15px;color:var(--ink-2);counter-reset:d}
.done-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);counter-increment:d}
.done-steps li::before{content:counter(d) ".";font-family:var(--font-m);font-size:14px;font-weight:600;color:var(--accent-text);padding-top:1px}
.done-act{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:479px){.done-act .btn{width:100%}}
.done-note{font-size:14px;color:var(--muted)}

/* ---------- hỏi đáp: nền trắng, đường kẻ mảnh ---------- */
#faq{background:#FFFFFF}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:1024px){.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(40px,6vw,96px)}.faq-side{position:sticky;top:calc(var(--head-h) + 32px);align-self:start}}
.faq-side .sec-intro{margin-top:var(--s-4)}
.contact-lines{display:grid;gap:var(--s-2);margin-top:var(--s-5)}
.contact-line{display:flex;align-items:center;gap:var(--s-3);min-height:var(--tap);padding:8px 14px 8px 8px;border-radius:var(--pill);background:var(--bg);text-decoration:none;font-weight:600;justify-self:start;transition:background-color var(--dur)}
.contact-line:hover{background:color-mix(in srgb, var(--brand) 22%, #FFFFFF)}
.contact-line [data-icon]{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--base-accent);color:var(--brand);transition:transform var(--dur)}
.contact-line:hover [data-icon]{transform:rotate(-12deg)}
.contact-line small{display:block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-5);min-height:72px;padding:var(--s-4) 0;cursor:pointer;list-style:none;font-family:var(--font-h);font-weight:600;font-size:clamp(18px,1.7vw,22px);letter-spacing:-.025em;text-transform:var(--upper);line-height:1.25;transition:color var(--dur)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-text)}
.qa summary:focus-visible{outline-offset:-2px}
.qa summary i{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--soft);color:var(--accent-text);transition:transform .25s var(--ease),background-color var(--dur),color var(--dur)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s var(--ease)}
.qa summary:hover i{background:var(--base-accent);color:var(--base-on-accent)}
.qa[open] summary i{background:var(--brand);color:var(--on-brand);transform:rotate(180deg)}
.qa[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.qa-a{padding:0 60px var(--s-5) 0;color:var(--ink-2);font-size:16px;line-height:1.7;max-width:70ch}

/* ---------- chân trang: cobalt ---------- */
.site-foot{padding-block:var(--s-8) var(--s-6);overflow:hidden}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
@media (min-width:480px) and (max-width:759px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
.foot-brand img{height:28px;width:auto}
.foot-brand p{margin-top:var(--s-4);max-width:36ch;color:var(--muted);font-size:15px}
.foot-h{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--s-4)}
.foot-list{list-style:none;display:grid;gap:var(--s-3);font-size:15px}
.foot-list li span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.foot-list a{text-decoration:none;font-weight:600;transition:color var(--dur)}
.foot-list a:hover{color:var(--brand)}
.foot-list b{font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-5);margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:1023px){body.home.has-mbar .site-foot{padding-bottom:112px}}
/* tên thương hiệu cỡ lớn ở chân trang: chữ đặc tông trầm */
.foot-mark{display:block;margin-top:var(--s-7);font-family:var(--font-h);font-weight:var(--h-weight);font-size:18vw;line-height:.86;width:max-content;max-width:none;letter-spacing:-.055em;white-space:nowrap;color:color-mix(in srgb, #FFFFFF 7%, var(--bg));user-select:none;transition:color .6s var(--ease)}
.site-foot:hover .foot-mark{color:color-mix(in srgb, var(--brand) 22%, var(--bg))}

/* ---------- thanh dự toán dính đáy (điện thoại) ---------- */
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:8px 8px 8px 20px;border-radius:var(--pill);background:var(--base-accent);color:var(--base-on-accent);box-shadow:0 18px 40px -16px rgba(4,20,80,.6);transform:translateY(160%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
.mbar.show{transform:none;visibility:visible;transition:transform .3s var(--ease)}
.mbar small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.mbar b{font-family:var(--font-m);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--brand)}
.mbar .btn{min-height:46px;background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
@media (min-width:1024px){.mbar{display:none}}

/* ---------- nút liên hệ nổi: Chat Zalo (xanh dương) + Gọi điện (xanh chanh), góc dưới bên phải ---------- */
.dock{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;display:grid;gap:12px;justify-items:end;transition:bottom .3s var(--ease);animation:dock-in .5s .6s var(--ease) both}
@keyframes dock-in{from{opacity:0;transform:translateY(16px)}}
.dock-btn{position:relative;display:grid;place-items:center;align-content:center;gap:2px;width:60px;height:60px;border-radius:50%;text-decoration:none;
  box-shadow:0 0 0 3px #FFFFFF,0 16px 30px -12px rgba(4,20,80,.55);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.dock-btn .ic{width:24px;height:24px;stroke-width:1.9}
.dock-lbl{font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.02em}
.dock-zalo{background:var(--base-accent);color:var(--base-on-accent)}
.dock-call{background:var(--brand);color:var(--on-brand)}
.dock-wa{background:var(--base-accent2);color:var(--base-on-accent2)}
.dock-wa .dock-lbl{font-size:9.5px;letter-spacing:0}
.dock-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 3px #FFFFFF,0 20px 36px -12px rgba(4,20,80,.6)}
.dock-btn:focus-visible{outline:3px solid var(--base-accent);outline-offset:4px;border-radius:50%}
.dock-tip{position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);opacity:0;pointer-events:none;white-space:nowrap;padding:9px 16px;border-radius:var(--pill);
  background:var(--c-dark);color:#FFFFFF;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.dock-tip b{color:var(--brand);font-weight:600}
.dock-btn:hover .dock-tip,.dock-btn:focus-visible .dock-tip{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.dock-tip{display:none}}
html.menu-open .dock{visibility:hidden}
/* điện thoại/máy tính bảng: đứng phía trên thanh dự toán dính đáy */
@media (max-width:1023px){body:has(.mbar.show) .dock{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
@media (max-width:639px){.dock{gap:8px;right:max(12px,env(safe-area-inset-right,0px))}.dock-btn{width:50px;height:50px}.dock-btn .ic{width:21px;height:21px}.dock-lbl{font-size:9.5px}.dock-wa .dock-lbl{font-size:8.5px}}
/* điện thoại: đang gõ trong ô nhập (bàn phím mở) → tạm ẩn nút nổi để không che ô */
@media (max-width:759px){body:has(input:is([type=text],[type=tel],[type=email],[type=url],[type=number],:not([type])):focus,textarea:focus,select:focus) .dock{opacity:0;visibility:hidden}}

/* ---------- chọn ngôn ngữ: nút VI | EN ở đầu trang ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--pill);background:var(--soft);flex:none}
.lang-switch a{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 10px;border-radius:var(--pill);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);text-decoration:none;transition:background-color var(--dur),color var(--dur)}
.lang-switch a:hover{color:var(--accent-text);background:#FFFFFF}
.lang-switch a[aria-current="true"]{background:var(--base-accent);color:var(--base-on-accent)}
@media (max-width:479px){.ls-head a{min-width:32px;height:32px;padding:0 7px;font-size:12px}.ls-head{padding:2px}}
@media (max-width:359px){.head-act{gap:6px}}
.mmenu-lang{display:flex;align-items:center;gap:10px;padding:12px 0 4px;color:var(--muted);font-size:15px;font-weight:600}
.mmenu-lang .lang-switch{margin-left:auto}
.mmenu-lang .lang-switch a{min-width:52px;height:40px}
/* lần đầu vào website (trình duyệt không dùng tiếng Việt): thẻ gợi ý bản tiếng Anh, không chặn trang */
.lang-hint{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;max-width:min(420px,calc(100vw - 104px));padding:10px 10px 10px 14px;border-radius:var(--r-lg);background:var(--base-accent2,#0B1834);color:#FFFFFF;font-size:14px;line-height:1.35;box-shadow:var(--shadow-lg);animation:rise .3s var(--ease)}
.lang-hint .lh-go{color:#FFFFFF;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lang-hint .lh-x{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#FFFFFF;font-size:20px;line-height:1;cursor:pointer}
.lang-hint .lh-x:hover{background:rgba(255,255,255,.26)}
.lang-hint :focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
@media (max-width:639px){.lang-hint{left:12px;max-width:calc(100vw - 88px);font-size:13.5px}.lang-hint > svg{display:none}}
@media (max-width:1023px){body:has(.mbar.show) .lang-hint{bottom:calc(86px + env(safe-area-inset-bottom,0px))}}
@media print{.lang-hint{display:none!important}}
/* (cũ) hộp chọn ngôn ngữ dạng hộp thoại — không còn dùng */
dialog.lang-pick{padding:0;border:0;background:transparent;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);color:var(--ink)}
dialog.lang-pick::backdrop{background:color-mix(in srgb, var(--base-accent2) 78%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.lang-pick[open]{animation:rise .3s var(--ease)}
.lp-box{position:relative;display:grid;gap:var(--s-4);padding:clamp(24px,4vw,40px);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);overflow:hidden;isolation:isolate}
.lp-box::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.lp-kicker{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.lang-pick h2{font-size:clamp(30px,5vw,44px);line-height:1.08;letter-spacing:-.04em}
.lang-pick h2 .lp-en{display:block;color:var(--brand)}
.lp-opts{display:grid;gap:10px;margin-top:var(--s-2)}
.lp-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:12px 18px 12px 12px;border-radius:var(--r-lg);text-align:left;
  background:color-mix(in srgb, #FFFFFF 10%, var(--bg));color:var(--ink);border:1.5px solid color-mix(in srgb, #FFFFFF 22%, transparent);transition:background-color var(--dur),border-color var(--dur),transform .18s var(--ease)}
.lp-opt:hover{transform:translateY(-2px);border-color:#FFFFFF}
.lp-opt.is-suggested{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.lp-code{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#FFFFFF;color:var(--base-accent);font-family:var(--font-m);font-weight:600;font-size:16px;letter-spacing:.04em}
.lp-opt.is-suggested .lp-code{background:var(--on-brand);color:var(--brand)}
.lp-txt b{display:block;font-family:var(--font-h);font-size:21px;letter-spacing:-.02em;line-height:1.2}
.lp-txt small{display:block;margin-top:2px;font-size:14px;opacity:.85}
.lp-arr{font-size:20px}
.lp-opt:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.lp-opt.is-suggested:focus-visible{outline-color:#FFFFFF}
.lp-note{font-size:13.5px;color:var(--muted)}

/* ---------- hộp chi tiết mẫu (dialog) ---------- */
dialog.modal{padding:0;border:0;background:transparent;max-width:min(980px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);color:var(--ink)}
dialog.modal::backdrop{background:color-mix(in srgb, var(--base-accent2) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
dialog.modal[open]{animation:rise .25s var(--ease)}
@keyframes rise{from{transform:translateY(12px);opacity:0}}
.modal-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;background:#FFFFFF;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
@media (min-width:860px){.modal-box{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.modal-img{height:100%;min-height:420px}}
.modal-img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft)}
.modal-body{display:grid;gap:var(--s-4);align-content:start;padding:clamp(22px,3vw,36px);padding-top:clamp(56px,6vw,64px)}
.modal-body h3{font-size:clamp(28px,2.8vw,38px);letter-spacing:-.035em;text-transform:var(--upper);color:var(--title)}
.modal-x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:50%;background:var(--base-accent);color:var(--base-on-accent);transition:transform var(--dur)}
.modal-x:hover{transform:rotate(90deg)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border-top:1px solid var(--line)}
.kv div{padding:10px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin-top:2px;font-weight:600}
.m-list{list-style:none;display:grid;gap:8px}
.m-list li{position:relative;padding-left:20px;color:var(--ink-2)}
.m-list li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--base-accent)}
.modal-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--line)}
.modal-nav .pos{font-family:var(--font-m);font-size:13px;color:var(--muted)}
.modal-body .btn-primary{justify-self:start}

/* ---------- thông báo ---------- */
.toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:90;display:grid;gap:8px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);pointer-events:none}
.toast{padding:12px 18px;border-radius:var(--r);background:var(--c-dark);color:#FFFFFF;box-shadow:inset 4px 0 0 var(--brand),var(--shadow);font-size:14.5px;font-weight:600;transform:translateY(10px);opacity:0;transition:transform .3s var(--ease),opacity .3s}
.toast.err{background:#C4262E;color:#fff;box-shadow:var(--shadow)}
.toast.on{transform:none;opacity:1}

/* =========================================================
   Trang tra cứu đơn hàng
   ========================================================= */
.track-page{padding-block:clamp(28px,4vw,56px) var(--sec-y)}
.track-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:start}
@media (min-width:1024px){.track-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,40px)}.track-side{position:sticky;top:calc(var(--head-h) + 24px)}}
.track-side{position:relative;padding:clamp(24px,3vw,40px);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.track-side::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--gridline) 1px,transparent 1px),linear-gradient(90deg,var(--gridline) 1px,transparent 1px);background-size:36px 36px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%)}
.track-side .kicker{color:var(--brand)}
.track-side h1{font-size:clamp(40px,4.8vw,68px);line-height:1.04;letter-spacing:-.045em;text-transform:var(--upper)}
.track-side h1::after{content:"";display:block;width:72px;height:8px;margin-top:16px;border-radius:var(--pill);background:var(--brand)}
.track-side .sec-intro{margin-top:var(--s-4)}
.track-form{display:grid;gap:var(--s-4);margin-top:var(--s-6);padding:clamp(20px,2.8vw,28px);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.track-help{margin-top:var(--s-5);font-size:14.5px;color:var(--muted)}
.track-help a{color:var(--brand);font-weight:600}
.result{min-width:0}
.res-panel{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow)}
.res-empty{display:grid;gap:var(--s-5);padding:clamp(24px,3vw,40px)}
.res-empty h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.035em;text-transform:var(--upper);color:var(--title)}
.res-empty p{color:var(--muted)}
.where{list-style:none;display:grid;border-top:1px solid var(--line)}
.where li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s-3);align-items:start;padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.where li [data-icon]{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb, var(--base-accent) 9%, #FFFFFF);color:var(--accent-text)}
.code-sample{display:inline-block;padding:1px 8px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);font-family:var(--font-m);font-size:.92em;font-weight:600}
.skeleton{position:relative;overflow:hidden;background:var(--line);border-radius:var(--r-sm)}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb, #FFFFFF 60%, transparent),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.res-loading{display:grid;gap:var(--s-4);padding:clamp(24px,3vw,40px)}
.res-error{display:grid;gap:var(--s-4);justify-items:start;padding:clamp(24px,3vw,40px)}
.res-error .err-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--danger);color:#FFFFFF}
.res-error.is-net .err-ic,.res-error.is-limit .err-ic{background:var(--warn)}
.res-error h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.03em;text-transform:var(--upper)}
.res-error p{color:var(--ink-2);max-width:56ch}
.res-error ul{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--ink-2)}
.res-error ul li{position:relative;padding-left:20px}
.res-error ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--base-accent)}
/* đầu kết quả: khối xanh dương, chữ trắng; xong → xanh chanh chữ navy; huỷ → xám nhạt */
.res-status{--bg:var(--base-accent);--ink:var(--base-on-accent);--muted:color-mix(in srgb, var(--ink) 80%, var(--bg));--line:color-mix(in srgb, var(--ink) 20%, var(--bg));--focus-c:var(--brand);
  position:relative;display:grid;gap:var(--s-3);padding:clamp(22px,3vw,36px);background:var(--bg);color:var(--ink);color-scheme:dark;isolation:isolate;overflow:hidden}
.res-status::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb, currentColor 9%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, currentColor 9%, transparent) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.res-status .meta{color:var(--muted)}
.res-status .row1{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-2) var(--s-4)}
.res-code{font-family:var(--font-m);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.res-status h2{display:flex;align-items:center;gap:var(--s-3);font-size:clamp(32px,3.8vw,50px);line-height:1.08;letter-spacing:-.04em;text-transform:var(--upper)}
.res-status h2 [data-icon]{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--on-brand);flex:none}
.res-status p{font-size:15px;font-weight:500}
.res-status.is-done{--bg:var(--brand);--ink:var(--on-brand);--focus-c:var(--base-accent);color-scheme:light}
.res-status.is-done h2 [data-icon]{background:var(--base-accent);color:var(--base-on-accent)}
.res-status.is-cancelled{--bg:var(--soft);--ink:var(--c-dark);--focus-c:var(--base-accent);color-scheme:light}
.res-status.is-cancelled h2 [data-icon]{background:#C4262E;color:#fff}
.res-body{display:grid;gap:var(--s-6);padding:clamp(22px,3vw,36px)}
.res-sec h3{font-family:var(--font-b);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--s-3)}
.eta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line)}
.eta small{display:block;font-size:13px;color:var(--muted)}
.eta b{font-family:var(--font-h);font-weight:var(--h-weight);font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;color:var(--title)}
.eta .left{font-family:var(--font-m);font-size:13.5px;font-weight:600;padding:6px 12px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);white-space:nowrap}
.eta .left.late{background:var(--warn);color:#FFFFFF}
.eta.pending b{font-family:var(--font-b);font-weight:500;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
@media (max-width:479px){.eta{grid-template-columns:minmax(0,1fr)}.eta .left{justify-self:start}}
.steps{list-style:none;display:grid}
.steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px var(--s-3);align-items:start;padding-bottom:var(--s-5)}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:1.5px;background:var(--line-2)}
.steps li:last-child::before{display:none}
.steps li.done::before{background:var(--base-accent)}
.s-dot{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-input);background:#FFFFFF;font-family:var(--font-m);font-size:12px;font-weight:600;color:var(--muted)}
.steps li.done .s-dot{background:var(--base-accent);border-color:var(--base-accent);color:var(--brand)}
.steps li.current .s-dot{border:3px solid var(--base-accent);color:var(--base-accent);box-shadow:0 0 0 5px color-mix(in srgb, var(--brand) 55%, transparent)}
.steps li.current .s-dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--base-accent)}
.steps li.current .s-dot:has(svg)::after{display:none}
.steps li.skipped .s-dot{border-style:dashed}
.s-label{font-weight:600;padding-top:8px}
.steps li.todo .s-label,.steps li.skipped .s-label{font-weight:500;color:var(--muted)}
.s-state{grid-column:2;font-size:13px;color:var(--muted)}
.steps li.current .s-state{color:var(--accent-text);font-weight:600}
.s-date{grid-row:1;grid-column:3;padding-top:9px;font-family:var(--font-m);font-size:12.5px;color:var(--muted);white-space:nowrap}
.msg-card{display:grid;gap:6px;padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);background:color-mix(in srgb, var(--base-accent) 6%, #FFFFFF);box-shadow:inset 4px 0 0 var(--base-accent)}
.msg-card small{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.msg-card p{white-space:pre-line}
.res-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:519px){.res-details{grid-template-columns:minmax(0,1fr)}}
.res-details div{padding:12px var(--s-4) 12px 0;border-bottom:1px solid var(--line);min-width:0}
.res-details dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.res-details dd{margin-top:2px;font-weight:600;overflow-wrap:anywhere}
.res-details dd.big{font-family:var(--font-m);font-weight:600;font-size:24px;letter-spacing:-.03em;color:var(--accent-text)}
.res-note{margin-top:var(--s-3);font-size:13px;color:var(--muted)}
.res-act{display:flex;flex-wrap:wrap;gap:var(--s-3);padding-top:var(--s-5);border-top:1px solid var(--line)}
@media (max-width:479px){.res-act .btn{width:100%}}

/* =========================================================
   Trang 404
   ========================================================= */
.nf{display:grid;align-content:center;min-height:62vh;padding-block:var(--s-9)}
.nf .meta{display:inline-block;justify-self:start;margin-bottom:var(--s-4);padding:6px 14px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand)}
.nf h1{font-size:clamp(42px,6vw,92px);line-height:1.04;letter-spacing:-.045em;max-width:16ch;text-transform:var(--upper);color:var(--title)}
.nf h1::after{content:"";display:block;width:96px;height:10px;margin-top:18px;border-radius:var(--pill);background:var(--brand)}
.nf p{margin:var(--s-4) 0 0;max-width:52ch;color:var(--muted);font-size:var(--fs-md)}

/* =========================================================
   Chuyển động (nhẹ, có chủ đích)
   ========================================================= */
/* thanh tiến độ cuộn trang */
.scroll-bar{position:fixed;left:0;top:0;z-index:60;height:3px;width:100%;background:var(--base-accent);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
/* tiêu đề mở đầu hiện lần lượt */
.hero h1,.hero .eyebrow,.hero .lead,.hero .cta-row,.hero .facts{animation:rise-in .9s var(--ease) both}
.hero .eyebrow{animation-delay:.05s}.hero h1{animation-delay:.14s}
.hero .lead{animation-delay:.36s}.hero .cta-row{animation-delay:.46s}.hero .facts{animation-delay:.56s}
.hero h1 > span{display:inline}
.hero h1 > span.line2{display:block}
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}}
.hero-visual > .tp,.hero-visual > .hero-photo{animation:card-in 1s .25s var(--ease) both}
@keyframes card-in{from{opacity:0;transform:translateY(30px) rotate(3deg)}}
.hero-badge{animation:badge-in .55s 1.1s var(--ease) both}
@keyframes badge-in{from{opacity:0;transform:scale(.5) rotate(-30deg)}}
.spec-card{animation:rise-in .7s 1.25s var(--ease) both}
.hero-doodle path,.cta-doodle path{stroke-dasharray:1;stroke-dashoffset:0}
.hero-doodle path{animation:draw 1s 1.4s var(--ease) both}
.hero-doodle path + path{animation-delay:2s}
/* hiện dần khi cuộn tới (chỉ áp dụng khi JS chạy và phần tử nằm dưới màn hình) */
.pre{opacity:0;transform:translateY(28px)}
.pre.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
/* hỏi đáp mở/đóng mượt (trình duyệt mới) */
:root{interpolate-size:allow-keywords}
.qa::details-content{block-size:0;overflow:clip;transition:block-size .38s var(--ease),content-visibility .38s allow-discrete}
.qa[open]::details-content{block-size:auto}
/* chuyển trang mượt giữa trang chủ và tra cứu */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn:hover,.tier:hover,.lb-btn:hover .lb-img,.btn-primary:hover{transform:none}
  .pre{opacity:1;transform:none}
  .qa::details-content{transition:none}
}

/* ---------- in phiếu dự toán (In / lưu PDF) ---------- */
@media print{
  .site-head,.topbar,.mbar,.mobile-menu,.dock,.lang-pick{display:none!important}
  body{background:#fff;color:#000}
  @page{margin:16mm}
  body.print-quote > :not(main),body.print-quote main > :not(#calculator),body.print-quote #calculator .sec-head,
  body.print-quote .calc-steps,body.print-quote .quote-tools,body.print-quote #to-form,body.print-quote .quote-card::before{display:none!important}
  body.print-quote #calculator{padding:0;background:#fff}
  body.print-quote .calc{display:block}
  body.print-quote .quote-card{--bg:#fff;--ink:#000;--brand:#000;--muted:#444;--ink-2:#222;--line:#999;--line-2:#999;box-shadow:none;border:1px solid #000;border-radius:0;color:#000;background:#fff;max-width:640px;margin:0 auto}
  body.print-quote .quote-total{background:#fff;border-block:2px solid #000;border-radius:0;margin:0;padding-inline:0}
  body.print-quote .print-head{display:block;border-bottom:2px solid #000;padding-bottom:10px;margin-bottom:6px}
  body.print-quote .print-head b{font-family:var(--font-h);font-size:22px}
  body.print-quote .print-head p{font-size:12px;color:#333}
  body.print-quote .est-tag{color:#000;border-color:#000}
}

.sw-inline{display:inline-block;width:16px;height:16px;margin-right:8px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(16,24,40,.25);vertical-align:-3px}
.res-details .wide{grid-column:1/-1}

/* =========================================================
   v6.8 — THOÁNG HƠN: chữ tiêu đề nhỏ lại, khoảng thở rộng, sản phẩm & báo giá lên đầu
   ========================================================= */
:root{
  --fs-2xl:clamp(30px, 3.3vw, 48px);
  --fs-display:clamp(40px, 5vw, 78px);
  --sec-y:clamp(56px, 6.5vw, 100px);
}
.sec-head{margin-bottom:clamp(24px,3vw,40px);gap:var(--s-3)}
.sec-head .h2{max-width:22ch}
.sec-intro{font-size:16px;line-height:1.6;max-width:46ch}
.kicker{margin-bottom:var(--s-3)}
@media (min-width:1024px){.sec-head.split{column-gap:var(--s-7)}}

/* phần mở đầu gọn: tiêu đề 2–3 dòng, ít chữ trang trí */
.hero{padding-block:clamp(36px,5vw,80px) clamp(44px,5.5vw,88px)}
.hero h1{max-width:17ch}
.hero .lead{max-width:44ch;font-size:clamp(16.5px,1.2vw,18.5px)}
.facts{margin-top:clamp(28px,3.5vw,48px)}
.facts dt{font-size:clamp(30px,3vw,46px)}
.facts dd{font-size:13.5px}
.hero-visual::before{inset:12px -2px 40px 22px}

/* ảnh mockup thật trong phần mở đầu: đổi màu vải trực tiếp */
.hmock{position:relative;margin:0;background:#FFFFFF;color:var(--c-dark);border-radius:var(--r-xl);padding:clamp(12px,1.6vw,18px);box-shadow:var(--shadow-lg);transform:rotate(-1deg)}
.hmock-stage{position:relative;aspect-ratio:428/470;border-radius:calc(var(--r-xl) - 8px);background:radial-gradient(ellipse 75% 65% at 50% 42%,#FFFFFF 0,#F1F3F6 55%,#E1E5EB 100%);overflow:hidden}
.hmock-stage canvas{position:absolute;inset:4% 6% 0;width:88%;height:auto;aspect-ratio:428/500;opacity:0;transition:opacity .45s var(--ease);filter:drop-shadow(0 18px 18px rgba(4,10,30,.22))}
.hmock-stage canvas.on{opacity:1}
.hmock-stage .tp-tag{position:absolute;top:12px;left:12px}
.hmock-foot{display:grid;gap:var(--s-3);padding:var(--s-3) 4px 2px}
.hmock-sw{display:flex;flex-wrap:wrap;gap:8px}
.hsw{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(16,24,40,.18);transition:transform .15s var(--ease)}
.hsw:hover{transform:scale(1.1)}
.hsw[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(16,24,40,.18),0 0 0 2.5px #fff,0 0 0 4.5px var(--base-accent)}
.hmock-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);padding-top:var(--s-3);border-top:1px solid #DCE2EA}
.hmock-price small{display:block;font-size:12.5px;color:#525F70;line-height:1.3}
.hmock-price b{font-family:var(--font-m);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--c-dark)}
.hmock-go{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;border-radius:var(--pill);background:var(--base-accent);color:var(--base-on-accent);font-weight:600;font-size:14px;transition:background-color var(--dur),transform .18s var(--ease)}
.hmock-go:hover{background:var(--base-accent2);transform:translateY(-1px)}
.hero-visual .hero-badge{top:18%;right:-18px;width:96px;height:96px}
.hero-visual .hero-badge b{font-size:32px}
@media (max-width:639px){.hero-visual .hero-badge{right:-4px;width:82px;height:82px}.hero-visual .hero-badge b{font-size:27px}}


/* ---------- bảng tính giá gọn ---------- */
.fs{padding:clamp(16px,2vw,26px)}
.fs-head h3{font-size:clamp(19px,1.6vw,22px)}
.opts-tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:8px}
.opt.opt-tile{grid-template-columns:20px 52px minmax(0,1fr);align-items:center;gap:10px;padding:8px 12px 8px 10px;border-color:var(--line)}
.opt-tile .mark{width:20px;height:20px;margin:0}
.opt-thumb{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#FFFFFF,#EDF0F4);overflow:hidden}
.opt-thumb img,.opt-thumb svg{width:86%;height:86%;object-fit:contain}
.opt-thumb.is-photo img{width:100%;height:100%;object-fit:cover}
.opt-tile .opt-main b{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.opt-tile .opt-main small{font-family:var(--font-m);font-weight:600;font-size:13.5px;color:var(--accent-text)}
#techs,#services{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.check{padding:12px;border-color:var(--line)}
.check-txt b{font-size:15px}
.check-txt small{font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.check-price{font-size:14.5px}
/* biểu đồ giá: gấp lại, mở khi cần */
.curve-more{margin-top:var(--s-4);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg)}
.curve-more > summary{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:6px 14px;cursor:pointer;list-style:none;font-weight:600;font-size:14.5px;color:var(--accent-text)}
.curve-more > summary::-webkit-details-marker{display:none}
.curve-more > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
.curve-more[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.curve-more > summary small{font-weight:500;color:var(--muted)}
.curve-more .curve{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg);background:transparent}

:root{--fs-display:clamp(38px, 4.4vw, 68px)}
@media (max-width:479px){
  .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .facts div,.facts div + div{display:block;padding:var(--s-3) var(--s-2) 0 0;border-bottom:0}
  .facts div + div{padding-left:var(--s-3);border-left:1px solid var(--line)}
  .facts dt{min-width:0;font-size:26px}.facts dd{margin-top:4px;font-size:12px;line-height:1.35}
  .hero .eyebrow-sub{display:none}
}

.hsw:focus-visible,.hmock-go:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px}
@media (max-width:639px){
  .hero-visual{max-width:360px;padding-top:18px}
  .hmock-stage{aspect-ratio:428/430}
}

/* =========================================================
   v6.10 — BÁO GIÁ LÀ TRUNG TÂM · CHỮ THEO VAI TRÒ
   · Bricolage Grotesque (--font-h, --font-m): tiêu đề lớn (h1, h2), con số lớn (tổng dự toán, số liệu mở đầu, giá), số bước
   · Be Vietnam Pro (--font-b): mọi chữ để đọc & thao tác — đoạn văn, nhãn, nút, tiêu đề bước, câu hỏi, form.
     Font thiết kế riêng cho tiếng Việt: dấu chồng tầng rõ ở cỡ nhỏ.
   ========================================================= */
/* nhãn nhỏ viết hoa: một kiểu duy nhất, có gạch dẫn */
.kicker{gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--accent-text)}
.kicker .idx{display:none}
.kicker > span:last-child::before{content:"";display:inline-block;width:22px;height:2px;margin-right:10px;vertical-align:middle;border-radius:2px;background:currentColor;opacity:.7}
.h2{letter-spacing:-.035em;line-height:1.06}
.display{letter-spacing:-.04em}
.sec-intro,.lead{text-wrap:pretty}

/* mở đầu: cụm tô màu xuống dòng riêng → tiêu đề 2 dòng gọn, đọc một nhịp */
.hero h1{max-width:none}
.hero h1 .hl{display:block;width:max-content;max-width:100%}
.hero .lead{max-width:46ch}
.eyebrow .eyebrow-sub{font-size:14.5px}
.facts dd{font-size:13.5px;line-height:1.45}

/* phần báo giá: khung đầu mục gọn hơn, bảng tính lên ngay */
#calculator{padding-top:clamp(48px,5.5vw,88px)}
#calculator .sec-head{margin-bottom:clamp(22px,2.6vw,36px)}
#calculator .sec-head .h2{max-width:none}

/* tiêu đề từng bước: chữ giao diện (không dùng chữ trưng bày ở cỡ nhỏ) */
.fs{border:1px solid color-mix(in srgb, var(--ink) 6%, transparent);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.fs-head{gap:12px;padding-bottom:14px;margin-bottom:14px}
.calc-steps > .fs:nth-child(n) .step{min-width:30px;height:30px;padding:0 8px;font-family:var(--font-h);font-size:13px;letter-spacing:-.01em}
.fs-head h3{font-family:var(--font-b);font-weight:600;font-size:clamp(17px,1.3vw,19px);letter-spacing:-.012em;line-height:1.3;color:var(--ink);text-transform:none}
.fs-head small{font-size:12.5px;line-height:1.4}

/* bước 01 — chọn sản phẩm: thẻ dọc, ảnh áo lớn, tên đọc trọn */
.opts-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* điện thoại: một hàng trượt ngang (vuốt để xem thêm) thay vì 3 hàng dài */
@media (max-width:559px){
  .opts-tiles{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(clamp(16px,2vw,26px) * -1);padding:2px clamp(16px,2vw,26px) 6px;scroll-padding-inline:clamp(16px,2vw,26px)}
  .opts-tiles::-webkit-scrollbar{display:none}
  .opts-tiles > .opt-tile{flex:0 0 min(44%,190px);scroll-snap-align:start}
  .opt.opt-tile:hover{transform:none}
}
.opt.opt-tile{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:10px;padding:7px 7px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#FFFFFF;transition:border-color var(--dur),box-shadow var(--dur),transform .2s var(--ease)}
.opt.opt-tile:hover{background:#FFFFFF;border-color:color-mix(in srgb, var(--base-accent) 55%, transparent);transform:translateY(-2px)}
.opt.opt-tile:has(input:checked){background:#FFFFFF;border-color:var(--base-accent);box-shadow:inset 0 0 0 1px var(--base-accent),0 14px 26px -18px color-mix(in srgb, var(--base-accent) 80%, transparent)}
.opt-tile .mark{position:absolute;top:14px;left:14px;z-index:1;width:20px;height:20px;margin:0;background:#FFFFFF;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.opt-thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:calc(var(--r-lg) - 5px);background:radial-gradient(ellipse 70% 65% at 50% 42%,#FFFFFF 0,#F1F3F6 60%,#E6E9EE 100%)}
.opt-thumb img,.opt-thumb svg{width:68%;height:88%;object-fit:contain}
.opt-thumb.is-mock img{width:76%;height:92%;filter:drop-shadow(0 8px 8px rgba(4,10,30,.16))}
.opt-thumb.is-photo img{width:100%;height:100%;object-fit:cover}
.opt-tile:has(input:checked) .opt-thumb{background:radial-gradient(ellipse 70% 65% at 50% 42%,#FFFFFF 0,color-mix(in srgb, var(--brand) 16%, #F1F3F6) 70%,color-mix(in srgb, var(--brand) 26%, #E6E9EE) 100%)}
.opt-tile .opt-main{padding:0 5px;min-width:0}
.opt-tile .opt-main b{font-size:14.5px;font-weight:600;line-height:1.35;-webkit-line-clamp:2}
.opt-tile .opt-main small{margin-top:5px;font-family:var(--font-m);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--accent-text)}
@media (max-width:559px){.opt-tile .opt-main b{font-size:13.5px}.opt-tile .opt-main small{font-size:14px}}

/* thông tin sản phẩm đang chọn: ảnh cận vải + 3 thông số */
.prod-info:empty{display:none}
.prod-info{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px;padding:12px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line)}
.pi-fab{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:14px;min-width:0}
.pi-swatch{position:relative;display:block;width:60px;height:60px;border-radius:12px;overflow:hidden;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
.pi-swatch img{width:100%;height:100%;object-fit:cover}
.pi-swatch i{position:absolute;left:3px;right:3px;bottom:3px;padding:1px 0;border-radius:var(--pill);background:rgba(255,255,255,.9);color:#525F70;font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.03em;line-height:1.5;text-transform:uppercase;text-align:center}
.pi-fab-txt{display:block;min-width:0;font-size:13px;line-height:1.45;color:var(--muted)}
.pi-fab-txt small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pi-fab-txt b{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.pi-detail{font-weight:600;color:var(--accent-text)}
.pi-detail + .pi-note::before{content:"·";margin:0 6px;color:var(--faint)}
.pi-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));padding-top:12px;border-top:1px dashed var(--line-2)}
.pi-facts > div{padding:0 14px;border-left:1px solid var(--line);min-width:0}
.pi-facts > div:first-child{border-left:0;padding-left:0}
.pi-facts dt{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-facts dd{margin-top:2px;font-size:14px;font-weight:600;line-height:1.35}
@media (max-width:479px){.pi-facts > div{padding:0 10px}.pi-facts dt{letter-spacing:.06em;white-space:normal;line-height:1.3}.pi-facts dd{font-size:13.5px}}

/* chọn thêm (kỹ thuật, dịch vụ) & bậc số lượng: chữ giao diện đồng nhất */
.check-txt b{font-weight:600}
.tier b{font-family:var(--font-b);font-size:14px;font-weight:600;letter-spacing:-.005em}
.qty-row label{font-size:15.5px}
.st-label{font-size:14px;font-weight:600;letter-spacing:-.005em}

/* phiếu dự toán: số lớn = chữ trưng bày, còn lại = chữ giao diện */
.quote-head h3{font-size:clamp(24px,2vw,28px);letter-spacing:-.035em}
.quote-rows{font-size:14.5px}
.quote-rows dd{font-weight:600}
.quote-total{gap:2px;padding:18px 22px 16px}
.quote-total span{font-size:12px;letter-spacing:.16em}
.quote-total b{letter-spacing:-.045em}
.quote-unit b{font-size:20px;letter-spacing:-.02em}

/* form */
.order-side .h2{font-size:clamp(32px,3.4vw,50px)}
.next-steps b{font-size:15.5px}

/* hỏi đáp: câu hỏi dài tiếng Việt → chữ giao diện, đậm vừa */
.qa summary{font-family:var(--font-b);font-weight:600;font-size:clamp(16.5px,1.3vw,18.5px);letter-spacing:-.008em;line-height:1.4;text-transform:none;min-height:68px}
.qa-a{font-size:15.5px;line-height:1.7}
.contact-line{font-weight:600}

/* mẫu thực tế */
.lb-body b{font-family:var(--font-b);font-weight:600;font-size:18px;letter-spacing:-.012em;line-height:1.3;text-transform:none}

/* chân trang & menu */
.foot-list{font-size:14.5px}
.foot-brand p{font-size:14.5px;line-height:1.6}
/* tiếng Anh: tiêu đề ngắn → cùng cỡ với bản tiếng Việt */
html[lang="en"] .hero h1{font-size:var(--fs-display);max-width:none}
/* điện thoại: áo mẫu ở phần mở đầu gọn hơn để phần báo giá lên sớm */
@media (max-width:639px){.hero-visual{max-width:320px}.hmock-stage{aspect-ratio:428/380}.hero{padding-bottom:40px}}

/* =========================================================
   v6.11 — LOGO XEM THỬ NHƯ IN THẬT
   ========================================================= */
/* đã có logo: ảnh xem thử sạch như ảnh chụp — khung chọn vị trí chỉ hiện khi rê chuột vào áo (máy có chuột) */
.st-art.has-logo .zone rect,.st-art.has-logo .zone .zone-pin{opacity:0}
@media (hover:hover){.st-art.has-logo:hover .zone rect,.st-art.has-logo:hover .zone .zone-pin{opacity:1}}
.logo-opts{display:grid;gap:10px;margin-top:12px;padding:12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.seg-l{min-width:42px;font-size:12.5px;font-weight:600;color:var(--muted)}
.seg button{min-height:34px;padding:0 11px;border-radius:var(--pill);border:1px solid var(--line-2);background:#FFFFFF;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.seg button:hover{border-color:var(--base-accent);color:var(--accent-text)}
.seg button[aria-pressed="true"]{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent)}
.seg button:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px}
.logo-opts .logo-scale{margin-top:0}
.logo-opts .logo-scale span{min-width:42px;font-size:12.5px;font-weight:600}
.logo-msg:empty{display:none}
.logo-msg{display:grid;gap:4px;padding-top:8px;border-top:1px dashed var(--line-2);font-size:13px;line-height:1.5;color:var(--muted)}
.logo-msg .link{font-size:13px;font-weight:600;color:var(--accent-text)}
.logo-msg .lm-warn{color:var(--warn);font-weight:600}

/* =========================================================
   v6.12 — BÁO GIÁ NHIỀU SẢN PHẨM · THANH BƯỚC · NGÀY NHẬN · QUÀ & CỌC · FILE THEO VỊ TRÍ
   ========================================================= */
/* thanh các bước: dính dưới đầu trang khi cuộn trong bảng báo giá */
.calc-nav{position:sticky;top:calc(var(--head-h) + 8px);z-index:6;display:flex;align-items:center;gap:8px;padding:6px;border-radius:var(--pill);background:color-mix(in srgb, #FFFFFF 92%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 20px -14px rgba(16,24,40,.35);border:1px solid var(--line)}
.calc-nav ol{list-style:none;display:flex;gap:2px;min-width:0;flex:1;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.calc-nav ol::-webkit-scrollbar{display:none}
.calc-nav li{flex:none}
.calc-nav a{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 13px 0 6px;border-radius:var(--pill);font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color var(--dur),color var(--dur)}
.calc-nav a:hover{background:var(--soft);color:var(--ink)}
.calc-nav .cn-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:var(--pill);background:var(--soft);font-family:var(--font-h);font-size:12px;font-weight:600;color:var(--muted)}
.calc-nav a[aria-current="step"]{background:var(--base-accent);color:var(--base-on-accent)}
.calc-nav a[aria-current="step"] .cn-n{background:var(--brand);color:var(--on-brand)}
.calc-nav .cn-go{padding:0 14px;background:var(--brand);color:var(--on-brand)}
.calc-nav .cn-go:hover{background:color-mix(in srgb, var(--brand) 88%, #000);color:var(--on-brand)}
.calc-nav .cn-go span{margin-left:2px}
.cn-line{flex:none;padding:0 8px 0 10px;font-size:12px;font-weight:600;color:var(--accent-text);white-space:nowrap;border-right:1px solid var(--line)}
@media (max-width:639px){.calc-nav{border-radius:var(--r-lg);margin-inline:calc(var(--gutter) * -.25)}.cn-line{display:none}}

/* thanh mốc số lượng: bậc giảm giá & quà tặng */
.qbar:empty{display:none}
.qbar{margin:22px 4px 2px;padding-bottom:22px}
.qb-track{position:relative;height:8px;border-radius:var(--pill);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.qb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb, var(--base-accent) 70%, var(--brand)),var(--base-accent));transition:width .35s var(--ease)}
.qb-mark{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center}
.qb-mark i{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:2px solid var(--line-input);font-style:normal}
.qb-mark small{position:absolute;top:16px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--muted)}
.qb-mark.is-on i{border-color:var(--base-accent);background:var(--base-accent)}
.qb-mark.is-on small{color:var(--accent-text)}
.qb-gift i{width:24px;height:24px;border-color:color-mix(in srgb, var(--warn) 55%, #fff);color:var(--warn)}
.qb-gift i svg{width:14px;height:14px}
.qb-gift.is-on i{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.qb-now{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--brand);border:3px solid var(--c-dark);box-shadow:0 2px 6px rgba(16,24,40,.25);transition:left .35s var(--ease)}
@media (max-width:479px){.qb-mark small{font-size:10.5px}}

/* phiếu dự toán: danh sách sản phẩm */
.q-lines{display:grid;gap:8px}
.q-list{list-style:none;display:grid;gap:6px}
.q-li{position:relative;display:flex;align-items:stretch;border-radius:var(--r);background:color-mix(in srgb, #FFFFFF 8%, var(--bg));box-shadow:inset 0 0 0 1px var(--line);transition:background-color var(--dur),box-shadow var(--dur)}
.q-li.is-on{background:color-mix(in srgb, #FFFFFF 16%, var(--bg));box-shadow:inset 0 0 0 1.5px var(--brand)}
.q-pick{flex:1;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:8px 6px 8px 10px;text-align:left;color:var(--ink);border-radius:inherit}
.q-pick:focus-visible{outline-offset:-2px}
.q-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb, #FFFFFF 18%, var(--bg));font-family:var(--font-h);font-size:12px;font-weight:600}
.q-li.is-on .q-n{background:var(--brand);color:var(--on-brand)}
.q-txt{min-width:0}
.q-txt b{display:block;font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-txt small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-sum{font-family:var(--font-m);font-size:14px;font-weight:600;white-space:nowrap}
.q-del{flex:none;width:36px;display:grid;place-items:center;color:var(--muted);border-radius:0 var(--r) var(--r) 0;transition:color var(--dur),background-color var(--dur)}
.q-del:hover{color:var(--ink);background:color-mix(in srgb, #FFFFFF 10%, var(--bg))}
.q-add{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r);border:1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent);color:var(--ink);font-size:14px;font-weight:600;transition:background-color var(--dur),border-color var(--dur)}
.q-add:hover{border-color:var(--brand);background:color-mix(in srgb, #FFFFFF 8%, var(--bg))}
.q-add:disabled{opacity:.5;cursor:not-allowed}
.breakdown .bd-head{padding-bottom:4px;border-bottom:1px solid var(--line)}
.breakdown .bd-head dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* quà tặng & cọc */
.q-extra:empty{display:none}
.q-extra{display:grid;gap:8px;margin-top:calc(var(--s-2) * -1)}
.qx-gift{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r);background:color-mix(in srgb, var(--brand) 16%, var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent)}
.qx-gift [data-icon],.qx-gift svg{color:var(--brand);flex:none;margin-top:2px}
.qx-gift small{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qx-gift b{font-size:14px;font-weight:600}
.qx-next{font-size:13px;color:var(--muted)}
.qx-next b{color:var(--ink);font-weight:600}
.qx-dep{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 2px;border-bottom:1px dashed var(--line-2);font-size:14px}
.qx-dep b{font-family:var(--font-m);font-size:16px}
/* ngày nhận dự kiến */
.quote-lead{align-items:flex-start}
.quote-lead b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.quote-lead small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}

/* tóm tắt trong form: nhiều sản phẩm */
.sum-lines{grid-column:1/-1;list-style:none;display:grid;gap:6px;counter-reset:sl}
.sum-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:14px}
.sum-lines li:last-child{border-bottom:0}
.sum-lines .num{font-family:var(--font-m);font-weight:600;white-space:nowrap}
.cfg-files{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:var(--accent-text)}

/* file thiết kế theo vị trí in */
.df-empty{font-size:13.5px;color:var(--muted)}
.df-list{list-style:none;display:grid;gap:6px}
.df-row{display:grid;grid-template-columns:28px minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:6px 8px 6px 10px;border-radius:var(--r);border:1px solid var(--line-2);background:#FFFFFF}
.df-row.has-file{border-color:color-mix(in srgb, var(--base-accent) 45%, transparent);background:color-mix(in srgb, var(--base-accent) 4%, #FFFFFF)}
.df-row .pl-n{width:26px;height:26px}
.df-pl{font-size:14px;font-weight:600;white-space:nowrap}
.df-up{justify-self:end;grid-column:4;min-height:38px}
.df-up:has(input:focus-visible){outline:2.5px solid var(--focus);outline-offset:2px}
.df-file{grid-column:3;display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;color:var(--accent-text)}
.df-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}
.df-file small{flex:none;color:var(--muted)}
.df-x{grid-column:4;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted);transition:background-color var(--dur),color var(--dur)}
.df-x:hover{background:var(--soft);color:var(--ink)}
.df-busy{grid-column:3/5;justify-self:end;font-size:13px;font-weight:600;color:var(--accent-text)}
@media (max-width:479px){.df-row{grid-template-columns:26px minmax(0,1fr) auto}.df-pl{grid-column:2}.df-file{grid-column:1/-1;grid-row:2}.df-up,.df-x{grid-column:3;grid-row:1}.df-busy{grid-column:2/4}}

/* ---------- trang Bảng giá ---------- */
.nav a[aria-current="page"]{color:var(--base-on-accent);background:var(--base-accent)}
.price-page{padding-block:clamp(28px,4vw,56px) var(--sec-y)}
.pl-head{display:grid;gap:var(--s-3);max-width:780px;margin-bottom:clamp(24px,3vw,40px)}
.pl-head .h2{max-width:none}
.pl-head-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-2)}
.pl-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
@media (min-width:1024px){.pl-layout{grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,3vw,48px)}.pl-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start}}
.pl-side .meta{margin-bottom:10px}
.pl-side ol{list-style:none;display:grid;gap:2px}
.pl-side a{display:block;padding:8px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;border-left:2px solid var(--line)}
.pl-side a:hover{background:var(--soft);color:var(--accent-text);border-left-color:var(--base-accent)}
@media (max-width:1023px){.pl-side ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}.pl-side li{flex:none}.pl-side a{border:1px solid var(--line-2);border-radius:var(--pill);background:#fff;white-space:nowrap}}
.pl-sec + .pl-sec{margin-top:clamp(32px,4vw,56px)}
.pl-h{font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;color:var(--title)}
.pl-sub{margin-top:6px;font-size:14.5px;color:var(--muted)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px;margin-top:var(--s-5)}
.pl-card{display:grid;align-content:start;gap:12px;padding:14px;border-radius:var(--r-lg);background:#FFFFFF;border:1px solid var(--line);scroll-margin-top:calc(var(--head-h) + 20px)}
.pl-card-h{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center}
.pl-art{display:grid;place-items:center;width:76px;height:76px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#FFFFFF,#EDF0F4);overflow:hidden}
.pl-art img,.pl-art svg{width:84%;height:84%;object-fit:contain}
.pl-art.is-photo img{width:100%;height:100%;object-fit:cover}
.pl-card-t h3{font-family:var(--font-b);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3;text-transform:none;color:var(--ink)}
.pl-card-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.pl-from{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.pl-from b{font-family:var(--font-m);font-size:18px;color:var(--accent-text)}
.pl-from em{margin-left:4px;padding:1px 7px;border-radius:var(--pill);background:var(--brand);color:var(--on-brand);font-style:normal;font-size:12px;font-weight:600}
.pl-tbl{width:100%;border-collapse:collapse;font-size:14px}
.pl-tbl caption{text-align:left;padding:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pl-tbl th,.pl-tbl td{padding:9px 2px;border-bottom:1px solid var(--line);text-align:left;font-weight:500;vertical-align:baseline}
.pl-tbl thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:0}
.pl-tbl td{text-align:right;font-family:var(--font-m);font-weight:600;white-space:nowrap}
.pl-tbl tbody th small{margin-left:8px;font-size:12px;font-weight:600;color:var(--accent-text)}
.pl-tbl tbody tr:last-child th,.pl-tbl tbody tr:last-child td{border-bottom:0}
.pl-tbl tbody tr:last-child td{color:var(--accent-text)}
.pl-card-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:10px;border-top:1px dashed var(--line-2);font-size:13px;color:var(--muted)}
.pl-card-f span{display:inline-flex;align-items:center;gap:6px}
.pl-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px;margin-top:var(--s-5)}
.pl-tbl-add{padding:14px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);border-collapse:separate}
.pl-tbl-add th b{display:block;font-weight:600}
.pl-tbl-add tbody th small,.pl-tbl-add td small{display:block;margin:2px 0 0;color:var(--muted);font-family:var(--font-b);font-size:12.5px;font-weight:400;color:var(--muted)}
.pl-tbl-add td{color:var(--accent-text)}
.pl-notes{display:grid;gap:8px;margin-top:var(--s-4);padding-left:20px;font-size:15px;color:var(--ink-2)}
.pl-notes li::marker{color:var(--accent-text)}
@media print{body.prices .site-head,body.prices .site-foot,body.prices .pl-side,body.prices .pl-head-act,body.prices .dock{display:none!important}.pl-layout{display:block}.pl-card{break-inside:avoid}}
.calc-steps > *{min-width:0}
.calc-nav{min-width:0;width:100%;overflow:hidden}
.qb-mark small{left:50%;transform:translateX(-50%)}
.qb-mark.qb-end small{left:auto;right:-6px;transform:none}
.qbar:has(.has-gift){margin-top:40px}
.qb-gift small{top:auto;bottom:20px;color:var(--warn)}
.qb-gift i{background:#FFFFFF;color:var(--warn)}
.qb-gift i .ic-sm,.qb-gift i svg{width:14px;height:14px;display:block}
.calc-steps > .fs{scroll-margin-top:calc(var(--head-h) + 76px)}

/* =========================================================
   v6.13 — PHIẾU BÁO GIÁ · THU SIZE NHÓM · HOÁ ĐƠN VAT · NGÀY CẦN HÀNG · TẢI ẢNH XEM THỬ · ĐẶT LẠI ĐƠN
   ========================================================= */
/* ngày cần nhận hàng: gợi ý kịp / không kịp */
.f .help.warn{color:var(--warn);font-weight:600}
.f .help.ok{color:var(--ok, #1F7A4D);font-weight:600}
/* hoá đơn VAT: khối mở / đóng */
.inv-box{margin-top:var(--s-6);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:0 var(--s-4);background:#FFFFFF}
.inv-box > summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;min-height:56px;padding:var(--s-3) 0;cursor:pointer}
.inv-box > summary::-webkit-details-marker{display:none}
.inv-box > summary h3{padding:0;border:0}
.inv-box > summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg) translateY(-3px);transition:transform var(--dur)}
.inv-box[open] > summary::after{transform:rotate(-135deg) translateY(-1px)}
.inv-box > summary .optional{font-size:13px;color:var(--muted)}
.inv-box > summary:focus-visible{outline:2.5px solid var(--focus);outline-offset:4px;border-radius:6px}
.inv-box[open]{padding-bottom:var(--s-5)}
.inv-box[open] > summary{border-bottom:1px solid var(--line);margin-bottom:var(--s-4)}
/* nút Phiếu báo giá trong phiếu dự toán */
.quote-tools{flex-wrap:wrap}
.quote-tools .btn-doc{box-shadow:inset 0 0 0 1.5px var(--brand)}
.quote-tools .btn-doc svg{color:var(--brand)}
/* xưởng thử áo: tải ảnh xem thử */
.st-dl{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:var(--pill);border:1px solid var(--line-2);background:#FFFFFF;font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color var(--dur),background-color var(--dur)}
.st-dl:hover{border-color:var(--base-accent);color:var(--accent-text)}
/* lối vào phiếu thu size */
.size-team{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:13.5px;color:var(--muted)}
.size-team a{font-weight:600;color:var(--accent-text)}
.size-team.is-on{color:var(--accent-text);font-weight:600}
/* tra cứu: đặt lại */
.res-act #r-reorder[hidden]{display:none}

/* ---------- trang Phiếu báo giá ---------- */
.qdoc-page{padding-block:clamp(20px,3vw,40px) var(--sec-y);background:var(--soft)}
.qdoc-wrap{max-width:900px}
.qdoc-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-5)}
.qdoc-bar .kicker{margin-bottom:6px}
.qdoc-bar-sub{max-width:52ch;font-size:14px;color:var(--muted)}
.qdoc-act{display:flex;flex-wrap:wrap;gap:8px}
.qdoc-act .btn[hidden]{display:none}
.qdoc{--qd-ink:#16181D;--qd-mute:#5B6170;--qd-line:#D9DCE3;position:relative;background:#FFFFFF;color:var(--qd-ink);border-radius:6px;padding:clamp(22px,5vw,56px) clamp(18px,5vw,60px);box-shadow:0 1px 2px rgba(16,24,40,.06),0 24px 48px -28px rgba(16,24,40,.35);font-size:14px;line-height:1.5}
.qdoc::before{content:"";position:absolute;inset:0 0 auto;height:6px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,var(--base-accent),var(--brand))}
.qd-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;padding-bottom:20px;border-bottom:2px solid var(--qd-ink)}
@media (max-width:639px){.qd-head{grid-template-columns:minmax(0,1fr)}}
.qd-logo{display:block;height:34px;width:auto;margin-bottom:10px}
.qd-shop-name{font-family:var(--font-h);font-size:20px;font-weight:var(--h-weight);letter-spacing:-.02em}
.qd-shop-tag{font-size:12.5px;color:var(--qd-mute)}
.qd-shop-info{display:grid;gap:2px;margin-top:10px;font-size:12.5px}
.qd-shop-info div{display:flex;gap:8px}
.qd-shop-info dt{min-width:62px;color:var(--qd-mute)}
.qd-title{text-align:right}
@media (max-width:639px){.qd-title{text-align:left}}
.qd-title h1{font-family:var(--font-h);font-size:clamp(26px,4vw,36px);letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.qd-meta{display:grid;gap:3px;margin-top:12px;font-size:13px}
.qd-meta div{display:flex;justify-content:flex-end;gap:10px}
@media (max-width:639px){.qd-meta div{justify-content:flex-start}}
.qd-meta dt{color:var(--qd-mute)}
.qd-meta dd{font-family:var(--font-m);font-weight:600}
.qd-to{display:grid;gap:4px;margin:18px 0 6px}
.qd-to label{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:10px;font-size:13.5px}
.qd-to label span{color:var(--qd-mute)}
.qd-to input{width:100%;min-height:34px;padding:4px 2px;border:0;border-bottom:1px dotted #9AA0AD;background:transparent;font:inherit;font-weight:600;color:var(--qd-ink)}
.qd-to input:focus{outline:none;border-bottom:1.5px solid var(--base-accent);background:color-mix(in srgb, var(--base-accent) 5%, #fff)}
.qd-to input::placeholder{color:#A6ABB6;font-weight:400}
.qd-lead{margin:14px 0 10px;color:var(--qd-ink)}
.qd-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qd-tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px}
.qd-tbl col.c-n{width:44px}.qd-tbl col.c-q{width:70px}.qd-tbl col.c-u{width:112px}.qd-tbl col.c-a{width:128px}
.qd-tbl thead th{padding:9px 8px;background:#16181D;color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.qd-tbl th.num,.qd-tbl td.num{text-align:right;font-family:var(--font-m);white-space:nowrap}
.qd-tbl td{padding:8px;vertical-align:top;border-bottom:1px solid var(--qd-line)}
.qd-tbl td small{display:block;font-size:12px;color:var(--qd-mute)}
.qd-tbl .qd-disc{color:var(--accent-text);font-weight:600}
.qd-n{text-align:center;font-family:var(--font-m);font-weight:600}
.qd-main td{padding-top:12px}
.qd-sub td{padding-top:5px;padding-bottom:5px;color:#30343C}
.qd-sub td:nth-child(2){padding-left:22px;position:relative}
.qd-sub td:nth-child(2)::before{content:"+";position:absolute;left:8px;color:var(--qd-mute)}
.qd-line td{background:#F6F7F9;font-size:12.5px;font-weight:600;color:#30343C}
.qd-grp{break-inside:avoid}
.qd-tbl tfoot th{padding:9px 8px;text-align:right;font-weight:600}
.qd-tbl tfoot td{padding:9px 8px;font-weight:600}
.qd-total th,.qd-total td{border-top:2px solid var(--qd-ink);font-size:15px}
.qd-total td{font-size:18px}
.qd-total small{display:block;font-size:12px;font-weight:400;color:var(--qd-mute)}
.qd-dep th,.qd-dep td{font-size:13px;color:#30343C;border-top:1px dashed var(--qd-line)}
.qd-words{margin-top:12px;padding:10px 12px;background:#F6F7F9;border-left:3px solid var(--base-accent);font-size:13.5px}
.qd-words span{color:var(--qd-mute)}
.qd-words small{color:var(--qd-mute)}
.qd-gift{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:13.5px}
.qd-gift svg{color:var(--accent-text);flex:none;margin-top:2px}
.qd-terms{margin-top:22px}
.qd-terms h2{font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--qd-mute);margin-bottom:8px}
.qd-terms ol{display:grid;gap:4px;padding-left:20px;font-size:13px}
.qd-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;text-align:center}
.qd-sign div{display:grid;gap:2px;min-height:110px;align-content:start}
.qd-sign b{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.qd-sign small{font-size:12px;color:var(--qd-mute);font-style:italic}
.qd-foot{margin-top:18px;padding-top:10px;border-top:1px solid var(--qd-line);font-size:12px;color:var(--qd-mute)}
.qdoc-empty{display:grid;gap:12px;justify-items:start;padding:12px 0}
@media print{
  @page{size:A4;margin:14mm 12mm}
  html:has(body.qdoc-body),body.qdoc-body{background:#fff!important}
  .qd-to input,.qd-to input:focus{background:transparent!important;box-shadow:none}
  .qd-terms,.qd-sign,.qd-words,.qd-tbl tfoot{break-inside:avoid}
  .qd-terms h2{break-after:avoid}
  .qd-sign div{min-height:90px}
  body.qdoc-body .site-head,body.qdoc-body .site-foot,body.qdoc-body .qdoc-bar,body.qdoc-body .dock,body.qdoc-body .skip,body.qdoc-body .toasts,body.qdoc-body #toasts{display:none!important}
  body.qdoc-body main{padding:0!important;background:#fff}
  body.qdoc-body .wrap{max-width:none;padding:0}
  .qdoc{box-shadow:none;padding:0;border-radius:0;font-size:12.5px}
  .qdoc::before{display:none}
  .qd-tbl{min-width:0}
  .qd-tbl thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qd-line td,.qd-words{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qd-to input{border-bottom-color:transparent}
  .qd-to input:placeholder-shown{border-bottom:1px dotted #999}
  .qd-to input::placeholder{color:transparent}
}

/* ---------- trang Thu size nhóm ---------- */
.ss-page{padding-block:clamp(28px,4vw,56px) var(--sec-y)}
.ss-head{display:grid;gap:var(--s-3);max-width:780px;margin-bottom:clamp(20px,3vw,36px)}
.ss-head .h2{max-width:none}
.ss-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media (min-width:900px){.ss-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.ss-card{display:grid;gap:var(--s-4);align-content:start;padding:clamp(18px,3vw,32px);border-radius:var(--r-xl);background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--shadow)}
.ss-card h2{font-family:var(--font-h);font-size:clamp(20px,2vw,24px);letter-spacing:-.025em;color:var(--title)}
.ss-card h2 small{font-family:var(--font-b);font-size:13px;font-weight:500;letter-spacing:0;color:var(--muted);margin-left:6px}
.ss-fine{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.ss-err{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:color-mix(in srgb, var(--danger) 8%, #fff);color:var(--danger);font-size:14px;font-weight:600}
.ss-loading{padding:24px 0;color:var(--muted)}
.ss-side{display:grid;gap:var(--s-4);align-content:start}
.ss-steps{list-style:none;counter-reset:ss;display:grid;gap:14px;padding:clamp(18px,3vw,28px);border-radius:var(--r-xl);background:var(--soft);border:1px solid var(--line)}
.ss-steps li{counter-increment:ss;display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px;align-items:start}
.ss-steps li::before{content:counter(ss, decimal-leading-zero);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--on-brand);font-family:var(--font-m);font-size:12.5px;font-weight:600}
.ss-steps b{font-size:15px}
.ss-steps span{font-size:13.5px;color:var(--muted)}
.ss-mine{padding:var(--s-4) var(--s-5);border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.ss-mine h2{font-family:var(--font-b);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ss-mine ul{list-style:none;display:grid;gap:4px}
.ss-mine li{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.ss-mine a{font-weight:600;color:var(--accent-text)}
.ss-mine small{color:var(--muted);white-space:nowrap}
.ss-facts{display:flex;flex-wrap:wrap;gap:10px 28px}
.ss-facts dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ss-facts dd{font-size:15px;font-weight:600}
.ss-facts dd b{font-family:var(--font-m);font-size:20px;color:var(--accent-text)}
.ss-late{margin-left:6px;font-style:normal;font-size:12px;color:var(--warn)}
.ss-note{padding:12px 14px;border-radius:var(--r);background:var(--soft);font-size:14.5px;white-space:pre-line}
#ss-entry{display:grid;gap:var(--s-4)}
.ss-sizes{border:0;padding:0;margin:0}
.ss-sizes legend{font-size:14px;font-weight:600;margin-bottom:8px}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chip{position:relative}
.ss-chip input{position:absolute;opacity:0;width:1px;height:1px}
.ss-chip span{display:grid;place-items:center;min-width:56px;min-height:48px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--line-input);background:#fff;font-family:var(--font-m);font-size:15px;font-weight:600;cursor:pointer;transition:background-color var(--dur),border-color var(--dur),color var(--dur)}
.ss-chip span:hover{border-color:var(--base-accent)}
.ss-chip input:checked + span{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent)}
.ss-chip input:focus-visible + span{outline:2.5px solid var(--focus);outline-offset:2px}
.ss-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--s-4)}
.ss-closed{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--soft);font-weight:600}
.ss-done{display:flex;gap:12px;align-items:flex-start;padding:18px;border-radius:var(--r-lg);background:color-mix(in srgb, var(--base-accent) 8%, #fff);border:1px solid color-mix(in srgb, var(--base-accent) 35%, transparent)}
.ss-done[hidden]{display:none}
.ss-done > svg{flex:none;width:28px;height:28px;color:var(--accent-text)}
.ss-done b{display:block;font-size:16px}
.ss-done span{font-size:13.5px;color:var(--muted)}
.ss-manage{display:grid;gap:var(--s-5)}
.ss-fresh{display:flex;gap:10px;align-items:center;padding:14px 16px;border-radius:var(--r-lg);background:var(--brand);color:var(--on-brand);font-weight:600}
.ss-links{gap:var(--s-3)}
.ss-link{display:grid;gap:6px}
.ss-link-l{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;font-weight:600}
.ss-link-l small{font-weight:400;color:var(--muted)}
.ss-link-v{display:flex;gap:8px}
.ss-link-v input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1.5px solid var(--line-input);border-radius:var(--r);background:var(--soft);font-family:var(--font-m);font-size:13.5px;color:var(--ink)}
.ss-link.is-private .ss-link-v input{background:#fff;border-style:dashed}
.ss-list-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.ss-tbl-wrap{overflow-x:auto;margin-inline:-6px}
.ss-tbl{width:100%;border-collapse:collapse;font-size:14px}
.ss-tbl th{padding:8px 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1px solid var(--line)}
.ss-tbl td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ss-tbl td small{display:block;font-size:12px;color:var(--muted)}
.ss-tbl .num{text-align:right;font-family:var(--font-m)}
.ss-sz{display:inline-grid;place-items:center;min-width:38px;padding:2px 8px;border-radius:var(--pill);background:var(--soft);font-family:var(--font-m);font-weight:600;font-size:13px}
.ss-del{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--muted)}
.ss-del:hover{background:var(--soft);color:var(--danger)}
.ss-empty{padding:18px;border-radius:var(--r);border:1.5px dashed var(--line-2);color:var(--muted);font-size:14px}
.ss-bars{list-style:none;display:grid;gap:6px}
.ss-bars li{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:14px}
.ss-bars span{font-family:var(--font-m);font-weight:600}
.ss-bars i{height:10px;border-radius:var(--pill);background:var(--soft);position:relative;overflow:hidden}
.ss-bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--base-accent)}
.ss-bars b{text-align:right;font-family:var(--font-m)}
.ss-tools{display:flex;flex-wrap:wrap;gap:8px;padding-top:var(--s-3);border-top:1px dashed var(--line-2)}
.ss-kill.is-armed{color:var(--danger);font-weight:600}
@media (max-width:479px){.ss-row{grid-template-columns:minmax(0,1fr)}.ss-link-v{flex-direction:column}}
@media (min-width:900px){.ss-sum{position:sticky;top:calc(var(--head-h) + 20px)}}
.ss-solo{max-width:640px}
.ss-fine > svg{flex:none}
.ss-fine:has(> svg){flex-wrap:nowrap;align-items:flex-start}
.ss-fine:has(> svg) > svg{margin-top:2px}

/* =========================================================
   v6.14 — GIAO DIỆN “PHIẾU KỸ THUẬT XƯỞNG MAY” (xem DESIGN.md)
   Sáng, gọn, một họ chữ (Be Vietnam Pro), một màu hành động. Lớp này đặt cuối file để thay thế
   phong cách cũ (khối xanh điện, xanh chanh neon, lưới rập, chữ hoa giãn cách) mà không đổi cấu trúc trang.
   ========================================================= */
:root{
  --fs-base:16px; --fs-md:17px;
  --fs-xl:clamp(20px, 1.7vw, 22px);
  --fs-2xl:clamp(28px, 3vw, 40px);
  --fs-display:clamp(34px, 4.3vw, 52px);
  --lh-body:1.65;
  --sec-y:clamp(56px, 7vw, 96px);
  --container:1240px;
  --r:10px; --r-sm:8px; --r-lg:14px; --r-xl:20px; --r-btn:10px;
  --shadow-sm:0 1px 2px rgba(26,32,31,.05);
  --shadow:0 1px 2px rgba(26,32,31,.04), 0 8px 24px -12px rgba(26,32,31,.16);
  --shadow-lg:0 1px 3px rgba(26,32,31,.06), 0 18px 40px -20px rgba(26,32,31,.22);
  --grid-size:0px;
}
body{--title:var(--ink);--hl-marker:transparent;--hl-color:var(--accent-text)}
::selection{background:color-mix(in srgb, var(--base-accent) 22%, #fff);color:var(--ink)}

/* ---------- chữ: khoảng dòng đủ cho dấu chồng tầng, giãn chữ vừa phải, không viết hoa toàn bộ ---------- */
h1,h2,h3,h4{line-height:1.25;letter-spacing:var(--h-track)}
.display{font-size:var(--fs-display);line-height:1.2;letter-spacing:-.02em}
.h2{font-size:var(--fs-2xl);line-height:1.22;letter-spacing:-.018em;color:var(--title)}
.h3{line-height:1.3}
.hl,.h2 .hl,.hero h1 .hl{background:none;padding:0;margin:0;transform:none;font:inherit;letter-spacing:inherit;text-transform:none;color:var(--accent-text);max-width:none}
.scheme-cobalt .hl,.scheme-cobalt .h2 .hl{color:var(--brand-lt)}
.kicker{gap:10px;margin-bottom:var(--s-3);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent-text)}
.kicker .idx{min-width:0;height:auto;padding:2px 9px;background:var(--soft);color:var(--ink-2);font-size:12.5px;font-weight:600}
.kicker::before,.kicker > span::before{display:none}
.meta{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.lead{font-size:clamp(16.5px,1.2vw,18px);line-height:1.65}
.sec-intro{font-size:16px}
.num{font-weight:inherit}
.doodle,.hero-doodle,.hero-badge,.foot-mark{display:none!important}

/* ---------- nút: bo vừa, không nhảy, một màu hành động ---------- */
.btn{border-radius:var(--r-btn);min-height:46px;padding:0 20px;font-size:15px;letter-spacing:0;font-weight:600}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
.btn-primary,.btn-dark{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent);--spin:var(--base-on-accent)}
.btn-primary:hover,.btn-dark:hover{transform:none;box-shadow:none;background:color-mix(in srgb, var(--base-accent) 86%, #000);border-color:color-mix(in srgb, var(--base-accent) 86%, #000)}
.btn-ghost,.btn-onink{background:#FFFFFF;border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover,.btn-onink:hover{background:var(--soft);border-color:var(--line-input);color:var(--ink)}
.btn .arr{transition:none}.btn:hover .arr{transform:none}
/* trên khối tối: nút chính trắng, nút viền trắng mờ */
.scheme-cobalt{--accent-text:var(--brand-lt);--hl-color:var(--brand-lt);--focus-c:var(--brand-lt)}
.scheme-cobalt .btn-primary{background:#FFFFFF;border-color:#FFFFFF;color:var(--base-accent2);--spin:var(--base-accent2)}
.scheme-cobalt .btn-primary:hover{background:color-mix(in srgb, #fff 88%, var(--brand));border-color:color-mix(in srgb, #fff 88%, var(--brand))}
.scheme-cobalt .btn-ghost,.scheme-cobalt .btn-onink{background:transparent;border-color:rgba(255,255,255,.35);color:#FFFFFF}
.scheme-cobalt .btn-ghost:hover,.scheme-cobalt .btn-onink:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

/* ---------- thanh trên cùng & đầu trang ---------- */
.topbar{background:var(--base-accent2);color:rgba(255,255,255,.82);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.topbar-in{min-height:34px}
.topbar-items span:first-child{color:#FFFFFF;font-weight:600}
.topbar-items span + span::before{border-top:0;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 12px 0 -16px;opacity:.6}
.topbar-hot b{color:#FFFFFF}
.site-head::before{background:color-mix(in srgb, #FFFFFF 94%, transparent)}
.brand-tag{font-size:13px;letter-spacing:0;text-transform:none}
.nav{background:transparent;padding:0;gap:4px}
.nav a{font-size:15px;font-weight:500;color:var(--ink-2);border-radius:var(--r-sm);padding:0 12px}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a[aria-current="page"],.nav a[aria-current="true"]{background:var(--soft);color:var(--ink);font-weight:600}
.lang-switch{background:var(--soft)}
.lang-switch a{font-weight:600;letter-spacing:0}
.lang-switch a[aria-current="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(26,32,31,.12)}
.head-cta{border-radius:var(--r-btn)}

/* ---------- phần mở đầu: nền sáng, chữ đậm vừa, ảnh sản phẩm là điểm nhấn ---------- */
.hero{padding-block:clamp(36px,5vw,72px) clamp(40px,5vw,72px);background:linear-gradient(180deg,color-mix(in srgb, #fff 55%, var(--bg)),var(--bg))}
.hero::before,.hero::after{display:none}
.hero h1{max-width:16ch;color:var(--ink)}
html[lang="en"] .hero h1{font-size:var(--fs-display);max-width:18ch}
.hero .lead{color:var(--ink-2)}
.eyebrow{margin-bottom:var(--s-4)}
.eyebrow .badge-t{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;background:color-mix(in srgb, var(--base-accent) 9%, #fff);color:var(--accent-text);padding:5px 12px}
.eyebrow .eyebrow-sub{font-size:14px}
.facts{border-top:1px solid var(--line)}
.facts dt{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;color:var(--ink);font-weight:600}
.facts div:first-child dt{color:var(--ink)}
.facts dd{font-size:14px}
.hero-visual{padding:0}
.hero-visual::before{display:none}
.hero-photo,.hmock,.tp{transform:none;box-shadow:var(--shadow);border:1px solid var(--line)}
.hero-price{background:#FFFFFF;color:var(--ink);border:1px solid var(--line);left:12px;bottom:84px}
.hero-price small{letter-spacing:0;text-transform:none;font-weight:500;color:var(--muted);font-size:13px}
.hero-price b{letter-spacing:-.01em;font-size:22px}
.spec-card{margin:12px 0 0;box-shadow:none;border:1px solid var(--line)}
.spec-card small{letter-spacing:0;text-transform:none;font-weight:500;font-size:12.5px}
.spec-card b{letter-spacing:-.01em;font-size:20px;color:var(--ink)}
.tp-tag{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;background:rgba(26,32,31,.78);color:#FFFFFF}
.hmock-stage{background:var(--tint)}
.hmock-go{border-radius:var(--r-btn)}
.hmock-go:hover{transform:none;background:color-mix(in srgb, var(--base-accent) 86%, #000)}

/* ---------- đầu mục các phần ---------- */
.sec-head{margin-bottom:clamp(28px,3.5vw,48px)}
.sec-head .h2{max-width:22ch}

/* ---------- bảng tính giá ---------- */
.fs{border:1px solid var(--line);box-shadow:none;border-radius:var(--r-lg)}
.fs-head h3{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.calc-steps > .fs:nth-child(n) .step{min-width:28px;height:28px;padding:0 7px;border-radius:8px;background:var(--soft);color:var(--ink-2);font-family:var(--font-m);font-size:13px;font-weight:600;letter-spacing:0}
.opt:has(input:checked),.check:has(input:checked){background:color-mix(in srgb, var(--base-accent) 6%, #FFFFFF);border-color:var(--base-accent);box-shadow:inset 0 0 0 1px var(--base-accent)}
.check input:checked + .mark::after{border-color:#FFFFFF}
.opt:hover,.check:hover{background:color-mix(in srgb, var(--ink) 2.5%, #fff)}
.opt-thumb{background:var(--tint);border-radius:10px}
.opt-tile .opt-main small,.opt-meta,.check-price{color:var(--ink)}
.check-price small,.opt-meta small{color:var(--muted)}
.tier{border-color:var(--line);border-radius:var(--r)}
.tier:hover{transform:none;border-color:var(--line-input)}
.tier[aria-pressed="true"]{background:color-mix(in srgb, var(--base-accent) 6%, #FFFFFF);border-color:var(--base-accent);box-shadow:inset 0 0 0 1px var(--base-accent);color:var(--ink)}
.tier[aria-pressed="true"] span{color:var(--accent-text);font-weight:600}
.stepper{border-radius:var(--r);border:1px solid var(--line-input)}
.stepper button:hover{background:var(--soft);color:var(--ink)}
.pl-chip{border-radius:var(--r)}
.pl-chip:has(input:checked){background:color-mix(in srgb, var(--base-accent) 6%, #FFFFFF);border-color:var(--base-accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--base-accent)}
.pl-chip:has(input:checked) .pl-n{background:var(--base-accent);color:#FFFFFF}
.md-opt:has(input:checked){box-shadow:0 0 0 1px var(--base-accent)}
.qb-fill{background:var(--base-accent)}
.qb-mark.is-on i{background:var(--base-accent);border-color:var(--base-accent)}
.qb-now{background:#FFFFFF;border:3px solid var(--base-accent)}
.qb-gift i,.qb-gift.is-on i{color:var(--warn);border-color:color-mix(in srgb, var(--warn) 50%, #fff);background:#FFFFFF}
.curve-more{background:#FFFFFF}
/* thanh các bước: chỉ máy tính (điện thoại đã có thanh tổng tiền ở đáy) */
.calc-nav{border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(26,32,31,.05);background:color-mix(in srgb, #FFFFFF 96%, transparent)}
.calc-nav a{border-radius:8px;font-weight:500}
.calc-nav .cn-n{background:transparent;color:var(--muted);font-family:var(--font-m);font-weight:600;min-width:auto;padding:0}
.calc-nav a[aria-current="step"]{background:var(--soft);color:var(--ink);font-weight:600}
.calc-nav a[aria-current="step"] .cn-n{background:transparent;color:var(--accent-text)}
.calc-nav .cn-go{background:var(--base-accent);color:#FFFFFF}
.calc-nav .cn-go:hover{background:color-mix(in srgb, var(--base-accent) 86%, #000);color:#FFFFFF}
.cn-line{color:var(--accent-text)}
@media (max-width:1023px){.calc-nav{display:none}}

/* xưởng thử áo */
.st-stage{background:var(--tint);border-color:var(--line)}
.st-views button[aria-pressed="true"]{background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(26,32,31,.12)}

/* ---------- phiếu dự toán: thẻ trắng ---------- */
.quote-card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r-xl)}
.quote-card::before{display:none}
.quote-head h3{font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.est-tag{border-color:var(--line-2);color:var(--muted);font-weight:500}
.est-tag::before{background:var(--warn)}
.quote-total{background:var(--soft);border-radius:var(--r-lg);margin-inline:0}
.quote-total span{font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.quote-total b{color:var(--ink);font-size:clamp(32px,3vw,42px);letter-spacing:-.02em;line-height:1.15}
.breakdown .disc dd{color:var(--ok)}
.quote-lead [data-icon]{color:var(--accent-text)}
.quote-tools .btn{border-color:var(--line-2);color:var(--ink);background:#FFFFFF}
.quote-tools .btn:hover{background:var(--soft);color:var(--ink);border-color:var(--line-input)}
.quote-tools .btn-doc{box-shadow:none;border-color:var(--base-accent);color:var(--accent-text)}
.quote-tools .btn-doc svg{color:currentColor}
.q-li{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line)}
.q-li.is-on{background:color-mix(in srgb, var(--base-accent) 5%, #fff);box-shadow:inset 0 0 0 1.5px var(--base-accent)}
.q-n{background:var(--soft)}
.q-li.is-on .q-n{background:var(--base-accent);color:#FFFFFF}
.q-add{border-color:var(--line-input)}
.q-add:hover{border-color:var(--base-accent);background:color-mix(in srgb, var(--base-accent) 4%, #fff)}
.qx-gift{background:color-mix(in srgb, var(--warn) 9%, #fff);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent)}
.qx-gift [data-icon],.qx-gift svg{color:var(--warn)}
.qx-gift small{letter-spacing:0;text-transform:none;font-size:12.5px;font-weight:500}
.bd-head dt,.breakdown .bd-head dt{letter-spacing:0;text-transform:none;font-size:13px}

/* ---------- form & cột thông tin (khối tối duy nhất cạnh form) ---------- */
.order-side,.track-side{border-radius:var(--r-xl)}
.order-side::before,.track-side::before,.lp-box::before{display:none}
.order-side .h2{font-size:clamp(28px,2.8vw,36px);color:#FFFFFF}
.next-steps li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.next-steps li:nth-child(n)::before{background:rgba(255,255,255,.12);color:#FFFFFF;font-family:var(--font-m);font-weight:600;width:34px;height:34px;font-size:13px}
.side-contact .link{color:#FFFFFF;text-decoration-color:rgba(255,255,255,.5)}
.order-card{border-radius:var(--r-xl);box-shadow:none}
.form-sec h3{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.form-sec h3::before{width:6px;height:18px;border-radius:3px;background:var(--base-accent);box-shadow:none}
.f input,.f select,.f textarea{background:#FFFFFF;border:1px solid var(--line-input);border-radius:var(--r)}
.summary{border:1px solid var(--line);background:var(--bg)}
.summary .sum-total b{color:var(--ink)}
.track-side h1{font-size:clamp(30px,3.2vw,42px);line-height:1.22;letter-spacing:-.02em;color:#FFFFFF}
.track-side h1::after{display:none}
.track-side .kicker{color:var(--brand-lt)}
.track-form{box-shadow:var(--shadow)}

/* ---------- mẫu sản phẩm, hỏi đáp ---------- */
.lb-tag{background:rgba(26,32,31,.78);color:#fff}
.lb-body b{font-size:18px;letter-spacing:-.01em}
.lb-go{background:var(--soft);color:var(--ink)}
.lb-btn:hover .lb-go{transform:none;background:var(--base-accent);color:#fff}
.lb-btn:hover .lb-img{transform:none}
.qa summary{font-family:var(--font-b);font-weight:600;font-size:17px;letter-spacing:0;min-height:64px}
.qa summary i{width:34px;height:34px}
.qa summary:hover i{background:var(--soft);color:var(--ink)}
.qa[open] summary i{background:var(--base-accent);color:#FFFFFF}
.qa-a{font-size:16px}
.empty h3{font-size:clamp(20px,2vw,26px)}

/* ---------- chân trang ---------- */
.site-foot{padding-block:var(--s-8) var(--s-5)}
.foot-h{font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:#FFFFFF}
.foot-list li span{font-size:13px;letter-spacing:0;text-transform:none}
.foot-list a{font-weight:500}
.foot-list a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.foot-bottom{margin-top:var(--s-6)}
/* chừa chỗ cho nút "Liên hệ" nổi ở góc phải dưới, để nút không che dòng cuối chân trang */
.site-foot{padding-bottom:calc(var(--s-5) + 64px)}
@media (max-width:1023px){body.home.has-mbar .site-foot{padding-bottom:calc(112px + 64px)}}

/* ---------- thanh tổng tiền (điện thoại) ---------- */
.mbar{border-radius:var(--r-lg);background:var(--base-accent2);color:#FFFFFF;box-shadow:0 12px 32px -12px rgba(14,40,38,.6);padding:8px 8px 8px 16px}
.mbar small{letter-spacing:0;text-transform:none;font-size:12px;font-weight:500;opacity:.75}
.mbar b{color:#FFFFFF;letter-spacing:-.01em}
.mbar .btn{background:var(--base-accent);color:#FFFFFF;border-color:var(--base-accent);border-radius:var(--r-btn)}

/* ---------- MỘT nút liên hệ nổi (mở ra Zalo / WhatsApp / Gọi) ---------- */
.dock{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.dock-toggle{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border-radius:var(--pill);background:var(--base-accent2);color:#FFFFFF;font-weight:600;font-size:14.5px;
  box-shadow:0 10px 28px -10px rgba(14,40,38,.55);transition:background-color var(--dur)}
.dock-toggle:hover{background:color-mix(in srgb, var(--base-accent2) 85%, #fff)}
.dock-toggle:focus-visible{outline:3px solid var(--base-accent);outline-offset:3px}
.dock-toggle .dock-x{display:none}
.dock.is-open .dock-toggle .dock-x{display:block}
.dock.is-open .dock-toggle > .ic:first-child{display:none}
.dock-lbl{font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1}
.dock-menu{display:grid;gap:6px;padding:8px;min-width:240px;border-radius:var(--r-lg);background:#FFFFFF;border:1px solid var(--line);box-shadow:var(--shadow-lg);animation:dock-pop .16s var(--ease)}
@keyframes dock-pop{from{opacity:0;transform:translateY(6px)}}
.dock-menu .dock-btn{display:flex;align-items:center;gap:12px;width:auto;height:auto;min-height:52px;padding:6px 12px 6px 6px;border-radius:var(--r);box-shadow:none;background:transparent;color:var(--ink);text-decoration:none;transition:background-color var(--dur)}
.dock-menu .dock-btn:hover{transform:none;box-shadow:none;background:var(--soft)}
.dock-menu .dock-btn:focus-visible{outline:2.5px solid var(--base-accent);outline-offset:0;border-radius:var(--r)}
.dock-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:color-mix(in srgb, var(--base-accent) 9%, #fff);color:var(--accent-text);flex:none}
.dock-call .dock-ic{background:color-mix(in srgb, #12A150 12%, #fff);color:var(--ok)}
.dock-txt{display:grid;line-height:1.3}
.dock-txt b{font-size:14.5px;font-weight:600}
.dock-txt small{font-size:13px;color:var(--muted)}
.dock-tip{display:none}
@media (max-width:639px){.dock-toggle{height:48px;padding:0 16px 0 13px}.dock-btn{width:auto;height:auto}}
@media (max-width:1023px){body:has(.mbar.show) .dock{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* điện thoại, trang chủ đang hiện thanh tổng tiền: thu nút liên hệ thành hình tròn nhỏ để không che nội dung */
@media (max-width:759px){body:has(.mbar.show) .dock:not(.is-open) .dock-lbl{display:none}body:has(.mbar.show) .dock:not(.is-open) .dock-toggle{width:48px;padding:0;justify-content:center}}

/* ---------- hộp chọn ngôn ngữ lần đầu, trang Bảng giá, phiếu thu size, tra cứu ---------- */
.lp-box{box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.pl-card,.pl-tbl-add,.ss-card,.track-form{border-radius:var(--r-lg)}
.pl-card{box-shadow:none}
.pl-from b{color:var(--ink)}
.pl-from em{background:color-mix(in srgb, #12A150 12%, #fff);color:var(--ok)}
.pl-tbl caption,.pl-tbl thead th,.ss-tbl th,.ss-facts dt,.ss-mine h2,.qd-terms h2{letter-spacing:0;text-transform:none;font-size:13px}
.pl-tbl tbody tr:last-child td,.pl-tbl-add td{color:var(--ink)}
.pl-tbl tbody th small{color:var(--ok)}
.pl-h{color:var(--ink)}
.ss-card{box-shadow:none}
.ss-card h2{color:var(--ink)}
.ss-steps li::before{background:var(--base-accent);color:#fff}
.ss-chip input:checked + span{background:color-mix(in srgb, var(--base-accent) 6%, #fff);color:var(--ink);border-color:var(--base-accent);box-shadow:inset 0 0 0 1px var(--base-accent)}
.ss-fresh{background:color-mix(in srgb, #12A150 10%, #fff);color:var(--ok);border:1px solid color-mix(in srgb, #12A150 30%, transparent)}
.qdoc::before{background:var(--base-accent)}
.qd-tbl thead th{letter-spacing:.02em;text-transform:none;font-size:12.5px}
.qd-title h1{text-transform:none;letter-spacing:-.02em}
.qd-sign b{text-transform:none;letter-spacing:0}
.kicker > span:last-child::before{display:none}
.contact-line{background:#FFFFFF;border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 16px 8px 8px}
.contact-line:hover{background:var(--soft)}
.contact-line [data-icon]{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb, var(--base-accent) 9%, #fff);color:var(--accent-text)}
.contact-line:hover [data-icon]{transform:none}
.contact-line small{font-size:13px;letter-spacing:0;text-transform:none}
/* nút liên hệ: màu hành động (thấy rõ cả trên nền sáng lẫn chân trang tối); điện thoại: chỉ biểu tượng tròn, không che nội dung */
.dock-toggle{background:var(--base-accent);box-shadow:0 0 0 3px #FFFFFF,0 10px 28px -10px rgba(14,40,38,.5)}
.dock-toggle:hover{background:color-mix(in srgb, var(--base-accent) 86%, #000)}
@media (max-width:759px){.dock:not(.is-open) .dock-lbl{display:none}.dock:not(.is-open) .dock-toggle{width:48px;padding:0;justify-content:center}}
.scheme-cobalt .scheme-paper .btn-primary{background:var(--base-accent);border-color:var(--base-accent);color:var(--base-on-accent);--spin:var(--base-on-accent)}
.scheme-cobalt .scheme-paper .btn-primary:hover{background:color-mix(in srgb, var(--base-accent) 86%, #000);border-color:color-mix(in srgb, var(--base-accent) 86%, #000)}
.scheme-cobalt .scheme-paper{--accent-text:var(--accent-on-light);--focus-c:var(--base-accent)}
.nf h1{font-size:var(--fs-display);line-height:1.2;letter-spacing:-.02em}
.nf h1::after{display:none}
.nf .meta{background:var(--soft);color:var(--ink-2);font-weight:600}
.lp-kicker{letter-spacing:0;text-transform:none;font-size:14px;color:var(--accent-text)}
.lp-opt{border:1px solid var(--line)}
.lp-opt:hover{transform:none;border-color:var(--line-input)}
.lp-opt.is-suggested{background:var(--base-accent);color:#FFFFFF;border-color:var(--base-accent)}
.lp-opt.is-suggested .lp-code{background:#FFFFFF;color:var(--base-accent)}
.lp-code{background:var(--soft)}
.lp-txt b{font-family:var(--font-b);font-weight:600;font-size:18px;letter-spacing:0}
.lp-opt:focus-visible{outline-color:var(--base-accent)}
.switch input:checked + .sw::after{background:#FFFFFF}
.st-views{background:color-mix(in srgb, var(--soft) 80%, var(--ink) 6%);box-shadow:none}
.seg button[aria-pressed="true"]{background:color-mix(in srgb, var(--base-accent) 6%, #fff);border-color:var(--base-accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--base-accent)}
/* không viết hoa toàn bộ chữ nhỏ có dấu (khó đọc): nhãn còn lại */
.tp-notes small,.kv dt,.res-sec h3,.msg-card small,.res-details dt,.pi-swatch i,.pi-fab-txt small,.pi-facts dt{text-transform:none;letter-spacing:0}
.pi-facts dt,.pi-fab-txt small,.kv dt,.res-details dt{font-size:13px;font-weight:500}
.res-sec h3{font-size:15px;font-weight:600}
.pi-swatch i{font-size:12px;font-weight:600}

/* =========================================================
   v6.15 — BỘ MÀU “CỔ VỊT & CHỈ ĐỒNG” (xem DESIGN.md)
   · accent  (--base-accent) = xanh cổ vịt: nút, link, ô đang chọn — màu hành động duy nhất
   · primary (--brand)       = màu chỉ đồng: đường chỉ may (nét đứt), dấu nhấn nhỏ, huy hiệu quà/giảm giá
   · accent2                 = rêu đen: thanh trên cùng, cột tối cạnh form, chân trang
   · nền vải mộc ấm, viền & chữ phụ pha từ màu chữ nên luôn cùng tông
   Màu chỉ đồng là màu trang trí: không dùng làm chữ nhỏ trên nền sáng (dùng --brand-ink).
   ========================================================= */
body,.scheme{
  --tint:color-mix(in srgb, var(--soft) 55%, #FFFFFF);                         /* nền ảnh sản phẩm, khung thử áo */
  --brand-ink:color-mix(in srgb, var(--brand) 58%, var(--c-dark));             /* chữ màu đồng đọc được trên nền sáng */
  --brand-lt:color-mix(in srgb, var(--brand) 82%, #FFFFFF);                    /* chữ màu đồng trên nền tối */
  --brand-tint:color-mix(in srgb, var(--brand) 14%, #FFFFFF);
  --stitch:repeating-linear-gradient(90deg, var(--brand) 0 9px, transparent 9px 15px);
}
.scheme-cobalt{--accent-text:var(--brand-lt);--hl-color:var(--brand-lt);--focus-c:var(--brand-lt)}
.scheme-cobalt .scheme-paper{--accent-text:var(--accent-on-light)}

/* đường chỉ may màu đồng: dưới cụm chữ nhấn, trước nhãn đầu mục, đầu thẻ phiếu */
.hero h1 .hl,.h2 .hl{color:var(--accent-text);background-image:var(--stitch);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:.16em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kicker{color:var(--brand-ink)}
.kicker > span:last-child::before{display:inline-block;content:"";width:26px;height:3px;margin-right:10px;vertical-align:middle;border-radius:0;background:var(--stitch);opacity:1}
.scheme-cobalt .kicker{color:var(--brand-lt)}
.quote-card{border-top:0;background-image:var(--stitch);background-size:calc(100% - 48px) 3px;background-position:24px 0;background-repeat:no-repeat}
.qdoc::before{background:var(--stitch);height:4px}

/* đầu trang, thanh trên cùng, chân trang */
.topbar{background:var(--base-accent2)}
.topbar-items span:first-child,.topbar-hot b{color:var(--brand-lt)}
.site-head::before{background:color-mix(in srgb, var(--bg) 92%, transparent)}
.foot-h{color:var(--brand-lt)}
.site-foot{background:var(--base-accent2)}

/* phần mở đầu */
.eyebrow .badge-t{background:var(--brand-tint);color:var(--brand-ink)}
.facts dt{color:var(--ink)}
.facts div:first-child dt{color:var(--accent-text)}
.hero-photo,.hmock,.tp,.quote-card,.fs,.ss-card,.pl-card,.order-card,.lp-box{border-color:color-mix(in srgb, var(--ink) 10%, var(--bg))}
.hmock-stage,.st-stage,.opt-thumb,.pl-art,.lb-img{background:var(--tint)}
.hmock-row,.tp-head,.tp-foot,.spec-card div + div{border-color:var(--line)}
.hmock-price small,.hero-photo figcaption,.spec-card small,.tp-notes small{color:var(--muted)}

/* bảng tính: dấu nhấn màu đồng cho giảm giá & quà, còn lại theo màu hành động */
.tier[aria-pressed="true"] span{color:var(--accent-text)}
.tier span{color:var(--muted)}
.qb-mark.qb-tier.is-on small{color:var(--accent-text)}
.qx-gift{background:var(--brand-tint);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent)}
.qx-gift [data-icon],.qx-gift svg,.qb-gift i,.qb-gift.is-on i{color:var(--brand-ink)}
.qb-gift i,.qb-gift.is-on i{border-color:var(--brand)}
.qb-gift small{color:var(--brand-ink)}
.est-tag::before{background:var(--brand)}
.quote-total{background:color-mix(in srgb, var(--soft) 70%, #FFFFFF)}
.quote-total b{color:var(--accent-text)}
.pl-from em,.pl-tbl tbody th small{background:var(--brand-tint);color:var(--brand-ink)}
.pl-tbl tbody th small{background:none}
.breakdown .disc dd{color:var(--brand-ink)}

/* cột tối cạnh form & tra cứu: số bước màu đồng */
.next-steps li:nth-child(n)::before{background:transparent;border:1.5px dashed var(--brand-lt);color:var(--brand-lt)}
.side-contact .link{text-decoration-color:var(--brand-lt)}
.form-sec h3::before{background:var(--brand)}

/* liên hệ nổi, hỏi đáp, phiếu thu size */
.dock-ic{background:color-mix(in srgb, var(--base-accent) 10%, #fff)}
.qa[open] summary i{background:var(--base-accent)}
.ss-steps li::before{background:transparent;border:1.5px dashed var(--brand);color:var(--brand-ink)}
.qd-tbl thead th{background:var(--base-accent2)}
.qd-words{border-left-color:var(--brand)}

/* =========================================================
   v6.16 — “CỔ VỊT & VÀNG NGHỆ”: màu tươi hơn + băng mở đầu tràn viền (học cách Uniqlo làm trang đầu)
   · Băng mở đầu tràn hết bề ngang, màu đặc rực, hình khối lớn (mảnh rập áo, cúc áo, đường chỉ), chữ rất to.
   · Đầu trang trong suốt nằm trên băng, cuộn xuống thì thành nền sáng.
   · Nút chính màu vàng nghệ (chữ tối) — nổi nhất trang; xanh cổ vịt cho ô đang chọn, link.
   · Ngay dưới băng: dải “Chọn sản phẩm để xem giá” (kiểu “Tìm theo danh mục”).
   ========================================================= */
/* nút chính: vàng nghệ, chữ tối */
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);--spin:var(--on-brand)}
.btn-primary:hover{background:color-mix(in srgb, var(--brand) 88%, #000);border-color:color-mix(in srgb, var(--brand) 88%, #000)}
.scheme-cobalt .btn-primary,.scheme-cobalt .scheme-paper .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);--spin:var(--on-brand)}
.scheme-cobalt .btn-primary:hover,.scheme-cobalt .scheme-paper .btn-primary:hover{background:color-mix(in srgb, var(--brand) 88%, #000);border-color:color-mix(in srgb, var(--brand) 88%, #000)}
.mbar .btn,.calc-nav .cn-go,.hmock-go{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.calc-nav .cn-go:hover,.hmock-go:hover{background:color-mix(in srgb, var(--brand) 88%, #000);color:var(--on-brand)}
.dock-toggle{background:var(--base-accent)}
.scroll-bar{background:var(--brand)}
.quote-total b{color:var(--ink)}
.quote-total{background:color-mix(in srgb, var(--brand) 16%, #FFFFFF);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent)}

/* ---------- băng mở đầu tràn viền ---------- */
.has-hero .hero{margin-top:calc(var(--head-h) * -1);padding-top:calc(var(--head-h) + clamp(28px,4.5vw,64px))}
.hero{position:relative;isolation:isolate;overflow:hidden;color:#FFFFFF;padding-bottom:clamp(48px,6vw,88px);
  background:radial-gradient(70% 90% at 85% 15%, color-mix(in srgb, var(--base-accent) 70%, #3FD3B5) 0, transparent 60%),
             linear-gradient(115deg, color-mix(in srgb, var(--base-accent) 58%, var(--base-accent2)) 0%, var(--base-accent) 55%, color-mix(in srgb, var(--base-accent) 82%, #34C8A9) 100%);
  --ink:#FFFFFF;--ink-2:rgba(255,255,255,.9);--muted:rgba(255,255,255,.8);--line:rgba(255,255,255,.22);--line-2:rgba(255,255,255,.35);--accent-text:var(--brand);--focus-c:var(--brand)}
@media (min-width:1024px){.hero{min-height:min(calc(100svh - 34px), 860px);display:grid;align-items:center}}
.hero-art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-art *{fill:none;vector-effect:non-scaling-stroke}
.ha-frame{stroke:rgba(255,255,255,.14);stroke-width:26}
.ha-piece{stroke:rgba(255,255,255,.16);stroke-width:3;stroke-dasharray:14 10}
.ha-line{stroke:rgba(255,255,255,.12);stroke-width:46;stroke-linecap:round}
.ha-stitch{stroke:var(--brand);stroke-width:4;stroke-dasharray:18 14;stroke-linecap:round;opacity:.95}
.ha-button circle{stroke:rgba(255,255,255,.2);stroke-width:5}
.ha-button circle:nth-child(1){fill:rgba(255,255,255,.06)}
.ha-dot{fill:color-mix(in srgb, var(--brand) 90%, transparent)!important;opacity:.9}
@media (max-width:759px){.ha-frame,.ha-piece{display:none}.ha-dot{opacity:.7}}
.hero h1{color:#FFFFFF;font-size:clamp(40px,6vw,84px);line-height:1.1;letter-spacing:-.025em;max-width:13ch}
html[lang="en"] .hero h1{font-size:clamp(38px,5.4vw,76px);max-width:14ch}
.hero h1 .hl{color:var(--brand);background-image:none;padding-bottom:0}
.hero .lead{color:rgba(255,255,255,.92);font-size:clamp(17px,1.35vw,20px);max-width:46ch}
.hero .eyebrow .badge-t{background:var(--brand);color:var(--on-brand);font-weight:600}
.hero .eyebrow .eyebrow-sub{color:rgba(255,255,255,.85)}
.hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#FFFFFF}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#FFFFFF;color:#FFFFFF}
.hero .facts{border-top-color:rgba(255,255,255,.25)}
.hero .facts div + div{border-left-color:rgba(255,255,255,.2)}
.hero .facts dt,.hero .facts div:first-child dt{color:#FFFFFF}
.hero .facts div:first-child dt{color:var(--brand)}
.hero .facts dd{color:rgba(255,255,255,.82)}
/* dàn áo: áo chính trên thẻ trắng, hai áo phía sau nhuộm vàng nghệ & trắng */
.hero-visual{position:relative}
.hlineup{position:absolute;inset:6% -4% 18% -10%;z-index:0;pointer-events:none}
.hl-side{position:absolute;width:58%;height:auto;aspect-ratio:856/1000;opacity:0;transition:opacity .5s var(--ease);filter:drop-shadow(0 24px 28px rgba(0,30,26,.35))}
.hl-side.on{opacity:1}
.hl-0{left:-6%;top:6%;transform:rotate(-8deg)}
.hl-1{right:-10%;top:0;transform:rotate(7deg)}
.hero .hmock{position:relative;z-index:1;max-width:440px;margin-inline:auto;border:0;box-shadow:0 30px 60px -28px rgba(0,30,26,.55);--ink:var(--c-dark);--muted:#5B625F;--line:#E6E1D6}
.hero .hmock .hmock-price b{color:var(--c-dark)}
@media (max-width:1023px){.hlineup{inset:4% 0 22% 0}.hl-side{width:50%}}
@media (max-width:639px){.hlineup{display:none}}

/* đầu trang trong suốt trên băng mở đầu */
html.has-hero:not(.head-solid):not(.menu-open) .site-head{border-bottom-color:transparent}
html.has-hero:not(.head-solid):not(.menu-open) .site-head::before{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .brand-logo{filter:brightness(0) invert(1)}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .brand-tag{color:rgba(255,255,255,.8);border-left-color:rgba(255,255,255,.35)}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a,html.has-hero:not(.head-solid):not(.menu-open) .head-track{color:#FFFFFF}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a:hover,html.has-hero:not(.head-solid):not(.menu-open) .head-track:hover{background:rgba(255,255,255,.14);color:#FFFFFF}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a[aria-current]{background:rgba(255,255,255,.18);color:#FFFFFF}
html.has-hero:not(.head-solid):not(.menu-open) .ls-head{background:rgba(255,255,255,.16)}
html.has-hero:not(.head-solid):not(.menu-open) .ls-head a{color:#FFFFFF}
html.has-hero:not(.head-solid):not(.menu-open) .ls-head a[aria-current="true"]{background:#FFFFFF;color:var(--c-dark)}
html.has-hero:not(.head-solid):not(.menu-open) .menu-btn{border-color:rgba(255,255,255,.6)}
html.has-hero:not(.head-solid):not(.menu-open) .menu-btn span{background:#FFFFFF}
html.has-hero:not(.head-solid):not(.menu-open) .site-head :focus-visible{outline-color:var(--brand)}
.site-head,.site-head::before{transition:background-color .25s var(--ease),border-color .25s var(--ease)}

/* ---------- dải chọn nhanh theo sản phẩm ---------- */
.cats{padding-block:clamp(28px,4vw,48px) clamp(8px,1vw,12px);background:#FFFFFF;border-bottom:1px solid var(--line)}
.cats-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:var(--s-4)}
.cats-h{font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.015em}
.cats-head .link{font-size:14.5px;color:var(--accent-text)}
.cats-list{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:12px;overflow-x:auto;padding-bottom:18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.cats-list li{scroll-snap-align:start}
.cat{display:grid;justify-items:center;gap:4px;width:100%;padding:12px 8px 14px;border-radius:var(--r-lg);text-align:center;transition:background-color var(--dur)}
.cat:hover{background:var(--tint)}
.cat-art{display:grid;place-items:center;width:112px;height:112px;margin-bottom:6px;border-radius:50%;background:var(--tint);overflow:hidden;transition:transform .25s var(--ease),background-color var(--dur)}
.cat:hover .cat-art{transform:translateY(-3px);background:color-mix(in srgb, var(--brand) 30%, #fff)}
.cat-art img,.cat-art svg{width:82%;height:82%;object-fit:contain}
.cat b{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink);max-width:16ch}
.cat small{font-size:13px;color:var(--muted)}
.cat small .num{color:var(--accent-text);font-weight:600}
.cat:focus-visible{outline-offset:2px}
@media (max-width:639px){.cats-list{grid-auto-columns:120px}.cat-art{width:88px;height:88px}}
@media (max-width:759px){.ha-button{display:none}}
.cats-head .link{display:inline-flex;align-items:center;min-height:36px}

/* =========================================================
   v6.17 — PHẦN DƯỚI NỔI BẬT HƠN, CÙNG TINH THẦN BĂNG MỞ ĐẦU
   · Dải chọn sản phẩm: mỗi sản phẩm một ô màu (cổ vịt / vàng nghệ / cổ vịt đậm / kem) như các ô màu của trang thời trang.
   · Bảng báo giá: nền xanh cổ vịt rất nhạt, số bước tròn vàng nghệ, tiêu đề bước có vạch màu.
   · Phiếu dự toán: đầu phiếu băng xanh cổ vịt + đường chỉ vàng nghệ; ô tổng tiền khối tối, số tiền vàng nghệ cỡ lớn.
   · Gửi yêu cầu: cả phần là băng xanh cổ vịt (như băng mở đầu), form trắng nổi trên băng.
   · Đường chỉ vàng nghệ nối giữa các phần.
   ========================================================= */
/* đường chỉ nối giữa các phần */
.cats,#calculator,#faq{position:relative}
.cats::after,#calculator::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:repeating-linear-gradient(90deg, var(--brand) 0 22px, transparent 22px 36px);z-index:2;pointer-events:none}

/* ---------- dải chọn sản phẩm: ô màu ---------- */
.cats{background:#FFFFFF;border-bottom:0;padding-bottom:clamp(28px,3.5vw,44px)}
.cats-list{gap:14px}
.cat{padding:0;border-radius:var(--r-xl);overflow:hidden;background:var(--cat-bg);color:var(--cat-ink);text-align:left;justify-items:stretch;gap:0;
  --cat-bg:var(--base-accent);--cat-ink:#FFFFFF;--cat-sub:rgba(255,255,255,.85);--cat-price:var(--brand);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cats-list li:nth-child(4n+2) .cat{--cat-bg:var(--brand);--cat-ink:var(--c-dark);--cat-sub:color-mix(in srgb, var(--c-dark) 75%, var(--brand));--cat-price:var(--c-dark)}
.cats-list li:nth-child(4n+3) .cat{--cat-bg:var(--base-accent2);--cat-ink:#FFFFFF;--cat-sub:rgba(255,255,255,.8);--cat-price:var(--brand)}
.cats-list li:nth-child(4n+4) .cat{--cat-bg:color-mix(in srgb, var(--soft) 80%, #fff);--cat-ink:var(--ink);--cat-sub:var(--muted);--cat-price:var(--accent-text)}
.cat:hover{background:var(--cat-bg);transform:translateY(-4px);box-shadow:0 18px 32px -18px rgba(6,48,43,.55)}
.cat-art{width:100%;height:auto;aspect-ratio:1/1;margin:0;border-radius:0;background:radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.28), transparent 70%)}
.cat:hover .cat-art{transform:none;background:radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.4), transparent 70%)}
.cat-art img,.cat-art svg{width:78%;height:78%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));transition:transform .3s var(--ease)}
.cat:hover .cat-art img,.cat:hover .cat-art svg{transform:scale(1.05) rotate(-2deg)}
.cat b{display:block;padding:12px 14px 0;color:var(--cat-ink);font-size:15px;max-width:none}
.cat small{display:block;padding:2px 14px 14px;color:var(--cat-sub)}
.cat small .num{color:var(--cat-price);font-size:15px}
@media (max-width:639px){.cats-list{grid-auto-columns:150px}}

/* ---------- bảng báo giá ---------- */
#calculator.sec-soft{background:linear-gradient(180deg, color-mix(in srgb, var(--base-accent) 9%, #FFFFFF) 0, color-mix(in srgb, var(--base-accent) 5%, var(--bg)) 100%)}
#calc-title{color:var(--ink)}
.calc-steps > .fs:nth-child(n) .step{min-width:34px;height:34px;padding:0;border-radius:50%;background:var(--brand);color:var(--on-brand);font-weight:600;font-size:13.5px}
.fs{border:0;box-shadow:0 1px 2px rgba(6,48,43,.06),0 10px 30px -18px rgba(6,48,43,.28)}
.fs-head{border-bottom:2px solid color-mix(in srgb, var(--base-accent) 14%, #fff)}
.fs-head h3{color:var(--accent-text)}
.opt-tile:has(input:checked){background:color-mix(in srgb, var(--base-accent) 10%, #fff)}
.opt-tile:has(input:checked) .opt-main b{color:var(--accent-text)}
.opt-tile .mark{border-color:var(--line-input)}
.tier[aria-pressed="true"]{background:var(--base-accent);border-color:var(--base-accent);color:#FFFFFF;box-shadow:none}
.tier[aria-pressed="true"] span{color:var(--brand)}
.check:has(input:checked){background:color-mix(in srgb, var(--base-accent) 9%, #fff)}
.check:has(input:checked) .check-price{color:var(--accent-text)}
.pl-chip:has(input:checked){background:var(--base-accent);color:#FFFFFF;box-shadow:none}
.pl-chip:has(input:checked) .pl-n{background:var(--brand);color:var(--on-brand)}
.calc-nav a[aria-current="step"]{background:color-mix(in srgb, var(--base-accent) 12%, #fff);color:var(--accent-text)}
.calc-nav a[aria-current="step"] .cn-n{color:var(--accent-text)}

/* ---------- phiếu dự toán ---------- */
.quote-card{background-image:none;border:0;box-shadow:0 2px 4px rgba(6,48,43,.06),0 30px 60px -30px rgba(6,48,43,.45);--qp:clamp(22px,2.6vw,34px)}
.quote-head{margin:calc(var(--qp) * -1) calc(var(--qp) * -1) 0;padding:18px var(--qp) 20px;background:var(--base-accent);color:#FFFFFF;position:relative}
.quote-head::after{content:"";position:absolute;left:var(--qp);right:var(--qp);bottom:8px;height:3px;background:repeating-linear-gradient(90deg, var(--brand) 0 10px, transparent 10px 16px)}
.quote-head h3{color:#FFFFFF}
.quote-head .est-tag{border-color:rgba(255,255,255,.45);color:#FFFFFF;background:rgba(255,255,255,.08)}
.quote-head .est-tag::before{background:var(--brand)}
.quote-total{background:var(--base-accent2);box-shadow:none;color:#FFFFFF;padding:18px 20px}
.quote-total span{color:var(--brand-lt)}
.quote-total b{color:var(--brand);font-size:clamp(34px,3.2vw,46px)}
.quote-total small{color:rgba(255,255,255,.88)}
.quote-unit b{color:var(--accent-text)}
.breakdown dd{color:var(--ink)}
@media print{body.print-quote .quote-head,body.print-quote .quote-total{background:#fff!important;color:#000!important;margin:0;padding-inline:0}body.print-quote .quote-head::after{display:none}body.print-quote .quote-total b,body.print-quote .quote-head h3{color:#000!important}}

/* ---------- gửi yêu cầu: băng xanh cổ vịt như phần mở đầu ---------- */
#order-form{background:linear-gradient(115deg, color-mix(in srgb, var(--base-accent) 62%, var(--base-accent2)) 0%, var(--base-accent) 60%, color-mix(in srgb, var(--base-accent) 85%, #34C8A9) 100%);overflow:hidden;isolation:isolate}
#order-form::before{content:"";position:absolute;z-index:-1;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:color-mix(in srgb, var(--brand) 85%, transparent);opacity:.9}
#order-form::after{content:"";position:absolute;z-index:-1;left:0;right:0;top:46%;height:4px;background:repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 22px, transparent 22px 36px)}
#order-form .order-side{background:transparent;border:0;padding-inline:0;box-shadow:none}
#order-form .order-side .h2{font-size:clamp(32px,3.4vw,48px)}
#order-form .order-side .kicker{color:var(--brand)}
#order-form .next-steps li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
#order-form .next-steps li:nth-child(n)::before{background:var(--brand);border:0;color:var(--on-brand)}
#order-form .side-contact{color:rgba(255,255,255,.88)}
#order-form .order-card{border:0;box-shadow:0 30px 60px -28px rgba(0,30,26,.6)}
.form-sec h3{color:var(--accent-text)}
.form-sec h3::before{background:var(--brand)}
.summary{background:color-mix(in srgb, var(--base-accent) 6%, #fff);border:1.5px dashed color-mix(in srgb, var(--base-accent) 45%, transparent)}
.summary .sum-total b{color:var(--accent-text)}

/* ---------- hỏi đáp ---------- */
#faq.sec-soft{background:#FFFFFF}
#faq .faq-side .h2{color:var(--ink)}
.faq-list{border-top:0;display:grid;gap:10px}
.qa{border:0;border-radius:var(--r-lg);background:color-mix(in srgb, var(--soft) 55%, #fff);padding-inline:20px;transition:background-color var(--dur)}
.qa summary{min-height:64px}
.qa[open]{background:color-mix(in srgb, var(--base-accent) 8%, #fff);box-shadow:inset 4px 0 0 var(--base-accent)}
.qa[open] summary{color:var(--accent-text)}
.qa summary i{background:#FFFFFF}
.qa[open] summary i{background:var(--brand);color:var(--on-brand)}
.qa-a{padding-right:20px}
.contact-line [data-icon]{background:var(--brand);color:var(--on-brand)}

/* ---------- chân trang: đường chỉ trên đầu ---------- */
.site-foot{position:relative}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg, var(--brand) 0 22px, transparent 22px 36px)}
#order-form::after{display:none}
@media (max-width:759px){#order-form::before{width:180px;height:180px;right:-90px;top:-90px}}

/* =========================================================
   v6.18 — BĂNG MỞ ĐẦU SÁNG / ĐẬM THEO BỘ MÀU + MÀU NHẤN TRÊN KHỐI TỐI
   · --hero-* do máy chủ tính theo theme.heroStyle ("light": pastel sáng chữ tối, kiểu banner ảnh studio · "bold": màu đậm chữ trắng)
   · --pop-dk = màu điểm nhấn dùng trên nền tối (bộ màu có điểm nhấn tối như navy → tự đổi sang màu sáng)
   ========================================================= */
body,.scheme{--brand-lt:color-mix(in srgb, var(--pop-dk, var(--brand)) 85%, #FFFFFF)}
/* băng mở đầu */
.hero{background:var(--hero-bg);color:var(--hero-ink);--ink:var(--hero-ink);--ink-2:var(--hero-sub);--muted:var(--hero-sub);--line:var(--hero-line);--line-2:var(--hero-line);--accent-text:var(--hero-hl)}
.hero h1{color:var(--hero-ink)}
.hero h1 .hl{color:var(--hero-hl)}
.hero .lead,.hero .eyebrow .eyebrow-sub,.hero .facts dd{color:var(--hero-sub)}
.hero .eyebrow .badge-t{background:var(--hero-badge);color:var(--hero-on-badge)}
.hero .facts{border-top-color:var(--hero-line)}
.hero .facts div + div{border-left-color:var(--hero-line)}
.hero .facts dt{color:var(--hero-ink)}
.hero .facts div:first-child dt{color:var(--hero-hl)}
.hero .btn-ghost{border-color:color-mix(in srgb, var(--hero-ghost) 55%, transparent);color:var(--hero-ghost);background:transparent}
.hero .btn-ghost:hover{background:color-mix(in srgb, var(--hero-ghost) 10%, transparent);border-color:var(--hero-ghost);color:var(--hero-ghost)}
.ha-frame{stroke:var(--hero-art)}
.ha-piece{stroke:var(--hero-art)}
.ha-line{stroke:var(--hero-art)}
.ha-button circle{stroke:var(--hero-art)}
.ha-dot{fill:var(--hero-dot)!important}
.hero .hmock{box-shadow:0 30px 60px -28px var(--hero-shadow)}
.hl-side{filter:drop-shadow(0 24px 28px var(--hero-shadow))}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .brand-logo{filter:var(--hero-logo, brightness(0) invert(1))}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .brand-tag{color:var(--hero-sub);border-left-color:var(--hero-line)}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a,html.has-hero:not(.head-solid):not(.menu-open) .head-track,html.has-hero:not(.head-solid):not(.menu-open) .ls-head a{color:var(--hero-ink)}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a:hover,html.has-hero:not(.head-solid):not(.menu-open) .head-track:hover{background:color-mix(in srgb, var(--hero-ink) 10%, transparent);color:var(--hero-ink)}
html.has-hero:not(.head-solid):not(.menu-open) .site-head .nav a[aria-current]{background:color-mix(in srgb, var(--hero-ink) 12%, transparent);color:var(--hero-ink)}
html.has-hero:not(.head-solid):not(.menu-open) .ls-head{background:color-mix(in srgb, var(--hero-ink) 12%, transparent)}
html.has-hero:not(.head-solid):not(.menu-open) .menu-btn{border-color:color-mix(in srgb, var(--hero-ink) 55%, transparent)}
html.has-hero:not(.head-solid):not(.menu-open) .menu-btn span{background:var(--hero-ink)}

/* màu điểm nhấn trên nền tối / nền màu */
.quote-total b{color:var(--pop-dk)}
.quote-total span{color:var(--brand-lt)}
.tier[aria-pressed="true"] span{color:var(--pop-dk)}
.mbar .btn{background:var(--pop-dk);border-color:var(--pop-dk);color:var(--c-dark)}
.site-foot::before{background:repeating-linear-gradient(90deg, var(--pop-dk) 0 22px, transparent 22px 36px)}
.quote-head::after{background:repeating-linear-gradient(90deg, var(--pop-dk) 0 10px, transparent 10px 16px)}
.quote-head .est-tag::before{background:var(--pop-dk)}
#order-form .order-side .kicker{color:var(--brand-lt)}
#order-form::before{background:color-mix(in srgb, var(--pop-dk) 80%, transparent);opacity:.55}
.cats-list li:nth-child(4n+1) .cat{--cat-price:var(--pop-dk)}
.cats-list li:nth-child(4n+2) .cat{--cat-ink:var(--on-brand);--cat-sub:color-mix(in srgb, var(--on-brand) 80%, var(--brand));--cat-price:var(--on-brand)}
.cats-list li:nth-child(4n+3) .cat{--cat-price:var(--pop-dk)}
.cats-list li:nth-child(4n+3) .cat{--cat-bg:var(--tile3);--cat-ink:var(--tile3-ink);--cat-sub:color-mix(in srgb, var(--tile3-ink) 78%, var(--tile3));--cat-price:var(--tile3-ink)}
/* phần gửi yêu cầu: cùng kiểu băng với phần mở đầu (sáng hoặc đậm theo bộ màu) */
#order-form{background:var(--hero-bg)}
#order-form .order-side{--ink:var(--hero-ink);--ink-2:var(--hero-sub);--muted:var(--hero-sub);--line:var(--hero-line);color:var(--hero-ink)}
#order-form .order-side .h2,#order-form .order-side b{color:var(--hero-ink)}
#order-form .order-side .kicker{color:var(--hero-hl)}
#order-form .next-steps li{background:color-mix(in srgb, var(--hero-ink) 7%, transparent);border-color:color-mix(in srgb, var(--hero-ink) 12%, transparent)}
#order-form .next-steps li:nth-child(n)::before{background:var(--hero-badge);color:var(--hero-on-badge)}
#order-form .side-contact,#order-form .side-contact .link{color:var(--hero-ink)}
#order-form .side-contact .link{text-decoration-color:var(--hero-hl)}
#order-form::before{background:var(--hero-dot);opacity:1}
.qdoc-page{background:color-mix(in srgb, var(--soft) 45%, var(--bg))}
.ss-steps{background:color-mix(in srgb, var(--soft) 55%, #fff)}

/* =========================================================
   v6.19 — NỔI BẬT HƠN: dải chuyển sắc điểm nhấn (xanh dừa cạn → tím), nhãn nổi quanh áo, tiêu đề to hơn,
   nút chính có quầng sáng, ô sản phẩm chuyển sắc, đầu phiếu chuyển sắc.
   --grad-a / --grad-b (sáng, dùng làm nền) · --grad-dk-a / --grad-dk-b (đậm hơn, dùng làm chữ) — máy chủ tính theo bộ màu.
   ========================================================= */
:root{--grad:linear-gradient(110deg, var(--grad-a), var(--grad-b));--grad-text:linear-gradient(100deg, var(--grad-dk-a), var(--grad-dk-b))}
/* chữ nhấn chuyển sắc */
.hero h1 .hl{background:var(--hero-hl-bg);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.h2 .hl,.cats-h .hl{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.h2 .hl{background-image:var(--grad-text),var(--stitch);background-size:100% 100%,100% 3px;background-position:0 0,0 100%;background-repeat:no-repeat;-webkit-background-clip:text,border-box;background-clip:text,border-box;padding-bottom:.16em}
/* tiêu đề các phần to, đậm hơn */
.h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.025em}
.cats-h{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em}
.kicker{display:inline-flex;width:max-content;padding:6px 14px 6px 12px;border-radius:999px;background:color-mix(in srgb, var(--grad-a) 12%, #fff);color:var(--grad-dk-a);font-weight:600}
.kicker > span:last-child::before{width:16px;background:repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px)}
.scheme-cobalt .kicker,#order-form .order-side .kicker{background:color-mix(in srgb, #fff 70%, transparent);color:var(--grad-dk-a)}
/* nút chính có quầng sáng */
.btn-primary{box-shadow:0 12px 26px -12px color-mix(in srgb, var(--grad-a) 75%, transparent)}
.btn-primary:hover{box-shadow:0 16px 30px -12px color-mix(in srgb, var(--grad-b) 80%, transparent);transform:translateY(-1px)}
.btn-lg.btn-primary{background-image:linear-gradient(110deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--grad-b)))}

/* ---------- băng mở đầu: nhãn nổi quanh áo ---------- */
.hchips{position:absolute;inset:0;z-index:3;pointer-events:none}
.hchip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;border-radius:999px;background:color-mix(in srgb, #FFFFFF 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--c-dark);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 14px 30px -14px var(--hero-shadow),inset 0 0 0 1px rgba(255,255,255,.7);animation:chip-in .6s var(--ease) both}
.hchip svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--grad);color:#FFFFFF;flex:none}
.hc-1{left:-8%;top:16%;animation-delay:.2s}
.hc-2{right:-6%;top:44%;animation-delay:.35s}
.hc-3{left:-4%;bottom:20%;animation-delay:.5s}
@keyframes chip-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.hchip{animation:none}}
@media (max-width:1279px){.hc-1{left:0}.hc-2{right:0}.hc-3{left:2%}}
@media (max-width:639px){.hchip{font-size:12.5px;padding:8px 12px 8px 9px}.hc-3{display:none}.hc-1{top:6%}.hc-2{top:auto;bottom:24%}}
.hero .hmock{border-radius:28px;padding:14px}
.hero .hmock-stage{border-radius:20px;background:linear-gradient(160deg, #FFFFFF, color-mix(in srgb, var(--soft) 60%, #fff))}

/* ---------- dải sản phẩm: ô chuyển sắc ---------- */
.cats{background:linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--soft) 22%, #fff))}
.cats-list li:nth-child(4n+1) .cat{--cat-bg:var(--grad)}
.cats-list li:nth-child(4n+2) .cat{--cat-bg:linear-gradient(150deg, var(--brand), color-mix(in srgb, var(--brand) 60%, var(--grad-b)))}
.cats-list li:nth-child(4n+3) .cat{--cat-bg:linear-gradient(150deg, var(--tile3), color-mix(in srgb, var(--tile3) 70%, var(--grad-b)))}
.cats-list li:nth-child(4n+4) .cat{--cat-bg:linear-gradient(150deg, #FFFFFF, color-mix(in srgb, var(--soft) 55%, #fff));box-shadow:inset 0 0 0 1px var(--line)}
.cat{background:var(--cat-bg)}
.cat:hover{background:var(--cat-bg);box-shadow:0 22px 40px -20px color-mix(in srgb, var(--grad-a) 80%, transparent)}
.cat-art{background:radial-gradient(60% 55% at 50% 45%, rgba(255,255,255,.4), transparent 72%)}

/* ---------- bảng báo giá & phiếu ---------- */
#calculator.sec-soft{background:radial-gradient(50% 40% at 100% 0, color-mix(in srgb, var(--soft) 70%, transparent), transparent 70%),linear-gradient(180deg, color-mix(in srgb, var(--grad-a) 7%, #FFFFFF), color-mix(in srgb, var(--soft) 25%, var(--bg)))}
.calc-steps > .fs:nth-child(n) .step{background:var(--grad);color:#FFFFFF}
.quote-head{background:var(--grad)}
.quote-total{background:radial-gradient(80% 120% at 100% 0, color-mix(in srgb, var(--grad-b) 55%, transparent), transparent 60%),var(--base-accent2)}
.quote-total b{background:linear-gradient(100deg, #FFFFFF, var(--pop-dk));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tier[aria-pressed="true"],.pl-chip:has(input:checked){background:var(--grad);border-color:transparent}
.q-li.is-on .q-n,.qa[open] summary i,.contact-line [data-icon]{background:var(--grad);color:#FFFFFF}
.qb-fill{background:var(--grad)}
#order-form .next-steps li:nth-child(n)::before{background:var(--grad);color:#FFFFFF}
.dock-toggle{background:var(--grad)}
.scroll-bar{background:var(--grad)}
@media print{body.print-quote .quote-total b{-webkit-text-fill-color:#000;color:#000;background:none}}
/* đường chỉ: băng sáng → xanh dừa cạn, băng đậm → màu điểm nhấn */
body,.scheme{--stitch:repeating-linear-gradient(90deg, var(--stitch-c, var(--brand)) 0 9px, transparent 9px 15px)}
.cats::after,#calculator::after{background:repeating-linear-gradient(90deg, var(--stitch-c, var(--brand)) 0 22px, transparent 22px 36px);opacity:.75}
.ha-stitch{stroke:var(--stitch-c, var(--brand))}

/* =========================================================
   v6.20 — PHẦN MỞ ĐẦU: QUẦN ÁO ĐỨNG TỰ DO TRÊN NỀN (không khung), kiểu ảnh studio
   · áo chính ở giữa (đổi màu được), hai áo phía sau màu pastel, bóng đổ dưới sàn
   · chấm màu & giá nằm trong một viên kính mờ phía dưới, nhãn "Minh hoạ" nhỏ
   ========================================================= */
.hero .hmock.hmock-free{background:none;border:0;box-shadow:none;padding:0;max-width:540px;transform:none;--ink:var(--hero-ink);--muted:var(--hero-sub)}
.hmock-free .hmock-stage{background:none;border-radius:0;aspect-ratio:428/440;overflow:visible}
.hmock-free .hmock-stage canvas{inset:-2% 2% auto;width:96%;filter:drop-shadow(0 26px 22px rgba(20,24,60,.28)) drop-shadow(0 4px 6px rgba(20,24,60,.12))}
/* bóng sàn mềm dưới chân áo */
.hmock-free .hmock-stage::after{content:"";position:absolute;left:14%;right:14%;bottom:-2%;height:9%;border-radius:50%;background:radial-gradient(closest-side, rgba(20,24,60,.28), transparent);filter:blur(4px);z-index:-1}
.hmock-free .tp-tag{top:auto;bottom:6%;left:auto;right:6%;font-size:12px;padding:3px 9px;background:rgba(20,24,60,.55)}
.hmock-free .hmock-foot{justify-items:center;padding:0;margin-top:clamp(10px,1.4vw,18px)}
.hmock-free .hmock-sw{padding:8px 10px;border-radius:999px;background:color-mix(in srgb, #FFFFFF 70%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 24px -14px var(--hero-shadow)}
.hmock-free .hsw{width:24px;height:24px}
.hmock-free .hmock-row{width:100%;max-width:440px;border-top:0;margin-top:2px;padding:8px 8px 8px 20px;border-radius:999px;background:color-mix(in srgb, #FFFFFF 82%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 34px -18px var(--hero-shadow)}
.hmock-free .hmock-price small{color:#5B6070}
.hmock-free .hmock-price b{color:var(--c-dark)}
.hmock-free .hmock-go{border-radius:999px}
/* hai áo phía sau: to hơn, gần áo chính hơn, như một dàn trưng bày */
.hlineup{inset:2% -2% 26% -2%}
.hl-side{width:62%;filter:drop-shadow(0 22px 20px rgba(20,24,60,.24))}
.hl-0{left:-12%;top:8%;transform:rotate(-9deg)}
.hl-1{right:-14%;top:4%;transform:rotate(8deg)}
@media (max-width:1023px){.hlineup{inset:0 4% 30% 4%}.hl-side{width:52%}}
@media (max-width:639px){.hlineup{display:block;inset:2% 0 32% 0}.hl-side{width:50%}.hl-0{left:-6%}.hl-1{right:-6%}}
/* nhãn nổi xếp quanh dàn áo */
.hc-1{left:-10%;top:12%}
.hc-2{right:-8%;top:40%}
.hc-3{left:-6%;bottom:26%}
@media (max-width:1279px){.hc-1{left:-2%}.hc-2{right:-2%}.hc-3{left:0}}
@media (max-width:639px){.hc-1{left:0;top:2%}.hc-2{right:0;bottom:34%;top:auto}}
@media (max-width:639px){.hc-2{right:0;top:46%;bottom:auto}.hmock-free .tp-tag{bottom:auto;top:3%;right:3%}.hmock-free .hmock-row{border-radius:22px;padding:12px 12px 12px 18px}}

/* =========================================================
   v6.21 — NỀN ẢNH SẢN PHẨM TRUNG TÍNH, KIỂU PHÔNG CHỤP STUDIO
   Ô sản phẩm & khung thử áo không lấy màu đậm của bộ màu nữa (dễ “lệch tông” với màu áo);
   dùng phông xám rất nhạt ngả theo màu chữ + bốn tông pastel dịu lấy từ chồng áo trong ảnh banner
   (xanh khói · kem · xanh xô thơm · hồng phấn). Chữ tối, giá theo màu hành động.
   ========================================================= */
body,.scheme{--tint:color-mix(in srgb, var(--c-dark, #111) 4%, #F4F4F6);--studio-bg:radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, color-mix(in srgb, var(--c-dark, #111) 3%, #F3F3F5) 55%, color-mix(in srgb, var(--c-dark, #111) 7%, #ECECEF) 100%)}
/* khung thử áo & ảnh mẫu: phông studio */
.st-stage{background:var(--studio-bg);border-color:color-mix(in srgb, var(--ink) 9%, transparent)}
.st-views{background:color-mix(in srgb, var(--ink) 7%, #F1F1F3)}
.opt-thumb,.md-art,.pl-art,.lb-img{background:var(--studio-bg)}
.st-art canvas,.st-art svg.garment{filter:drop-shadow(0 18px 18px rgba(20,24,40,.16))}

/* dải chọn sản phẩm: thẻ sáng, tông pastel dịu xoay vòng */
.cats-list li .cat,.cats-list li:nth-child(n) .cat{--cat-ink:var(--ink);--cat-sub:color-mix(in srgb, var(--ink) 62%, transparent);--cat-price:var(--accent-text);
  background:linear-gradient(170deg, #FFFFFF 0%, var(--cat-tone) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent)}
.cats-list li:nth-child(4n+1) .cat{--cat-tone:#DCE2F2}   /* xanh khói */
.cats-list li:nth-child(4n+2) .cat{--cat-tone:#EFE5D6}   /* kem */
.cats-list li:nth-child(4n+3) .cat{--cat-tone:#DFE6D8}   /* xanh xô thơm */
.cats-list li:nth-child(4n+4) .cat{--cat-tone:#F0E1EA}   /* hồng phấn */
.cat:hover,.cats-list li:nth-child(n) .cat:hover{background:linear-gradient(170deg, #FFFFFF 0%, var(--cat-tone) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent),0 18px 34px -20px rgba(20,24,40,.35)}
.cat-art,.cat:hover .cat-art{background:none}
.cat-art{position:relative}
.cat-art::after{content:"";position:absolute;left:24%;right:24%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side, rgba(20,24,40,.18), transparent);z-index:0}
.cat-art img,.cat-art svg{position:relative;z-index:1;filter:drop-shadow(0 10px 12px rgba(20,24,40,.16))}
.cat b{color:var(--ink)}
.cat small{color:var(--cat-sub)}
.cat small .num{color:var(--accent-text)}

/* =====================================================================
   v6.22 — chữ tiếng Việt & canh chữ trong nút
   - Font Be Vietnam Pro lưu sẵn nay có thêm mũi tên → ← ↑ ↓, dấu ✓ ★ và dấu ghép (khi chữ gõ dạng tổ hợp),
     nên các ký hiệu này không còn mượn font hệ thống (khác nét, khác độ đậm, đẩy chữ lệch khỏi tâm nút).
   - Font dự phòng "Be Vietnam Pro Fallback" (theme.js) chỉnh cỡ & khoảng dòng giống font chính → chữ không nhảy khi font tải xong.
   ===================================================================== */
/* chữ nhỏ nhất 12px: dấu tiếng Việt (ạ, ặ, ữ…) ở cỡ 10–11px bị dính, khó đọc */
.hmock-stage .tp-tag,.hmock-free .tp-tag{font-size:12px}
.pi-swatch i,.pl-chip small,.qb-mark small,.pl-from em,th small{font-size:12px}
.curve-plot svg text{font-size:12px}
/* tiêu đề: không ép khít (dấu chồng tầng như "Ữ, ẩ" bị dính vào chữ bên cạnh) */
.pl-h,.track-empty h2,.res-empty h2{letter-spacing:-.015em}
/* nút: một dòng, chữ & biểu tượng canh giữa theo cùng một trục */
.btn,.dock-btn,.dock-toggle,.hchip,.chip{line-height:1.2}
.btn > svg,.btn .ic,.dock-btn > svg,.hchip > svg{flex:none;align-self:center}
.btn .arr{display:inline-block;line-height:1;margin-inline-start:-2px}
/* link gạch chân: đường gạch không cắt qua phần dưới của g, y, p */
a{text-underline-offset:.2em;text-decoration-skip-ink:auto}

/* =====================================================================
   v6.23 — chọn chất vải theo từng sản phẩm (bước 01)
   Thẻ vải: ảnh cận vải (bấm để soi gần) · tên · thành phần · đặc điểm · đơn giá may theo vải.
   Đang chọn: viền màu hành động + dấu ✓; nhãn nổi bật (Bán chạy / Nên chọn / Giá tốt) gắn trên mép thẻ.
   ===================================================================== */
.prod-info{gap:16px;padding:16px;background:#FFFFFF}
.fab-pick{display:grid;gap:12px;min-width:0}
.fab-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.fab-head h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--title)}
.fab-head small{font-size:13px;color:var(--muted)}
.fab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));gap:16px 12px;padding-top:6px}
.fab-grid.is-one{grid-template-columns:minmax(0,1fr);padding-top:0}
.fab-card{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:14px;row-gap:6px;
  padding:16px 14px 14px;border-radius:16px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.fab-card.is-only{padding:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.fab-lab{display:contents;cursor:pointer}
.fab-card.is-only .fab-lab{cursor:default}
.fab-in{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fab-card:not(.is-only):hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 45%, var(--line)),0 14px 28px -20px rgba(20,24,60,.4)}
.fab-card.is-on{box-shadow:inset 0 0 0 2px var(--accent),0 14px 30px -22px color-mix(in srgb, var(--accent) 80%, transparent)}
.fab-card:has(.fab-in:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.fab-sw{grid-row:1 / span 2;position:relative;display:block;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--tint,#F4F4F6);box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
.fab-sw img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.fab-card:hover .fab-sw img{transform:scale(1.06)}
.fab-sw i{position:absolute;left:4px;top:4px;padding:1px 6px;border-radius:var(--pill);background:rgba(20,24,40,.62);color:#FFFFFF;font-style:normal;font-size:12px;font-weight:600;line-height:1.5}
.fab-ph{display:grid;place-items:center;width:100%;height:100%;color:var(--muted)}
.fab-txt{grid-column:2;grid-row:1;display:grid;gap:3px;align-content:start;min-width:0}
.fab-txt b{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.fab-txt small{font-size:13px;line-height:1.4;color:var(--muted)}
.fab-note{font-size:13px;line-height:1.45;color:color-mix(in srgb, var(--ink) 78%, transparent)}
.fab-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:4px}
.fab-price b{font-size:16px;font-weight:600;color:var(--accent-text)}
.fab-price small{font-size:12.5px;color:var(--muted)}
.fab-diff{align-self:center;padding:1px 8px;border-radius:var(--pill);background:color-mix(in srgb, var(--accent) 10%, #FFFFFF);color:var(--accent-text);font-size:12px;font-weight:600;line-height:1.6;font-variant-numeric:tabular-nums}
.fab-diff.is-less{background:#E3F4EA;color:#17663A}
.fab-mark{grid-column:3;grid-row:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);color:transparent;background:#FFFFFF;transition:background .2s,box-shadow .2s,color .2s}
.fab-card.is-on .fab-mark{background:var(--accent);box-shadow:none;color:var(--on-accent,#FFFFFF)}
.fab-more{grid-column:2 / span 2;grid-row:2;justify-self:start;align-self:end;display:inline-flex;align-items:center;gap:4px;padding:4px 0;border:0;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--accent-text);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
.fab-more .arr{font-size:12px;text-decoration:none}
.fab-more:hover{text-decoration-thickness:2px}
.fab-zoom{position:absolute;left:calc(14px + 88px - 30px);top:calc(16px + 88px - 30px);z-index:1;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;
  background:#FFFFFF;color:var(--accent-text);box-shadow:0 2px 8px rgba(20,24,40,.22);cursor:zoom-in;transition:transform .2s var(--ease)}
.fab-card.is-only .fab-zoom{left:calc(12px + 88px - 30px);top:calc(12px + 88px - 30px)}
.fab-zoom:hover{transform:scale(1.08)}
.fab-badge{position:absolute;left:14px;top:-11px;z-index:1;padding:2px 10px;border-radius:7px;font-size:12px;font-weight:600;line-height:1.6;color:#FFFFFF;letter-spacing:.01em;box-shadow:0 4px 10px -4px rgba(20,24,40,.35)}
.fb-best{background:#D9480F}
.fb-pick{background:var(--accent)}
.fb-value{background:#1E7B45}
.fab-card.is-on:has(.fb-best){box-shadow:inset 0 0 0 2px var(--accent),0 14px 30px -22px rgba(217,72,15,.6)}
@media (max-width:479px){
  .fab-card{grid-template-columns:72px minmax(0,1fr) auto;column-gap:12px;padding:14px 12px 12px}
  .fab-sw{width:72px;height:72px}
  .fab-zoom{left:calc(12px + 72px - 28px);top:calc(14px + 72px - 28px);width:32px;height:32px}
  .fab-card.is-only .fab-zoom{left:calc(12px + 72px - 28px);top:calc(12px + 72px - 28px)}
}
/* xem cận chất vải */
dialog.fab-modal{max-width:min(880px,calc(100vw - 24px))}
@media (min-width:760px){.fab-modal .modal-box{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.fm-zoom{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--tint,#F4F4F6);cursor:zoom-in;touch-action:none}
.fm-zoom img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s var(--ease)}
.fm-zoom.is-zoom img{transform:scale(2.2)}
.fm-zoom .tp-tag{position:absolute;top:12px;left:12px}
.fm-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:4px 12px;border-radius:var(--pill);background:rgba(20,24,40,.6);color:#FFFFFF;font-size:12px;white-space:nowrap;transition:opacity .2s}
.fm-zoom.is-zoom .fm-hint{opacity:0}
.fm-detail{margin:-6px 0 0;color:var(--muted);font-size:15px}
.fm-foot{margin:0;font-size:13px;color:var(--muted)}
.fm-act{display:flex;flex-wrap:wrap;gap:10px}
.fab-modal .modal-body{padding-top:clamp(28px,4vw,48px)}
@media (prefers-reduced-motion:reduce){.fab-card,.fab-sw img,.fm-zoom img{transition:none}}
/* Bảng giá: vải khác của sản phẩm */
.pl-fabs{display:grid;gap:8px;padding:12px 0 2px;border-top:1px dashed var(--line-2)}
.pl-fabs-h{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.pl-fabs ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.pl-fabs li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px}
.pl-fab-sw{display:block;width:40px;height:40px;border-radius:10px;overflow:hidden;background:var(--tint,#F4F4F6)}
.pl-fab-sw img{width:100%;height:100%;object-fit:cover}
.pl-fab-t b{display:block;font-size:14px;line-height:1.35}
.pl-fab-t small{display:block;font-size:12.5px;color:var(--muted)}
.pl-fab-d{font-size:14px;font-weight:600;white-space:nowrap;color:var(--accent-text)}
.pl-fabs-note{margin:0;font-size:12.5px;color:var(--muted)}
/* thẻ vải gọn hơn: dấu chọn nằm góc phải, chữ có thêm chỗ */
.fab-card{grid-template-columns:76px minmax(0,1fr);column-gap:12px}
.fab-sw{width:76px;height:76px}
.fab-mark{position:absolute;right:12px;bottom:12px;top:auto}
.fab-more{grid-column:2}
.fab-zoom{left:calc(14px + 76px - 28px);top:calc(16px + 76px - 28px);width:32px;height:32px}
.fab-card.is-only .fab-zoom{left:calc(12px + 76px - 28px);top:calc(12px + 76px - 28px)}
.fab-price{flex-wrap:wrap}
.fab-price small{white-space:nowrap}
@media (max-width:479px){
  .fab-card{grid-template-columns:76px minmax(0,1fr);padding:14px 12px 12px}
  .fab-sw{width:76px;height:76px}
  .fab-zoom,.fab-card.is-only .fab-zoom{left:calc(12px + 76px - 28px);top:calc(14px + 76px - 28px)}
  .fab-card.is-only .fab-zoom{top:calc(12px + 76px - 28px)}
}
@media (min-width:760px){.fab-modal .fm-zoom{aspect-ratio:auto;min-height:460px;height:100%}}
.fab-card.is-only.is-on{box-shadow:inset 0 0 0 1px var(--line)}

/* =====================================================================
   v6.24 — "Atelier": gọn, sang, tương phản rõ
   - Màu chuyển sắc của banner chỉ còn ở phần mở đầu; các phần khác dùng nền trung tính (trắng / giấy ngà)
   - Bỏ đường chỉ nét đứt giữa các phần, bỏ hình khối trang trí trong phần mở đầu
   - Chữ nhấn màu đặc (không chuyển sắc), số bước & lựa chọn đang chọn dùng navy
   - Phần gửi yêu cầu là khối navy đặc, form trắng nổi trên đó
   - Hỏi đáp dạng danh sách kẻ mảnh
   ===================================================================== */
:root{--paper:#F4F3EF;--hair:color-mix(in srgb, var(--ink) 10%, transparent);--hair-2:color-mix(in srgb, var(--ink) 16%, transparent);--navy:var(--accent2)}
body{background:#FFFFFF}
/* --- đường chỉ nét đứt & hoạ tiết: bỏ --- */
.cats::after,#order-form::after,.site-foot::before,.hero::before{display:none!important}
.hero-art{display:none}
/* --- chữ nhấn: màu đặc, không gạch chân nét đứt --- */
.hl,#hero-title .hl,.h2 .hl{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:currentColor!important;color:var(--accent-text)!important;text-decoration:none!important;box-shadow:none!important}
.h2 .hl::after,.h2 .hl::before,#hero-title .hl::after{display:none!important}
/* --- nhãn đầu mục: chữ nhỏ + vạch ngắn, không viên nền --- */
.kicker{gap:12px;margin-bottom:18px;padding:0;background:none!important;box-shadow:none!important;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--accent-text)}
.kicker::before{content:"";flex:none;width:28px;height:2px;border-radius:2px;background:currentColor;display:block}
.kicker .idx,.kicker > span:empty{display:none}
.kicker > span:last-child::before,.kicker > span::before{display:none!important}
/* --- tiêu đề các phần --- */
.sec .h2,.faq-side .h2{font-size:clamp(32px,4vw,54px);line-height:1.12;letter-spacing:-.025em;color:var(--ink)}
.sec-intro{font-size:17px;line-height:1.65;color:color-mix(in srgb, var(--ink) 70%, transparent)}

/* --- dải chọn sản phẩm --- */
.cats{background:#FFFFFF!important;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(32px,4vw,56px)}
.cats-h{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;color:var(--ink)}

/* --- bảng tính: nền giấy ngà, thẻ trắng phẳng --- */
#calculator{background:var(--paper)!important;border-top:1px solid var(--hair)}
#calculator .sec-head{margin-bottom:clamp(28px,4vw,48px)}
.calc-steps > .fs,.calc-steps > .fs:nth-child(n){background:#FFFFFF;border-radius:20px;box-shadow:none!important;border:1px solid var(--hair);padding:clamp(20px,2.4vw,32px)}
.fs-head h3,.calc-steps > .fs:nth-child(n) .fs-head h3{color:var(--ink)!important;background:none!important;-webkit-text-fill-color:currentColor!important;font-size:20px;letter-spacing:-.01em}
.calc-steps > .fs:nth-child(n) .step,.fs-head .step{background:var(--navy)!important;color:#FFFFFF!important;box-shadow:none!important;font-weight:600}
.calc-nav{background:rgba(255,255,255,.92)!important;backdrop-filter:saturate(1.4) blur(10px);border:1px solid var(--hair)!important;box-shadow:0 8px 24px -18px rgba(11,24,52,.35)!important}
/* lựa chọn đang chọn: viền navy, nền trắng */
.opt-tile:has(input:checked),.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--navy)!important;background:#FFFFFF!important}
.opt-tile:has(input:checked) .opt-main b{color:var(--ink)!important}
.tier[aria-pressed="true"],.tiers .tier[aria-pressed="true"]{background:var(--navy)!important;color:#FFFFFF!important;box-shadow:none!important;border-color:var(--navy)!important}
.tier[aria-pressed="true"] span,.tier[aria-pressed="true"] b{color:#FFFFFF!important}
.check:has(input:checked){background:#FFFFFF!important;box-shadow:inset 0 0 0 2px var(--navy)!important}
.check:has(input:checked) .mark{background:var(--navy)!important;border-color:var(--navy)!important}
.fab-card.is-on{box-shadow:inset 0 0 0 2px var(--navy),0 14px 30px -24px rgba(11,24,52,.5)}
.fab-card.is-on .fab-mark{background:var(--navy)}
.fb-pick{background:var(--navy)}
.prod-info{border-color:var(--hair)}

/* --- phiếu dự toán: trắng, đầu phiếu gọn --- */
.quote-card{border-radius:24px!important;border:1px solid var(--hair);box-shadow:0 30px 60px -40px rgba(11,24,52,.35)!important}
.quote-head{background:none!important;color:var(--ink)!important;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.quote-head h3{color:var(--ink)!important;-webkit-text-fill-color:currentColor!important;background:none!important}
.quote-head::after,.quote-head::before{display:none!important}
.est-tag{background:var(--paper)!important;color:color-mix(in srgb, var(--ink) 70%, transparent)!important;box-shadow:none!important}
.quote-total{background:var(--navy)!important;border-radius:16px!important}
.quote-total::before,.quote-total::after{display:none!important}

/* --- gửi yêu cầu: khối navy đặc --- */
#order-form{background:var(--navy)!important;color:#FFFFFF}
#order-form::before{display:none!important}
.order-side{background:none!important;box-shadow:none!important;border:0!important;color:#FFFFFF}
.order-side::before,.order-side::after{display:none!important}
.order-side .h2{color:#FFFFFF!important}
.order-side .kicker{color:var(--pop-dk,#D8C6F5)}
.order-side .sec-intro{color:rgba(255,255,255,.74)!important}
.order-side .next-steps li{background:none!important;box-shadow:none!important;border:0;border-top:1px solid rgba(255,255,255,.14);border-radius:0!important;padding:18px 0!important;color:#FFFFFF}
.order-side .next-steps li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.order-side .next-steps li::before{background:none!important;color:var(--pop-dk,#D8C6F5)!important;box-shadow:inset 0 0 0 1.5px currentColor!important}
.order-side .next-steps b{color:#FFFFFF!important}
.order-side .next-steps span{color:rgba(255,255,255,.66)!important}
.order-side .side-contact{color:rgba(255,255,255,.74)}
.order-side .side-contact .link{color:#FFFFFF}
.order-card{border-radius:24px!important;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)!important;border:0!important}
.form-sec h3{color:var(--ink)!important}
.form-sec h3::before{background:var(--navy)!important}

/* --- hỏi đáp: danh sách kẻ mảnh --- */
#faq{background:#FFFFFF!important}
.faq-list{border-top:1px solid var(--hair-2)}
details.qa,details.qa.pre,details.qa[open]{background:none!important;box-shadow:none!important;border-radius:0!important;border-bottom:1px solid var(--hair-2);margin:0!important}
.qa summary{min-height:76px;padding:20px 0!important;font-size:18px;font-weight:600;color:var(--ink)!important}
.qa[open] summary{color:var(--accent-text)!important}
.qa summary .ic,.qa summary::after{color:var(--ink)}
.qa .qa-body,.qa > div,.qa > p{padding:0 48px 22px 0!important}
.contact-line{background:#FFFFFF!important;border:1px solid var(--hair-2)!important;box-shadow:none!important;border-radius:14px!important}

/* --- chân trang --- */
.site-foot{padding-top:clamp(56px,7vw,96px)}

/* --- menu: mục đang xem là chữ đậm + vạch dưới, không viên tím --- */
.nav a[aria-current="true"],#nav a[aria-current="true"]{background:none!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important;border-radius:0!important}
#calculator::after{display:none!important}
.order-card{color:var(--ink);background:#FFFFFF}
.order-card label,.order-card .f > label,.order-card legend{color:var(--ink)}
.order-card .summary,.order-card .summary .cfg{color:var(--ink)}
.order-card .help,.order-card .optional,.order-card .req-note{color:color-mix(in srgb, var(--ink) 62%, transparent)}
.order-card .summary{border:1px solid var(--hair-2)!important;background:var(--paper)!important;border-radius:14px!important}
/* trang phụ: nền giấy ngà thay cho tím nhạt */
.qdoc-page{background:var(--paper)!important}
.qdoc::before{display:none!important}
.qdoc{border-radius:4px;box-shadow:0 30px 60px -40px rgba(11,24,52,.4)!important}
.ss-steps{background:var(--paper)!important;border-color:var(--hair)!important}
.order-side .kicker,.order-side .kicker span{color:#C9C3F6!important}
.order-side .side-contact{color:rgba(255,255,255,.74)!important}
.order-side .side-contact a,.order-side .side-contact .link{color:#FFFFFF!important;text-decoration-color:rgba(255,255,255,.5)!important}

/* =====================================================================
   v6.25 — chuyển động (js/motion.js). Tắt khi giảm chuyển động.
   ===================================================================== */
/* dải chữ chạy dưới phần mở đầu */
.ribbon{position:relative;overflow:hidden;background:var(--accent2);color:#FFFFFF;padding:16px 0;border-block:1px solid rgba(255,255,255,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rb-track{display:flex;width:max-content;animation:rb-run var(--rb-dur,40s) linear infinite}
.ribbon:hover .rb-track{animation-play-state:paused}
.rb-row{display:flex;align-items:center;flex:none}
.rb-i{padding:0 22px;font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;color:rgba(255,255,255,.92)}
.rb-dot{flex:none;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--pop-dk,#D8C6F5)}
.ribbon.is-still .rb-track{animation:none}
.ribbon.is-still .rb-row + .rb-row{display:none}
@keyframes rb-run{to{transform:translateX(-50%)}}
@media (max-width:639px){.ribbon{padding:12px 0}.rb-i{font-size:14px;padding:0 16px}}

/* mở đầu: chữ hiện từng từ, nội dung & áo trượt lên */
.mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .02em .08em;margin:-.16em -.02em -.08em}
.m-intro .mw-i{display:inline-block;animation:mw-up .9s cubic-bezier(.2,.75,.15,1) both;animation-delay:calc(120ms + var(--i) * 70ms)}
.m-intro .hero-copy .eyebrow{animation:m-rise .7s cubic-bezier(.2,.7,.2,1) both}
.m-intro .hero-copy .lead{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .45s both}
.m-intro .hero-copy .cta-row{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .55s both}
.m-intro .hero-copy .facts{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .65s both}
.m-intro .hero-visual .hmock-stage{animation:m-garment 1.1s cubic-bezier(.2,.7,.15,1) .15s both}
.m-intro .hero-visual .hlineup{animation:m-fade 1.2s ease .35s both}
.m-intro .hero-visual .hmock-foot{animation:m-rise .8s cubic-bezier(.2,.7,.2,1) .7s both}
@keyframes mw-up{from{transform:translateY(110%)}}
@keyframes m-rise{from{opacity:0;transform:translateY(18px)}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-garment{from{opacity:0;transform:translateY(40px) scale(.96)}}

/* chiều sâu: áo theo chuột & cuộn (dùng thuộc tính translate, không đụng transform sẵn có) */
.hero-visual .hmock-stage,.hero-visual .hlineup,.hero-visual .hchips{transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.hero-visual .hmock-stage{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 10px + var(--sy,0) * -36px)}
.hero-visual .hlineup{translate:calc(var(--px,0) * -20px) calc(var(--py,0) * -12px + var(--sy,0) * 30px)}
.hero-visual .hchips{translate:calc(var(--px,0) * 24px) calc(var(--py,0) * 18px + var(--sy,0) * -60px)}

/* nút chính: hút theo chuột + vệt sáng lướt qua */
.btn{position:relative}
.btn-primary{overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.26) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.btn-primary:hover::after{transform:translateX(120%)}
.is-mag{translate:var(--mx,0) var(--my,0);transition:translate .18s ease-out,background-color .2s,box-shadow .2s}
.btn-primary:active{scale:.98}

/* thẻ: vệt sáng theo chuột + áo nghiêng 3D nhẹ */
.fab-card.is-spot,.pl-card.is-spot,.contact-line.is-spot,.opt-tile.is-spot{background-image:radial-gradient(260px circle at var(--sx,50%) var(--sy2,50%),color-mix(in srgb, var(--accent) 9%, transparent),transparent 65%)!important}
.cats-list li .cat.is-spot{background:radial-gradient(240px circle at var(--sx,50%) var(--sy2,50%),rgba(255,255,255,.75),transparent 65%),linear-gradient(170deg,#FFFFFF 0%,var(--cat-tone) 100%)!important}
.cat .cat-art > *{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cat.is-spot .cat-art > *{transform:perspective(700px) rotateX(calc(var(--ty,0) * -10deg)) rotateY(calc(var(--tx,0) * 14deg)) scale(1.04)}
.cat{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cat:hover{transform:translateY(-4px)}

@media (prefers-reduced-motion:reduce){
  .rb-track{animation:none!important}
  .ribbon .rb-row + .rb-row{display:none}
  .hero-visual .hmock-stage,.hero-visual .hlineup,.hero-visual .hchips{translate:none!important}
  .btn-primary::after{display:none}
  .cat:hover,.cat.is-spot .cat-art > *{transform:none!important}
}

/* #####################################################################
   v6.26 — video nền phần mở đầu
   Lớp video nằm dưới nội dung, phủ một lớp màu của băng mở đầu (--hero-bg) để chữ luôn đủ tương phản.
   Không có video (tắt trong admin / script lỗi): băng mở đầu y như cũ. Giảm chuyển động: chỉ hiện ảnh tĩnh (poster).
   ##################################################################### */
.hero-media{display:none}
html.has-hvideo .hero-media{display:block;position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:var(--hero-bg) center/cover no-repeat;background-image:url("/images/hero/hero-bg.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
@media (max-width:759px){html.has-hvideo .hero-media{background-image:url("/images/hero/hero-bg-sm.jpg")}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease,ease)}
.hero-video.is-on{opacity:1}
/* lớp phủ: màu băng mở đầu + vùng chữ (bên trái / phía trên trên điện thoại) sáng hơn một chút */
html.has-hvideo .hero-media::after{content:"";position:absolute;inset:0;background:var(--hero-bg);opacity:var(--hv-scrim,.5)}
html.has-hvideo .hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--hv-veil) 0,var(--hv-veil) 38%,transparent 72%)}
@media (max-width:1023px){html.has-hvideo .hero-media::before{background:linear-gradient(180deg,var(--hv-veil) 0,var(--hv-veil) 45%,transparent 75%)}}
.hero-video{filter:var(--hv-filter,none)}
html.has-hvideo .hero-art{display:none}
/* nút tạm dừng / phát (WCAG 2.2.2: chuyển động tự chạy > 5 giây phải dừng được) */
.hero-vbtn{position:absolute;z-index:2;right:clamp(12px,2.4vw,32px);bottom:clamp(12px,2vw,24px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb, #FFFFFF 78%, transparent);border:1px solid color-mix(in srgb, var(--hero-ink,#0B1834) 18%, transparent);color:var(--hero-ink,#0B1834);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:background .2s,transform .2s}
.hero-vbtn:hover{background:#FFFFFF;transform:scale(1.05)}
.hero-vbtn:focus-visible{outline:2.5px solid var(--focus,var(--brand));outline-offset:3px}
.hero-vbtn .hv-ic{position:relative;width:14px;height:14px}
.hero-vbtn .hv-ic::before,.hero-vbtn .hv-ic::after{content:"";position:absolute;top:0;bottom:0;width:4px;border-radius:1px;background:currentColor}
.hero-vbtn .hv-ic::before{left:2px}.hero-vbtn .hv-ic::after{right:2px}
.hero-vbtn[aria-pressed="true"] .hv-ic::after{display:none}
.hero-vbtn[aria-pressed="true"] .hv-ic::before{left:3px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor}
@media (max-width:1023px){.hero-vbtn{top:calc(var(--head-h,64px) + 12px);bottom:auto}}
@media (prefers-reduced-motion: reduce){.hero-video{display:none}.hero-vbtn{display:none!important}}
@media print{.hero-media,.hero-vbtn{display:none!important}}

/* #####################################################################
   v6.27 — Thư viện chất vải (dải nền xanh đêm, thẻ kiểu "sổ mẫu vải": lỗ treo, mép cắt răng cưa)
   ##################################################################### */
.flib{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(56px,7vw,104px) clamp(44px,5vw,72px);background:var(--base-accent2,#0B1834);color:#FFFFFF}
.flib[hidden]{display:none}
/* vệt sáng tím mờ + lưới chỉ may rất nhạt ở nền */
.flib::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 85% 0%, color-mix(in srgb, var(--base-accent,#4553D6) 45%, transparent) 0, transparent 70%),
             radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, #9B7BEA 28%, transparent) 0, transparent 70%)}
.flib::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:repeating-linear-gradient(90deg,#FFFFFF 0 6px,transparent 6px 14px);background-size:100% 1px;background-repeat:no-repeat;background-position:0 clamp(150px,16vw,210px)}
.flib-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;margin-bottom:clamp(28px,3.5vw,44px)}
.flib-copy{max-width:640px}
.flib-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13.5px;font-weight:600;letter-spacing:.01em;color:#C9C3F7}
.flib-kicker::before{content:"";width:28px;height:2px;border-radius:2px;background:currentColor}
.flib-title{margin:0;font-size:clamp(34px,4.4vw,60px);line-height:1.06;letter-spacing:-.03em;color:#FFFFFF}
.flib-intro{margin:16px 0 0;max-width:56ch;font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;color:rgba(255,255,255,.78)}
.flib-nav{display:flex;align-items:center;gap:10px}
.flib-count{margin-right:6px;font-size:14px;font-weight:600;color:rgba(255,255,255,.72)}
.flib-arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);background:transparent;color:#FFFFFF;font-size:19px;cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s,opacity .2s}
.flib-arrow:hover:not(:disabled){background:#FFFFFF;color:var(--base-accent2,#0B1834);border-color:#FFFFFF;transform:translateY(-2px)}
.flib-arrow:disabled{opacity:.32;cursor:default}
.flib-arrow:focus-visible,.flib-rail:focus-visible,.fl-go:focus-visible{outline:2.5px solid #C9C3F7;outline-offset:3px}
@media (max-width:639px){.flib-arrow{display:none}.flib-head{align-items:flex-start}}

.flib-rail{list-style:none;margin:0 min(calc(-1 * var(--gutter,20px)),calc(50% - 50vw)) 0 calc(-1 * var(--gutter,20px));padding:6px var(--gutter,20px) 22px;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,23vw,300px);gap:clamp(14px,1.6vw,22px);
  overflow-x:auto;overflow-y:hidden;padding-top:12px;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter,20px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent;border-radius:var(--r-lg,16px)}
.fl-item{scroll-snap-align:start;display:flex}
.fl-item.pre{transform:translateY(36px) scale(.98)}

.fl-card{--tx:0;--ty:0;position:relative;display:flex;flex-direction:column;width:100%;border-radius:18px;background:#FFFFFF;color:#0B1834;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.fl-card:hover,.fl-card:focus-within{transform:translateY(-6px) rotate(calc(var(--tx) * 2deg));box-shadow:0 1px 0 rgba(255,255,255,.08),0 36px 60px -26px rgba(0,0,0,.8)}
/* ảnh vải với mép dưới cắt răng cưa (kéo cắt zíc zắc) */
.fl-sw{position:relative;aspect-ratio:1/1;overflow:hidden;background:#E9E6F4;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 9px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 9px repeat-x}
.fl-sw img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.fl-card:hover .fl-sw img{transform:scale(1.14) translate(calc(var(--tx) * -14px),calc(var(--ty) * -14px))}
.fl-hole{position:absolute;top:14px;left:14px;width:16px;height:16px;border-radius:50%;background:var(--base-accent2,#0B1834);box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.85)}
.fl-no{position:absolute;top:10px;right:12px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.88);font-size:12px;font-weight:600;letter-spacing:.06em;color:#0B1834}
.fl-tag{position:absolute;left:12px;bottom:18px;padding:3px 9px;border-radius:999px;background:rgba(11,24,52,.72);color:#FFFFFF;font-size:12px;font-style:normal;font-weight:600}
.fl-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px 18px 18px}
.fl-name{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.015em;color:#0B1834}
.fl-detail{margin:0;font-size:13.5px;font-weight:600;color:#3947B6}
.fl-note{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:#3A4466}
.fl-use{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin:4px 0 0;font-size:14px;color:#0B1834}
.fl-use span{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5A6386}
.fl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px dashed #D5D3E6}
.fl-from{font-size:13.5px;color:#5A6386}
.fl-from b{font-size:15.5px;color:#0B1834}
.fl-go{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#0B1834;color:#FFFFFF;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,gap .2s}
.fl-go:hover{background:var(--base-accent,#4553D6);gap:10px}
.flib-foot{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.62)}
.fl-from b,.fl-go{white-space:nowrap}
@media (max-width:639px){.flib-rail{grid-auto-columns:78%}.fl-name{font-size:19px}
  /* màn hẹp: giá một hàng, nút "Tính giá" rộng hết thẻ ở hàng dưới */
  .fl-foot{flex-direction:column;align-items:stretch;gap:10px}
  .fl-go{justify-content:center}}
@media (prefers-reduced-motion: reduce){.fl-card,.fl-sw img{transition:none}.fl-card:hover,.fl-card:focus-within{transform:none}.fl-card:hover .fl-sw img{transform:scale(1.02)}.fl-item.pre{opacity:1;transform:none}}
@media print{.flib{display:none!important}}

/* ===== v6.28 — ux-audit: vùng bấm 44px trên cảm ứng / màn hẹp (WCAG 2.1 AA theo .ux-profile.md) ===== */
@media (pointer: coarse), (max-width: 759px){
  .btn,.hmock-go,.fl-go,.st-dl,.st-views button,.cats-head .link,.summary .link.edit{min-height:44px}
  .fab-more{min-height:44px;padding-block:0}
  .lang-switch a{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
  .foot-list a{display:inline-flex;align-items:center;min-height:44px}
  .site-head .brand{display:inline-flex;align-items:center;min-height:44px}
  /* nút nhỏ giữ nguyên kích thước nhìn thấy, chỉ nới vùng bấm vô hình */
  /* .fab-zoom đã position:absolute trong thẻ vải — không đổi, chỉ thêm vùng bấm (v6.28 sửa lỗi nút bị đẩy ra ngoài thẻ) */
  .hsw{position:relative}
  .hsw::after,.fab-zoom::after{content:"";position:absolute;inset:-6px}
  #g-custom{width:44px;height:44px}
  .fab-zoom::after{inset:-6px}
  .hsw::after{inset:-10px}
  .hmock-sw{gap:20px}
  .quote-tools .btn{min-height:44px}
  .curve-slider{height:44px}
  .q-del{width:44px}
}
/* màn hẹp: thẻ chọn vải gọn hơn — mô tả chỉ hiện ở vải đang chọn, bỏ nút chữ "Xem chất vải" (đã có nút kính lúp) */
@media (max-width:479px){
  .fab-card:not(.is-on):not(.is-only) .fab-note{display:none}
  .fab-card:not(.is-only) .fab-more{display:none}
}
/* màn hẹp: nhãn mốc giảm giá xếp so le hai hàng để không chồng lên nhau */
@media (max-width:479px){
  .qbar{padding-bottom:40px}
  .qb-mark:nth-child(odd) small{top:34px}
  .qb-mark:nth-child(odd) i::after{content:"";position:absolute;left:50%;top:14px;width:1px;height:18px;background:var(--line-input)}
  .qb-mark i{position:relative}
}

/* v6.28 — kiểu dáng khách tự tải lên (xưởng thử áo) */
.md-ic{display:grid;place-items:center;width:100%;aspect-ratio:428/500;color:var(--muted)}
.md-ic svg{width:26px;height:26px}
.md-up{border-style:dashed;border-width:1.5px}
.md-up .md-thumb{background:var(--soft)}
.md-up:hover .md-ic{color:var(--accent-text)}
.md-up.is-busy{cursor:progress;opacity:.7}
.st-style-row{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.st-style-row .df-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-style-row .link{min-height:44px;flex:none}

/* v6.28 — tối đa 3 độ đậm (400/500/600): chữ đậm mặc định của trình duyệt (700) hạ về 600 */
:where(b,strong,th,h5,h6){font-weight:600}

/* hộp xác nhận (bỏ sản phẩm khỏi báo giá) */
dialog.confirm{padding:0;border:1px solid var(--line);border-radius:var(--r-xl);max-width:min(420px,calc(100vw - 32px));width:100%;background:#FFFFFF;color:var(--ink);box-shadow:var(--shadow-lg)}
dialog.confirm::backdrop{background:color-mix(in srgb, var(--base-accent2) 55%, transparent)}
.cf-box{display:grid;gap:var(--s-3);padding:24px}
.cf-box h2{margin:0;font-size:20px;line-height:1.25;color:var(--title)}
.cf-box p{margin:0;color:var(--muted);line-height:1.5}
.cf-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:var(--s-2)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#FFFFFF}
.btn-danger:hover{background:color-mix(in srgb, var(--danger) 86%, #000)}

/* =========================================================
   v6.30 — "ATELIER NAVY": giữ màu thương hiệu navy/tím, nâng chất kiểu tạp chí thời trang.
   Tiêu đề có chân (Newsreader, chọn trong admin › Giao diện), chữ nhấn nghiêng; thẻ nền trắng viền mảnh
   thay nền pastel; bóng mềm hơn; nhãn nhỏ viết hoa giãn chữ. Không kính mờ, không gradient trang trí.
   Xoá cả khối này là về giao diện trước đó.
   ========================================================= */
:root{
  --shadow-lg:0 1px 2px rgba(11,24,52,.05), 0 24px 48px -28px rgba(11,24,52,.28);
  --hair-n:color-mix(in srgb, var(--accent2) 9%, transparent);
  --hair-n2:color-mix(in srgb, var(--accent2) 16%, transparent);
}
/* tiêu đề lớn: chữ có chân, khít hơn; chữ nhấn nghiêng mảnh */
h1,h2,.h2{letter-spacing:-.02em}
#hero-title .hl,.h2 .hl,h2 .hl{font-style:italic!important;font-weight:400!important;letter-spacing:-.01em}
/* tiêu đề nhỏ trong thẻ, bước tính giá: giữ chữ không chân cho dễ đọc */
h3,h4{font-family:var(--font-b)!important;letter-spacing:-.01em}
/* nhãn mục nhỏ: viết hoa, giãn chữ */
.kicker,.flib-kicker{font-family:var(--font-b);font-size:12px!important;font-weight:600;letter-spacing:.14em!important;text-transform:uppercase}
/* thẻ sản phẩm: nền trắng, viền mảnh, nhấc nhẹ khi rê chuột (bỏ nền pastel nhiều màu) */
.cat{background:#FFFFFF!important;box-shadow:inset 0 0 0 1px var(--hair-n)!important;transition:transform .25s var(--ease,ease),box-shadow .25s var(--ease,ease)}
.cat .cat-art,.cat-art{background:linear-gradient(180deg,#F6F6FA,#EEEEF4)!important}
@media (hover:hover) and (pointer:fine){
  .cat:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--hair-n2),0 22px 40px -26px rgba(11,24,52,.4)!important}
}
/* nút chính: chiều sâu tinh tế */
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px -16px rgba(11,24,52,.65)}
.btn{letter-spacing:.005em}
/* thẻ & khối nổi: viền mảnh trước, bóng sau */
.quote-card,.calc-step,.fab-card:not(.is-on),.pl-card,.qa{box-shadow:inset 0 0 0 1px var(--hair-n)}
@media (prefers-reduced-motion: reduce){.cat,.cat:hover{transition:none;transform:none}}

/* =========================================================
   v6.31 — chuyển động cho các lúc đổi trạng thái đột ngột (chỉ transform/opacity, đường cong --ease sẵn có).
   Không thêm chuyển động cho thao tác lặp nhiều (± số lượng, chọn vải, thanh bước) hay số liệu khách đang đọc.
   ========================================================= */
/* 1) Gửi yêu cầu thành công (hiếm, khoảnh khắc vui): huy hiệu hiện lên, nội dung vào lần lượt 50ms */
.done:not([hidden]) > *{transition:opacity .3s var(--ease),transform .3s var(--ease)}
.done:not([hidden]) > :nth-child(2){transition-delay:50ms}
.done:not([hidden]) > :nth-child(3){transition-delay:100ms}
.done:not([hidden]) > :nth-child(4){transition-delay:150ms}
.done:not([hidden]) > :nth-child(5){transition-delay:200ms}
.done:not([hidden]) > :nth-child(n+6){transition-delay:250ms}
@starting-style{
  .done:not([hidden]) > *{opacity:0;transform:translateY(8px)}
  .done:not([hidden]) > .done-badge{opacity:0;transform:scale(.9)}
}
/* 2) Hộp xác nhận: hiện từ giữa màn hình (hộp thoại không gắn với nút nên không bay từ nút ra) */
dialog.confirm[open]{transition:opacity .2s var(--ease),transform .2s var(--ease)}
dialog.confirm[open]::backdrop{transition:opacity .2s var(--ease)}
@starting-style{
  dialog.confirm[open]{opacity:0;transform:scale(.97)}
  dialog.confirm[open]::backdrop{opacity:0}
}
/* 3) Bảng chia size: hiện mờ dần + trượt nhẹ khi bật công tắc (không đổi chiều cao để ô đang gõ không chạy) */
#size-panel:not([hidden]){transition:opacity .2s var(--ease),transform .2s var(--ease)}
@starting-style{#size-panel:not([hidden]){opacity:0;transform:translateY(-4px)}}
/* 4) Phản hồi khi bấm: nút phụ, nút "Tính giá", thẻ sản phẩm (nút chính đã có) */
.btn:not(.btn-primary):active,.fl-go:active{transform:scale(.97)}
.fl-go{transition:background-color .2s,gap .2s,transform .14s var(--ease)}
.cat:active{transform:scale(.97);transition-duration:.14s}
/* 5) Sản phẩm vừa thêm vào báo giá: trượt vào từ trái, chỉ ô mới */
.q-li.is-new{animation:q-in .22s var(--ease)}
@keyframes q-in{from{opacity:0;transform:translateX(-6px)}}
/* giảm chuyển động: chỉ còn mờ dần, bỏ dịch chuyển & phóng to */
@media (prefers-reduced-motion: reduce){
  @starting-style{
    .done:not([hidden]) > *,.done:not([hidden]) > .done-badge{transform:none}
    dialog.confirm[open]{transform:none}
    #size-panel:not([hidden]){transform:none}
  }
  .btn:not(.btn-primary):active,.fl-go:active,.cat:active{transform:none}
  .q-li.is-new{animation:q-fade .2s ease}
  @keyframes q-fade{from{opacity:0}}
}

/* =========================================================
   v6.32 — tinh chỉnh (impeccable polish): giữ nguyên phong cách v6.30, sửa các chỗ lệch chuẩn.
   ========================================================= */
/* nhãn nhỏ phía trên tiêu đề mục (“Chất liệu”, “Báo giá”…) chỉ lặp lại tiêu đề → bỏ, để tiêu đề tự đứng.
   Giữ dòng mở đầu ở phần đầu trang vì nó nói website dành cho ai. */
.kicker,.flib-kicker{display:none!important}
/* tiêu đề mục cùng vai trò → cùng một cỡ trên màn rộng (trước: 44 / 51 / 56px lệch nhau) */
@media (min-width:1024px){ .flib-title,section h2.h2{font-size:48px!important;line-height:1.1} }
/* ô báo lỗi: viền mảnh quanh khối thay vì vạch đỏ dày bên trái */
.form-error{border-left:0!important;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent)}
/* các phần trình duyệt tự vẽ: con trỏ gõ chữ, thanh cuộn trang theo màu thương hiệu */
input,textarea{caret-color:var(--base-accent,#4553D6)}
html{scrollbar-color:color-mix(in srgb, var(--accent2,#0B1834) 35%, transparent) transparent}
/* thẻ thư viện vải: nhãn “Hợp với” chữ thường (chữ hoa có dấu ở cỡ nhỏ khó đọc — DESIGN.md), bỏ số thứ tự 01/02 chỉ để trang trí */
.fl-use span{text-transform:none!important;letter-spacing:0!important;font-size:13px!important}
.fl-no{display:none!important}

/* =========================================================
   v6.33 — "PRECISION": hệ thiết kế chung cho mọi trang khách, tinh thần Linear / Stripe / Vercel.
   Một họ chữ không chân (Be Vietnam Pro) khít chữ ở cỡ lớn · nền trung tính lạnh · một màu hành động (tím dừa cạn)
   · navy cho khối tối · thẻ trắng viền mảnh, bo 14px, không bóng khi đứng yên · nhấn bằng màu, không nghiêng.
   Ghi đè v6.30 (chữ có chân, nghiêng). Xoá cả khối này là về v6.32.
   ========================================================= */
:root{
  --paper:#F6F7F9;                                   /* trước: giấy ngà #F4F3EF → trung tính, cùng tông cả website */
  --hair:rgba(11,24,52,.08); --hair-2:rgba(11,24,52,.14);
  --hair-n:rgba(11,24,52,.08); --hair-n2:rgba(11,24,52,.16);
  --r-card:14px;
  --shadow-lg:0 1px 2px rgba(11,24,52,.04), 0 16px 36px -20px rgba(11,24,52,.24);
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ---- chữ: tiêu đề không chân, khít dần theo cỡ; nhấn bằng màu hành động, không nghiêng ---- */
h1,h2,.h2{font-weight:600;letter-spacing:-.03em}
#hero-title,.hero h1{letter-spacing:-.04em;line-height:1.04}
#hero-title .hl,.h2 .hl,h2 .hl,h1 .hl{font-style:normal!important;font-weight:inherit!important;letter-spacing:inherit!important;color:var(--base-accent)!important}
.flib .h2 .hl,.flib h2 .hl,#order-form h2 .hl{color:#B9C1FF!important}       /* trên nền navy: tím nhạt đủ tương phản */
p,li,dd{text-wrap:pretty}

/* ---- phần mở đầu: nền trung tính, một vệt sáng tím rất nhẹ thay chuyển sắc hồng/tím ---- */
.hero{--hero-bg:radial-gradient(70% 60% at 85% 0%, color-mix(in srgb, var(--base-accent) 9%, transparent) 0, transparent 70%), #F7F8FB}

/* ---- bề mặt: thẻ trắng, viền mảnh, bo 14px, đứng yên không bóng ---- */
.cat,.opt-tile,.fab-card,.pl-card,.fl-card,.qa,.quote-card,.calc-step,.order-card,.ss-card,.tr-card{border-radius:var(--r-card)!important}
.opt-tile,.fab-card:not(.is-on),.pl-card,.qa{box-shadow:inset 0 0 0 1px var(--hair)!important}
.cat-art{border-radius:calc(var(--r-card) - 4px)}

/* ---- nút: một kiểu chính (navy), một kiểu phụ (trắng viền mảnh), bo 10px, cao 44–48px ---- */
.btn{border-radius:10px!important;font-weight:600}
.btn-ghost{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair-2)!important;border-color:transparent!important}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--base-accent) 45%, transparent)!important}

/* ---- ô nhập: viền mảnh, nhấn bằng vòng sáng màu hành động ---- */
.f input,.f select,.f textarea{border-color:var(--hair-2)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:color-mix(in srgb, var(--accent2,#0B1834) 30%, transparent)}

/* ---- nhãn nhỏ trên thẻ ảnh: bỏ nền tối nặng, dùng nhãn trắng viền mảnh ---- */
.fab-sw i,.fl-tag{background:rgba(255,255,255,.92)!important;color:#0B1834!important;box-shadow:inset 0 0 0 1px var(--hair)}
/* v6.33 — các trang còn lại: phiếu báo giá & 404 cùng hệ “Precision” */
.qd-words{border-left:0!important;border-radius:8px;box-shadow:inset 0 0 0 1px var(--hair)}      /* bỏ vạch màu dày bên trái */
.nf .meta{display:none!important}                                                                  /* nhãn “Lỗi 404” trên tiêu đề: tiêu đề đã nói đủ */
.nf h1{letter-spacing:-.04em;line-height:1.06}

/* =========================================================
   v6.34 — vân sợi dệt khi rê chuột qua thẻ thư viện vải (chỉ CSS, không thư viện).
   Sợi dọc (warp) + sợi ngang (weft) bước 3px, rất mờ, hoà vào ảnh vải bằng multiply.
   Đồng thời tiết chế hiệu ứng cũ cho hợp hệ “Precision”: ảnh phóng 1.06 (trước 1.14 + trôi theo chuột), thẻ nhấc 4px, bỏ nghiêng.
   ========================================================= */
.fl-sw::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(0deg, rgba(11,24,52,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(11,24,52,.35) 0 1px, transparent 1px 3px);
  transition:opacity .22s var(--ease)}
.fl-sw img{transition:transform .22s var(--ease)!important}
@media (hover:hover) and (pointer:fine){
  .fl-card:hover .fl-sw::after{opacity:.18}
  .fl-card:hover .fl-sw img{transform:scale(1.06)!important}
  .fl-card:hover{transform:translateY(-4px)!important}
}
.fl-card:focus-within .fl-sw::after{opacity:.18}                       /* bàn phím: cũng thấy vân sợi */
.fl-card:focus-within{transform:translateY(-4px)!important}
@media (prefers-reduced-motion: reduce){
  .fl-card:hover .fl-sw img{transform:none!important}
  .fl-card:hover,.fl-card:focus-within{transform:none!important}
}

/* =========================================================
   v6.35 — phần mở đầu B2B: thanh tin cậy (chứng nhận do xưởng nhập / cam kết website đang làm) dưới hai nút
   ========================================================= */
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;padding:0;font-size:14px;font-weight:500;color:var(--ink-2)}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust svg{width:16px;height:16px;color:var(--base-accent);flex:none}
.hero .trust + .facts{margin-top:22px}
@media (max-width:639px){.trust{gap:6px 14px;font-size:13.5px}}
/* tiêu đề B2B dài hơn: cho phần tô màu xuống dòng tự nhiên (trước ép một dòng → bị cắt dưới hình áo), cỡ tối đa 68px */
#hero-title{font-size:clamp(38px,5vw,68px)!important;max-width:15ch}
#hero-title .hl{display:inline!important;width:auto!important;max-width:none!important}

/* =========================================================
   v6.36 — form báo giá gọn: file thiết kế đính kèm ngay trong form, chi tiết phụ gom vào “Thêm chi tiết”
   ========================================================= */
.ff-files{display:grid;gap:8px;justify-items:start}
.ff-label{font-weight:600;font-size:14.5px}
.ff-list{list-style:none;display:grid;gap:6px;margin:0;padding:0;width:100%}
.ff-list:empty{display:none}
.ff-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:44px;padding:4px 4px 4px 12px;border-radius:10px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair-2)}
.ff-list .ff-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.ff-list small{color:var(--muted);font-size:12.5px}
.ff-x{display:grid;place-items:center;width:44px;height:36px;border-radius:8px;color:var(--muted)}
.ff-x:hover{background:var(--soft);color:var(--ink)}
.ff-busy{grid-template-columns:1fr!important;color:var(--muted);font-size:14px}
.ff-up:focus-within{outline:2.5px solid var(--focus);outline-offset:3px}
.more-box + .inv-box{margin-top:var(--s-3)}

/* =========================================================
   v6.37 — trang Năng lực xưởng (/nang-luc), loại trang "About"
   ========================================================= */
.fc-page{padding-bottom:clamp(64px,8vw,112px)}
.fc-hero{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(32px,4vw,56px);display:grid;gap:18px;justify-items:start}
.fc-hero .sec-intro{max-width:62ch}
.fc-hero .facts{margin-top:12px;width:100%;max-width:880px}
.fc-sec{padding-top:clamp(48px,6vw,88px)}
.fc-h{font-size:clamp(26px,3vw,36px);line-height:1.15;letter-spacing:-.025em;margin:0 0 20px}
.fc-cap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fc-card{padding:22px;border-radius:var(--r-card,14px);background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair,rgba(11,24,52,.08))}
.fc-card h3{margin:0 0 12px;font-size:17px;letter-spacing:-.01em}
.fc-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.fc-list li{display:grid;gap:2px}
.fc-list b{font-weight:600;font-size:15px}
.fc-list small{color:var(--muted);font-size:13.5px;line-height:1.45}
.fc-more{color:var(--muted);font-size:14px}
.fc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;counter-reset:none}
.fc-steps li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:20px;border-radius:var(--r-card,14px);background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--hair,rgba(11,24,52,.08))}
.fc-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--base-accent2,#0B1834);color:#FFFFFF;font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.fc-steps h3{margin:4px 0 6px;font-size:16px}
.fc-steps p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.fc-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fc-photos figure{margin:0;display:grid;gap:8px}
.fc-photos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card,14px);background:var(--paper)}
.fc-photos figcaption{display:grid;gap:2px;font-size:14px}
.fc-photos small{color:var(--muted)}
.fc-cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.fc-what{font-weight:600;color:var(--base-accent)}
.fc-cases p{margin:0 0 6px;line-height:1.5}
.fc-cta{display:grid;justify-items:start;gap:14px}
.fc-cta p{margin:0;max-width:56ch;color:var(--muted)}
@media (max-width:899px){.fc-cap{grid-template-columns:1fr}.fc-photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fc-hero .fc-facts{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:639px){.fc-hero .fc-facts{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.fc-steps{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important}
@media (max-width:639px){.fc-hero .fc-facts > div:nth-child(odd){border-left:0!important;padding-left:0!important;margin-left:0!important}}

/* =========================================================
   v6.39 — kiểm tra mobile & truy cập (390 / 1280): vùng bấm 44px còn sót, chữ ≥ 12px, tương phản trong khối tối
   ========================================================= */
@media (pointer: coarse), (max-width: 759px){
  .fl-go{min-height:44px!important}
  .foot-list a{min-width:44px}
  .pl-side a{display:flex;align-items:center;min-height:44px}
  .qd-to input{min-height:44px}
}
.code-sample{font-size:max(12px,.92em)}
/* số điện thoại / liên kết trong khối nền navy (trang Tra cứu): chữ sáng thay vì navy trên navy (1.2:1 → 15:1) */
.scheme-cobalt a.num,.scheme-cobalt .track-help a,.scheme-blue a.num{color:#FFFFFF!important;text-decoration:underline;text-underline-offset:3px}
/* lưới an toàn cho “giảm chuyển động”: mọi keyframe chạy tức thì 1 lần, không cuộn mượt (hiệu ứng mờ dần ngắn vẫn giữ) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  html{scroll-behavior:auto!important}
}

/* v6.42 — thanh điều hướng: chữ menu luôn một dòng; câu giới thiệu cạnh logo chỉ hiện khi đủ chỗ */
.site-head .nav a,.site-head .head-track .lbl,.site-head .head-cta{white-space:nowrap}
.site-head .brand-tag{display:none} /* v6.44: thanh đầu trang không đủ chỗ cho câu giới thiệu ở mọi độ rộng (khung trang tối đa ~1440px) — câu này vẫn có ở chân trang */
.site-head .brand{flex:none;margin-right:var(--s-4,16px)}

/* v6.43 — điện thoại: bảng tính giá gọn hơn + nút nổi "Liên hệ" không đè nội dung */
.fs-fold,.fs-sum{display:none}
@media (max-width:759px){
  .calc-steps .fs > .fs-head{position:relative}
  .fs-fold{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:44px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line);background:#FFFFFF;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
  .fs-fold:focus-visible{outline:2.5px solid var(--base-accent);outline-offset:2px}
  .fs-fold-ic{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-135deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
  .fs-fold-o{display:none}
  .fs.is-folded .fs-fold-o{display:inline}.fs.is-folded .fs-fold-c{display:none}
  .fs.is-folded .fs-fold-ic{transform:rotate(45deg) translate(-2px,-2px)}
  .calc-steps .fs.is-folded > :not(legend,.fs-sum){display:none!important}
  .calc-steps .fs.is-folded{padding-bottom:var(--s-3,12px)}
  /* nút nổi: ẩn khi đang ở phần mở đầu, và khi thanh "Gửi yêu cầu" dưới đáy đang hiện (thanh đó đã là hành động chính) */
  .dock{transition:opacity .25s var(--ease),visibility .25s,bottom .3s var(--ease)}
  html.hero-in .dock:not(.is-open),body:has(.mbar.show) .dock:not(.is-open){opacity:0!important;visibility:hidden!important;pointer-events:none;animation:none}
  /* chừa chỗ cuối trang để nút nổi / thanh dưới đáy không che chân trang */
  .site-foot{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:759px){.calc-steps .fs.is-folded > .fs-sum{display:block;margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.45}}