/* ===========================================================
   FlexiFoods — stylesheet dùng chung cho toàn bộ website
   (index.html, products.html, product.html đều load file này)

   Sửa hiệu ứng, màu sắc, khoảng cách... ở ĐÂY sẽ áp dụng cho
   TẤT CẢ các trang cùng lúc — không cần sửa từng file HTML.
   =========================================================== */

/* Bảng màu chính thức FlexiFoods (FlexiLife × FlexiFoods Brand Guidelines):
   Deep Ocean Navy #1F3B57 (trục chính), Aqua Teal #0E8C8C (nhấn riêng
   FlexiFoods), Paper #F5F7F6 (nền sáng), Ink #16232E (nền tối/văn bản). */
:root{
  --ink:#16232e;
  --ink-soft:#48586a;
  /* #748496 cũ chỉ đạt tương phản 3.19:1 với nền #e7ebee — dưới mức 4.5:1
     mà WCAG AA yêu cầu cho chữ nhỏ. Đậm lại vừa đủ để đạt 4.76:1 ở nền
     tối nhất, vẫn giữ đúng vai trò "chữ mờ, thứ yếu". */
  --ink-faint:#5a6877;
  --teal:#0e8c8c;
  --teal-deep:#0b6e6e;
  /* Aqua Teal #0E8C8C là màu thương hiệu, giữ nguyên cho icon/viền/mảng
     lớn. Nhưng dùng cho CHỮ NHỎ thì chỉ đạt 3.40:1, nên chữ nhỏ màu teal
     (eyebrow, "Xem chi tiết →") dùng bản đậm hơn này — đạt 5.05:1. */
  --teal-text:#0b6e6e;
  --mint:#3fc7bc;
  --coral:#1f3b57;
  --coral-deep:#152a3d;
  --coral-soft:#e7ecf1;
  --navy:#1f3b57;
  --paper:#f5f7f6;
  --paper-raised:#ffffff;
  --paper-dim:#e7ebee;
  --line:#d8dee3;
  --header-bg:#1f3b57;
  --header-ink:#f5f7f6;
  --header-ink-soft:#a9bdcf;
  /* Báo cho trình duyệt biết trang đang ở tông nào, để các thành phần
     do HỆ ĐIỀU HÀNH vẽ (danh sách xổ của ô "Loại hình", thanh cuộn, con
     trỏ nhập) đổi theo — nếu không, ở nền tối chúng vẫn trắng chói. */
  color-scheme:light;
  --shadow: 0 1px 2px rgba(22,35,46,.05), 0 8px 24px -12px rgba(22,35,46,.18);
  --shadow-lift: 0 10px 28px -12px rgba(22,35,46,.32), 0 2px 6px rgba(22,35,46,.08);

  /* Tốc độ hiệu ứng dùng chung — đổi 1 chỗ, áp dụng khắp site */
  --ease: cubic-bezier(.2,.7,.3,1);
  --fast: .18s;
  --med: .32s;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --teal-text:#57c9bd;
    --ink:#e7edec;
    --ink-soft:#a7bdce;
    --ink-faint:#7e94a8;
    --teal:#57c9bd;
    --teal-deep:#3aa89c;
    --mint:#7fe0d2;
    --coral:#57c9bd;
    --coral-deep:#3aa89c;
    --coral-soft:#16323a;
    --navy:#9bc0dd;
    --paper:#0b151c;
    --paper-raised:#111e27;
    --paper-dim:#142530;
    --line:#233642;
    --header-bg:#08121a;
    --header-ink:#e7edec;
    --header-ink-soft:#8ea6b8;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lift: 0 14px 32px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --teal-text:#57c9bd;
  --ink:#e7edec;
  --ink-soft:#a7bdce;
  --ink-faint:#7e94a8;
  --teal:#57c9bd;
  --teal-deep:#3aa89c;
  --mint:#7fe0d2;
  --coral:#57c9bd;
  --coral-deep:#3aa89c;
  --coral-soft:#16323a;
  --navy:#9bc0dd;
  --paper:#0b151c;
  --paper-raised:#111e27;
  --paper-dim:#142530;
  --line:#233642;
  --header-bg:#08121a;
  --header-ink:#e7edec;
  --header-ink-soft:#8ea6b8;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift: 0 14px 32px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', 'Be Vietnam Pro', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:800;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.01em;
}
.mono{font-family:'IBM Plex Mono', monospace;}
code{font-family:'IBM Plex Mono', monospace;background:var(--paper-dim);padding:1px 6px;border-radius:4px;font-size:.9em;color:var(--ink);}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-text);
  font-weight:600;
}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
section{padding:88px 0;}
@media (max-width:720px){ section{padding:56px 0;} .wrap{padding:0 20px;} }

/* ---------- fade-in khi tải trang ---------- */
@keyframes ffFadeInUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.fade-in{ animation:ffFadeInUp var(--med) var(--ease) both; }
@media (prefers-reduced-motion: reduce){
  .fade-in{ animation:none; }
}

/* ---------- header ---------- */
header.site{
  background:var(--header-bg);
  color:var(--header-ink);
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width:1160px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--header-ink);}
.brand-icon{width:46px;height:27px;flex:none;transition:transform var(--fast) var(--ease);}
.brand:hover .brand-icon{transform:scale(1.06) rotate(-4deg);}
.brand-word{font-family:'Poppins','Be Vietnam Pro',sans-serif;font-weight:700;font-size:1.24rem;letter-spacing:0;}
.brand-word b{color:var(--mint);font-weight:700;}
nav.primary{display:flex;gap:34px;align-items:center;}
nav.primary a{
  position:relative;
  font-size:.92rem;font-weight:500;color:var(--header-ink-soft);text-decoration:none;
  transition:color var(--fast) var(--ease);
  padding-bottom:2px;
}
nav.primary a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--mint);border-radius:2px;
  transition:right var(--fast) var(--ease);
}
nav.primary a:hover{color:var(--header-ink);}
nav.primary a:hover::after, nav.primary a.active::after{right:0;}
nav.primary a.active{color:var(--header-ink);}
.header-cta{
  display:flex;align-items:center;gap:14px;
}
.zalo-chip{
  display:flex;align-items:center;gap:7px;
  font-family:'IBM Plex Mono';font-size:.82rem;color:var(--header-ink-soft);
  border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:7px 13px;
  text-decoration:none;
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.zalo-chip:hover{border-color:var(--mint);color:var(--header-ink);}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Sans';font-weight:600;font-size:.92rem;
  padding:11px 20px;border-radius:8px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
/* color:#fff ghi cứng là sai ở nền tối: --coral khi đó là teal SÁNG
   (#57c9bd), chữ trắng trên nền ấy chỉ đạt 2.0:1 — gần như không đọc
   được, mà đây lại là nút quan trọng nhất trang. --paper-raised tự đảo:
   trắng ở nền sáng, xanh đậm ở nền tối. */
.btn-coral{background:var(--coral);color:var(--paper-raised);}
.btn-coral:hover{background:var(--coral-deep);box-shadow:0 8px 20px -8px rgba(31,59,87,.45);}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent;}
.btn-line:hover{border-color:var(--teal);color:var(--teal);box-shadow:0 6px 16px -10px rgba(14,140,140,.4);}
.btn-header{background:var(--coral);color:var(--paper-raised);}
.btn-header:hover{background:var(--coral-deep);}
/* Màu xanh Facebook cố định (không đổi theo theme sáng/tối) — trắng trên
   nền này đạt ~4.6:1, đạt AA cho chữ cỡ nút. */
.btn-fb{background:#1877f2;color:#fff;}
.btn-fb:hover{background:#145dbf;box-shadow:0 8px 20px -8px rgba(24,119,242,.45);}
.navtoggle{
  display:none;background:none;border:0;color:var(--header-ink);
  padding:0;cursor:pointer;
}
@media (max-width:880px){
  .zalo-chip, .btn-header{display:none;}
  .navtoggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:9px;flex:none;
    transition:background-color var(--fast) var(--ease);
  }
  .navtoggle:hover, .navtoggle:focus-visible{background:rgba(255,255,255,.08);}
  .navtoggle svg{transition:transform var(--fast) var(--ease);}

  nav.primary{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--header-bg);
    padding:4px 28px 18px;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 30px -16px rgba(0,0,0,.45);
  }
  header.site.nav-open nav.primary{
    display:flex;
    animation:ffFadeInUp var(--fast) var(--ease) both;
  }
  nav.primary a{
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  nav.primary a::after{display:none;}
  nav.primary a.active{color:var(--mint);}
}
@media (max-width:420px){
  .header-inner{padding:0 16px;}
  nav.primary{padding-left:16px;padding-right:16px;}
}

/* ---------- hero ---------- */
.hero{padding:64px 0 0;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:36px;} }
.hero h1{font-size:clamp(2.1rem,4vw,3.15rem);line-height:1.08;color:var(--navy);}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero p.lede{font-size:1.08rem;color:var(--ink-soft);max-width:52ch;margin:22px 0 30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

.manifest{
  margin-top:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--paper-raised);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.manifest-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;background:var(--paper-dim);border-bottom:1px solid var(--line);
  font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;
}
.manifest-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
@media (max-width:640px){ .manifest-grid{grid-template-columns:repeat(2,1fr);} }
.manifest-cell{
  padding:16px 18px;border-right:1px solid var(--line);border-top:1px solid var(--line);
}
.manifest-cell:nth-child(4n){border-right:0;}
.manifest-cell .k{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.08em;color:var(--ink-faint);text-transform:uppercase;}
.manifest-cell .v{font-family:'IBM Plex Mono';font-size:.92rem;color:var(--ink);margin-top:5px;font-weight:500;}

.hero-mark{
  position:relative;background:var(--header-bg);border-radius:18px;padding:38px;
  display:flex;align-items:center;justify-content:center;min-height:320px;
  overflow:hidden;
}
.hero-mark img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;
}
.hero-mark svg{width:180px;height:180px;position:relative;z-index:1;}
.hero-mark::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.08), transparent 45%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 34px);
}

/* ---------- stats ---------- */
.stats{background:var(--paper-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
@media (max-width:720px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }
.stat{padding:30px 26px;border-left:1px solid var(--line);}
.stat:first-child{border-left:0;}
@media (max-width:720px){ .stat:nth-child(2n+1){border-left:0;} .stat{border-top:1px solid var(--line);} .stat:nth-child(-n+2){border-top:0;} }
.stat .num{font-family:'IBM Plex Mono';font-weight:600;font-size:1.9rem;color:var(--teal);font-variant-numeric:tabular-nums;}
.stat .lbl{font-size:.86rem;color:var(--ink-soft);margin-top:4px;}

/* ---------- section headers ---------- */
.sec-head{max-width:62ch;margin-bottom:44px;}
.sec-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem);color:var(--navy);margin-top:10px;}
.sec-head p{color:var(--ink-soft);margin-top:12px;font-size:1rem;}

/* ---------- category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr;} }
.cat{background:var(--paper-raised);padding:28px 24px;display:flex;flex-direction:column;gap:14px;transition:background-color var(--fast) var(--ease);}
.cat:hover{background:var(--paper-dim);}
.cat .icon{width:46px;height:46px;color:var(--teal);}
.cat h3{font-size:1.05rem;font-weight:700;color:var(--ink);}
.cat p{font-size:.9rem;color:var(--ink-soft);margin:0;flex:1;}
.cat .unit{
  font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-faint);
  border-top:1px dashed var(--line);padding-top:12px;letter-spacing:.03em;
}

/* ---------- product grid (trang chủ + danh mục + liên quan) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;}
@media (max-width:900px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .product-grid{grid-template-columns:1fr;} }
.product-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.product-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--teal) 30%, var(--line));
}
.product-photo{
  position:relative;aspect-ratio:4/3;background:var(--paper-dim);overflow:hidden;
  background-image:repeating-linear-gradient(115deg, var(--line) 0 2px, transparent 2px 22px);
  display:flex;align-items:center;justify-content:center;
}
.product-photo img{transition:transform var(--med) var(--ease);}
.product-card:hover .product-photo img{transform:scale(1.06);}
.product-photo .ph-icon{width:32px;height:32px;color:var(--ink-faint);}
.product-photo .ph-tag{
  position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono';font-size:.64rem;
  letter-spacing:.04em;background:var(--paper-raised);border:1px solid var(--line);
  border-radius:99px;padding:4px 9px;color:var(--ink-faint);
}
.product-photo .cat-tag{position:absolute;top:10px;right:10px;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.03em;background:var(--header-bg);color:var(--header-ink);border-radius:99px;padding:4px 9px;}
.product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
.product-body h3{font-size:.98rem;font-weight:700;color:var(--ink);transition:color var(--fast) var(--ease);}
.product-body a.title-link{text-decoration:none;color:inherit;}
.product-body a.title-link:hover h3{color:var(--teal);}
.product-body .spec{font-size:.84rem;color:var(--ink-soft);flex:1;margin:0;}
.product-foot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed var(--line);margin-top:10px;padding-top:10px;
}
.product-foot .unit{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--ink-faint);letter-spacing:.03em;}
.product-foot a{color:var(--teal-text);font-weight:600;font-size:.82rem;text-decoration:none;transition:gap var(--fast) var(--ease), color var(--fast) var(--ease);display:inline-flex;gap:4px;}
.product-foot a:hover{color:var(--teal-deep);gap:8px;}
.product-note{
  margin-top:20px;font-size:.85rem;color:var(--ink-soft);
  border:1px dashed var(--line);border-radius:10px;padding:12px 16px;
}

/* ---------- process ---------- */
.process{background:var(--header-bg);color:var(--header-ink);}
.process .sec-head p{color:#b9cbd8;}
.process .eyebrow{color:var(--mint);}
.process .sec-head h2{color:#fff;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .steps{grid-template-columns:1fr;} }
.step{border-left:2px solid rgba(255,255,255,.18);padding-left:18px;transition:border-color var(--fast) var(--ease);}
.step:hover{border-color:var(--mint);}
.step .idx{font-family:'IBM Plex Mono';font-size:.85rem;color:var(--mint);}
.step h3{font-size:1.02rem;font-weight:700;margin-top:8px;color:#fff;}
.step p{font-size:.88rem;color:#b9cbd8;margin-top:8px;}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:860px){ .tiers{grid-template-columns:1fr;} }
.tier{
  border:1px solid var(--line);border-radius:14px;padding:28px 26px;background:var(--paper-raised);
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);}
.tier.featured{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal), var(--shadow);}
.tier .tag{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);}
.tier .tag.hi{color:var(--teal-text);}   /* chữ nhỏ -> dùng teal đậm cho đủ tương phản */
.tier h3{font-size:1.12rem;font-weight:700;}
.tier .price{font-family:'IBM Plex Mono';font-size:.95rem;color:var(--coral);font-weight:600;}
.tier ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;}
.tier li{font-size:.87rem;color:var(--ink-soft);padding-left:18px;position:relative;}
.tier li::before{content:"—";position:absolute;left:0;color:var(--ink-faint);}

/* ---------- quote form ---------- */
.quote{background:var(--paper-dim);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start;}
@media (max-width:900px){ .quote-grid{grid-template-columns:1fr;} }
.contact-line{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.95rem;}
.contact-line .ic{width:20px;height:20px;color:var(--teal);flex:none;}
.form-card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:var(--shadow);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.field{display:flex;flex-direction:column;gap:6px;}
.field.full{grid-column:1/-1;}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-soft);}
.field input, .field select, .field textarea{
  font-family:'IBM Plex Sans';font-size:.94rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);}
.form-note{font-size:.78rem;color:var(--ink-faint);margin-top:14px;}

/* Ô nhập thiếu/sai khi bấm gửi — viền đỏ + dòng nhắc ngay dưới ô. */
.field .field-error{font-size:.76rem;color:#c0392b;}
:root[data-theme="dark"] .field .field-error{color:#ff8b7a;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .field .field-error{color:#ff8b7a;} }
.field.has-error input, .field.has-error select, .field.has-error textarea{border-color:#c0392b;}
.field.has-error input:focus, .field.has-error textarea:focus{box-shadow:0 0 0 3px rgba(192,57,43,.18);}

/* Dòng trạng thái dưới nút "Gửi yêu cầu báo giá". */
.form-status{
  font-size:.86rem;line-height:1.5;margin-top:14px;
  padding:12px 14px;border-radius:9px;border:1px solid var(--line);background:var(--paper);
}
.form-status a{color:var(--teal);font-weight:600;}
.form-status.is-ok{border-color:var(--teal);background:color-mix(in srgb, var(--teal) 10%, var(--paper));color:var(--ink);}
.form-status.is-error{border-color:#c0392b;background:color-mix(in srgb, #c0392b 8%, var(--paper));color:var(--ink);}
.form-status.is-busy{color:var(--ink-soft);}

/* Bẫy spam — ẩn khỏi mắt người dùng nhưng bot vẫn "thấy" và điền vào. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- breadcrumb (danh mục + chi tiết) ---------- */
.breadcrumb{font-size:.85rem;color:var(--ink-faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.breadcrumb a{text-decoration:none;color:var(--ink-soft);transition:color var(--fast) var(--ease);}
.breadcrumb a:hover{color:var(--teal);}

/* ---------- page head (danh mục) ---------- */
.page-head{padding-bottom:0;}
.page-head h1{font-size:clamp(1.8rem,3.4vw,2.5rem);color:var(--navy);}
.page-head p{color:var(--ink-soft);margin-top:14px;max-width:62ch;font-size:1rem;}

/* ---------- trang 404 ---------- */
.notfound{padding:96px 0;}
.notfound-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
@media (max-width:900px){ .notfound-grid{grid-template-columns:1fr;gap:36px;} }
.notfound h1{font-size:clamp(1.8rem,3.6vw,2.7rem);color:var(--navy);margin-top:10px;}
.notfound .lede{font-size:1.05rem;color:var(--ink-soft);max-width:52ch;margin:18px 0 28px;}
.notfound-mark{display:flex;justify-content:center;}
.notfound-mark svg{width:260px;height:260px;}
@media (max-width:640px){ .notfound{padding:56px 0;} .notfound-mark svg{width:180px;height:180px;} }

/* ---------- filter bar (danh mục) ---------- */
.filter-bar{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.chip{
  font-family:'IBM Plex Mono';font-size:.78rem;letter-spacing:.02em;
  border:1px solid var(--line);background:var(--paper-raised);color:var(--ink-soft);
  border-radius:99px;padding:8px 16px;cursor:pointer;
  transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-1px);}
/* Chip đang chọn: nền teal đậm + chữ lấy màu nền giấy. Bản cũ ghi cứng
   color:#fff — ở nền tối, --teal là teal SÁNG (#57c9bd) nên chữ trắng trên
   nền đó gần như không đọc nổi (~1.9:1). Dùng biến để tông nào cũng tự đảo. */
.chip.active{background:var(--teal-text);border-color:var(--teal-text);color:var(--paper-raised);}
.result-count{margin:18px 0 0;font-size:.85rem;color:var(--ink-faint);font-family:'IBM Plex Mono';}

/* ---------- trang chi tiết sản phẩm ---------- */
.product-head{padding-bottom:0;}
.product-grid-detail{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:26px;}
@media (max-width:880px){ .product-grid-detail{grid-template-columns:1fr;gap:32px;} }

.gallery-main{
  position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:var(--paper-dim);
  background-image:repeating-linear-gradient(115deg, var(--line) 0 2px, transparent 2px 26px);
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;
}
.gallery-main .ph-icon{width:56px;height:56px;color:var(--ink-faint);}
.gallery-main .ph-tag{
  position:absolute;top:14px;left:14px;font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.04em;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:99px;padding:5px 12px;color:var(--ink-faint);
}
    .gallery-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        animation: ffFadeInUp var(--med) var(--ease) both;
    }
.gallery-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;}
.thumb{
  aspect-ratio:1/1;border-radius:9px;border:2px solid var(--line);cursor:pointer;
  background:var(--paper-dim);overflow:hidden;
  background-image:repeating-linear-gradient(115deg, var(--line) 0 2px, transparent 2px 14px);
  display:flex;align-items:center;justify-content:center;position:relative;padding:0;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.thumb:hover{transform:translateY(-2px);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb .ph-icon{width:18px;height:18px;color:var(--ink-faint);}
.thumb.active{border-color:var(--teal);}
.thumb.active::after{content:"";position:absolute;inset:0;border-radius:7px;box-shadow:0 0 0 1px var(--teal) inset;}
.note-inline{margin-top:18px;font-size:.82rem;color:var(--ink-faint);}

.product-info .eyebrow{display:block;margin-bottom:10px;}
.product-info h1{font-size:clamp(1.7rem,3.2vw,2.3rem);color:var(--navy);}
.product-info .lede{color:var(--ink-soft);margin-top:14px;font-size:1rem;max-width:52ch;}
.product-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}

.spec-list{
  margin-top:28px;border:1px solid var(--line);border-radius:12px;background:var(--paper-raised);
  box-shadow:var(--shadow);overflow:hidden;
}
.spec-row{display:grid;grid-template-columns:1fr 1.5fr;border-top:1px solid var(--line);}
.spec-row:first-child{border-top:0;}
.spec-row .k{padding:13px 16px;font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.03em;color:var(--ink-faint);text-transform:uppercase;background:var(--paper-dim);}
.spec-row .v{padding:13px 16px;font-size:.92rem;color:var(--ink);}

/* ---------- callout ---------- */
.callout{
  margin-top:20px;font-size:.86rem;color:var(--ink-soft);
  border:1px dashed var(--line);border-radius:10px;padding:14px 18px;
}

/* ---------- footer ---------- */
footer{background:var(--header-bg);color:var(--header-ink-soft);}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:56px 0 32px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr;gap:28px;} }
.foot-brand .brand-word{color:var(--header-ink);}
.foot-brand p{font-size:.88rem;margin-top:14px;max-width:36ch;color:var(--header-ink-soft);}
.foot-brand .foot-address{font-family:'IBM Plex Mono','IBM Plex Sans',monospace;font-size:.8rem;margin-top:10px;color:var(--header-ink-soft);}
.foot-col h4{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--header-ink-soft);margin-bottom:14px;font-weight:600;}
.foot-col a{display:block;font-size:.88rem;color:var(--header-ink);text-decoration:none;margin-bottom:10px;width:fit-content;transition:color var(--fast) var(--ease), transform var(--fast) var(--ease);}
.foot-col a:hover{color:var(--mint);transform:translateX(3px);}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);padding:20px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.78rem;color:var(--header-ink-soft);
}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;}
}

/* ===========================================================
   TINH CHỈNH CHO ĐIỆN THOẠI & MÁY TÍNH BẢNG

   Gom về cuối file thành một khối riêng để dễ tìm và dễ chỉnh.
   Các quy tắc bên trên vẫn là bố cục gốc; khối này chỉ đè lên
   ở màn hình hẹp hoặc thiết bị cảm ứng.
   =========================================================== */

/* --- 1. Thiết bị cảm ứng (không có chuột) ---------------------
   Trên điện thoại, trạng thái :hover bị "dính" lại sau khi chạm —
   nút vừa bấm cứ nhô lên và đổi màu mãi cho tới khi chạm chỗ khác.
   Tắt các hiệu ứng hover đó ở thiết bị không có chuột. */
@media (hover:none){
  .btn:hover{transform:none;}
  .btn-coral:hover{background:var(--coral);box-shadow:none;}
  .btn-line:hover{border-color:var(--line);color:var(--ink);box-shadow:none;}
  .btn-header:hover{background:var(--coral);}
  .btn-fb:hover{background:#1877f2;box-shadow:none;}
  .cat:hover{background:var(--paper-raised);}
  .chip:hover{border-color:var(--line);color:var(--ink-soft);transform:none;}
  .chip.active:hover{border-color:var(--teal-text);color:var(--paper-raised);}
  .thumb:hover{transform:none;}
  .brand:hover .brand-icon{transform:none;}
  .zalo-chip:hover{border-color:rgba(255,255,255,.14);color:var(--header-ink-soft);}
  .product-card:hover .product-photo img{transform:none;}
  .foot-col a:hover{color:var(--header-ink);transform:none;}
}

/* --- 2. Máy tính bảng: trả lại lối liên hệ ở header -----------
   Dưới 880px header chuyển sang menu hamburger và ẩn luôn nút
   "Yêu cầu báo giá" + chip Zalo. Trên máy tính bảng (768px trở
   lên) vẫn còn thừa chỗ, nên giữ lại hai lối liên hệ này —
   đây là hai chỗ khách bấm nhiều nhất. */
@media (min-width:600px) and (max-width:880px){
  .btn-header{display:inline-flex;}
}
@media (min-width:740px) and (max-width:880px){
  .zalo-chip{display:flex;min-height:44px;padding:0 15px;}
}

/* --- 3. Màn hình ≤640px --------------------------------------
   Khung form thu bớt lề trong, lấy thêm chỗ cho nội dung khi màn
   hình đã hẹp. (Cỡ chữ ô nhập và vùng chạm nằm ở mục 3b bên dưới.) */
@media (max-width:640px){
  .form-card{padding:22px 18px;}
}

/* --- 3b. VÙNG CHẠM 44px (mọi thiết bị cảm ứng, ≤880px) --------
   Lấy mốc 880px trùng với chỗ header chuyển sang menu hamburger —
   từ đây trở xuống coi như khách đang dùng ngón tay chứ không phải
   chuột, kể cả máy tính bảng. 44px là cỡ đầu ngón tay theo khuyến
   nghị của cả Apple lẫn Google.

   Dùng min-height + flex thay cho padding cứng, để tên sản phẩm dài
   xuống 2 dòng vẫn tự cao thêm đúng cách thay vì bị chồng chữ. */
@media (max-width:880px){
  /* Ô nhập phải để đúng 16px: Safari trên iPhone/iPad tự phóng to cả
     trang khi khách chạm vào ô có cỡ chữ nhỏ hơn 16px — rất khó chịu
     giữa lúc đang điền form báo giá. */
  .field input, .field select, .field textarea{font-size:16px;min-height:44px;padding:11px 13px;}
  .btn{min-height:44px;padding:11px 20px;}
  .chip{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;}
  .product-foot a,
  .contact-line a,
  .breadcrumb a,
  .foot-bottom a{min-height:44px;display:inline-flex;align-items:center;}

  /* width:auto đè lên width:fit-content của bản gốc — link chân trang
     trải hết chiều ngang cột, nên "TikTok" (chữ chỉ rộng 41px) cũng
     đủ 44px theo CẢ hai chiều, không chỉ chiều cao. */
  .foot-col a{min-height:44px;display:flex;align-items:center;margin-bottom:2px;width:auto;}
  .brand{min-height:44px;}
  .product-body a.title-link{min-height:44px;display:flex;align-items:center;}

  /* Bù lại khoảng cách sẵn có, để các khối trên không phình ra đúng
     bằng phần chiều cao vừa thêm vào. */
  .contact-line{margin-top:6px;}
  .breadcrumb{gap:2px 8px;}
  .product-body{gap:2px;padding:12px 18px 14px;}
}

/* --- 4. Màn hình ≤520px (điện thoại dọc) ---------------------- */
@media (max-width:520px){
  /* Nút xếp dọc và tràn hết chiều ngang — hết cảnh 2 nút so le
     nhau vì độ dài chữ khác nhau. */
  .hero-actions, .product-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn, .product-actions .btn{width:100%;justify-content:center;}

  /* Khối trang trí ở đầu trang chủ: 320px là quá nhiều chỗ trống
     phải cuộn qua khi chưa có ảnh thật (assets/hero.jpg). Khi đã
     có ảnh thật, có thể nâng lại con số này. */
  .hero-mark{min-height:210px;padding:24px;}
  .hero-mark svg{width:130px;height:130px;}

  .hero{padding-top:44px;}
  .foot-bottom{flex-direction:column;gap:6px;}
}

/* --- 5. Bảng thông số sản phẩm ≤480px -------------------------
   Hai cột trên màn hình hẹp làm cột nhãn bị bóp lại, chữ như
   "SỐ LƯỢNG TỐI THIỂU" xuống 2–3 dòng. Xếp dọc dễ đọc hơn. */
@media (max-width:480px){
  .spec-row{grid-template-columns:1fr;}
  .spec-row .k{padding:11px 16px 4px;background:transparent;}
  .spec-row .v{padding:0 16px 13px;}
  .spec-row{background:var(--paper-raised);}
  .spec-row:nth-child(even){background:var(--paper-dim);}
}

/* --- 6. Màn hình ≤420px (iPhone SE và tương đương) ------------ */
@media (max-width:420px){
  /* Bảng "Thông tin cung ứng" xuống 1 cột — 2 cột ở đây làm mỗi ô
     chỉ còn ~166px, giá trị dài bị vỡ thành 3 dòng. */
  .manifest-grid{grid-template-columns:1fr;}
  .manifest-cell{border-right:0;}
  .manifest-head{font-size:.68rem;gap:10px;}
  .gallery-thumbs{grid-template-columns:repeat(4,1fr);}
}

/* Viền phải của ô cuối mỗi hàng trong bảng "Thông tin cung ứng":
   quy tắc gốc chỉ đúng khi có 4 cột, nên phải nêu lại cho mốc 2 cột
   — nếu không, ô thứ 2 sẽ có viền thừa chồng lên viền khung. */
@media (max-width:640px) and (min-width:421px){
  .manifest-cell:nth-child(2n){border-right:0;}
}

/* --- 7. Nút Zalo trên điện thoại -----------------------------
   Dưới 880px chip "Zalo: 0978 954 532" bị ẩn đi, mà đó lại là
   lối liên hệ nhanh nhất khi khách đang cầm điện thoại. Header
   vẫn còn chỗ trống giữa logo và nút menu, nên thu chip lại
   thành nút tròn chỉ còn icon (số điện thoại vẫn nằm trong mã
   nguồn để trình đọc màn hình và Google đọc được).
   Vẫn vừa kể cả ở màn hình hẹp nhất (320px): logo 164px + nút Zalo
   44px + nút menu 44px + khoảng cách vẫn còn dưới 300px. */
@media (max-width:739px){
  .zalo-chip{
    display:flex;justify-content:center;
    width:44px;height:44px;padding:0;border-radius:50%;
    font-size:0;gap:0;                 /* giấu phần chữ, giữ icon */
    color:var(--header-ink);
    border-color:rgba(255,255,255,.22);
  }
  .zalo-chip svg{width:19px;height:19px;}
}

/* --- 8. Dải 881–1100px (laptop nhỏ, cửa sổ thu hẹp) -----------
   Header bản desktop cần khoảng 1100px mới xếp đủ trên MỘT dòng:
   logo 164 + menu 4 mục ~507 + chip Zalo 191 + nút CTA 148 + lề.
   Hẹp hơn thế mà chưa tới mốc 880 (chỗ chuyển sang hamburger) thì
   cả ba khối cùng bị ép xuống 2 dòng và tràn khỏi thanh header cao
   72px — trông như trang bị vỡ. Ở dải này: giấu chip Zalo (số điện
   thoại vẫn còn ở phần "Yêu cầu báo giá" và chân trang) và thu hẹp
   khoảng cách giữa các mục menu cho vừa một dòng. */
@media (min-width:881px) and (max-width:1100px){
  .zalo-chip{display:none;}
  nav.primary{gap:22px;}
}

/* Không cho chữ trong menu và nút header xuống dòng ở bất kỳ bề
   rộng nào — thà chật một chút còn hơn vỡ thành 2 dòng. */
nav.primary a, .btn-header{white-space:nowrap;}

/* ===========================================================
   TIẾP CẬN (accessibility)
   =========================================================== */

/* Chữ chỉ dành cho trình đọc màn hình — mắt thường không thấy,
   nhưng vẫn nằm trong luồng đọc nên cấu trúc tiêu đề không bị
   nhảy cấp. Không dùng display:none vì như vậy trình đọc màn
   hình cũng bỏ qua luôn. */
.an-nhin{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0;
}

/* Liên kết "Tới nội dung chính": người dùng bàn phím (và trình đọc
   màn hình) không phải Tab qua toàn bộ menu ở mỗi trang mới. Ẩn cho
   tới khi được focus. */
.bo-qua-menu{
  position:absolute;left:16px;top:-100px;z-index:100;
  background:var(--paper-raised);color:var(--ink);
  border:1px solid var(--teal);border-radius:8px;
  padding:12px 18px;font-weight:600;font-size:.92rem;text-decoration:none;
  box-shadow:var(--shadow-lift);
  transition:top var(--fast) var(--ease);
}
.bo-qua-menu:focus{top:12px;}

/* Trang cần JavaScript để hiện danh sách sản phẩm — nếu khách tắt JS
   thì vẫn phải có lối liên hệ, không để màn hình trống. */
.canh-bao-js{
  margin:0 0 24px;padding:14px 18px;font-size:.9rem;
  border:1px solid var(--line);border-radius:10px;
  background:var(--paper-raised);color:var(--ink-soft);
}
.canh-bao-js a{color:var(--teal-text);font-weight:600;}

/* Thuộc tính hidden phải luôn thắng. Trình duyệt chỉ đặt [hidden]{display:none}
   ở mức stylesheet mặc định, nên bất kỳ quy tắc display nào trong file này cũng
   đè được nó — ví dụ .foot-col a{display:block} từng khiến các link mạng xã hội
   chưa có địa chỉ vẫn hiện ra dù JS đã đặt hidden = true. */
[hidden]{display:none!important;}