/* HiTD · Phương án 2 · Dark Core
   Nền navy #1a3478 và đen, lưới mờ. Gradient HiTD chỉ làm điểm nhấn (viền, nút, gạch chân, số liệu).
   Không glow, không đổ bóng. Font Inter cho mọi chữ và số. Giao diện tối là gốc; chế độ sáng bật bằng nút Dark/Light (data-theme=light trên <html>) ở khối «phiếu #11» cuối file. */

:root{
  --t-fast:.2s;            /* hover, đổi màu */
  --t-base:.3s;            /* mở/đóng, dịch chuyển vừa */
  --t-slow:.6s;            /* hiện dần, ảnh */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --blue:#0070f4;
  --green:#00b63e;
  --blue-deep:#005fd0;     /* nút chính khi rê chuột (nguồn duy nhất) */
  --blue-press:#0050b0;    /* nút chính khi nhấn */
  --grad-start:#2f6fb0;    /* ước lượng, chưa chốt */
  --grad-mid:#059e51;
  --grad-end:#7dc142;
  --gradient:linear-gradient(45deg,var(--grad-start) 0%,var(--grad-mid) 58%,var(--grad-end) 100%);
  --gradient-x:linear-gradient(90deg,var(--grad-start) 0%,var(--grad-mid) 58%,var(--grad-end) 100%);

  --ink:#070b16;
  --navy:#1a3478;
  --panel-ink:#0d1426;
  --panel-navy:#14295f;

  --text:#eef2fa;
  --muted:#aebbd4;
  --label:#74b3ff;
  --line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.07);
  --danger:#ff9b9b;

  --sec-bg:var(--ink);
  --panel:var(--panel-ink);

  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:72px;

  /* biến theo chế độ: giá trị tối ở đây, giá trị sáng ở cuối file */
  --mega-bg:#0b1226;
  --fg-strong:#fff;
  --hover-bg:rgba(255,255,255,.06);
  --ov:255 255 255;
  --page:#09112a;
  --page-2:#0b1634;
  --text-soft:#dbe3f2;
  --text-body:#e6ecf8;
  --fs-body:15px; /* cỡ «chữ thường» của text nội dung chi tiết (feedback 28/10, Chung · 6); --text-body là MÀU, đừng nhầm */
  --accent:#7ab8ff;
  --accent-hi:#9ccaff;
  --ok:#5fe38a;
  --ctl-line:rgba(255,255,255,.4);
  --placeholder:#97a6c6;
  --header-bg:rgba(7,11,22,.92);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--page)}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--fg-strong);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}

/* nhãn nhỏ và số: Inter, viết đúng như nội dung nguồn */
.label,.mono{font-family:var(--sans);font-weight:500;font-size:12px}
.label{color:var(--label)}

.grad-text{background:var(--gradient-x);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- nút ---------- */
.btn{--btn-fill:var(--sec-bg);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border:1px solid transparent;border-radius:8px;
  background:var(--btn-fill);
  color:#fff;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.btn--ghost:hover{--btn-fill:var(--panel-navy)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn--sm{min-height:38px;padding:0 16px;font-size:14px}
.link-arrow{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px;color:var(--fg-strong);text-decoration:none;padding-bottom:2px}
.link-arrow:hover{gap:12px}
.link-arrow::after{content:"→"}

/* ---------- thanh chọn phương án + header ---------- */
.topstrip{background:#000;border-bottom:1px solid var(--line-soft)}
.topstrip .wrap{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:28px}
.topstrip a,.topstrip span{font-family:var(--sans);font-size:11.5px;color:var(--muted);text-decoration:none}
.topstrip a:hover{color:var(--fg-strong)}

.hd-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--line-soft)}
.hd-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gradient-x);opacity:.9}
.hd-header__in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--header-h)}
.hd-logo{display:block;flex:none}
.hd-logo img{width:100px;height:auto}

/* ---------- bố cục khối: cột nhãn bên trái, nội dung bên phải ---------- */
.sec{position:relative;isolation:isolate;padding:96px 0;background:var(--sec-bg)}
.sec--navy{--sec-bg:var(--navy);--panel:var(--panel-navy)}
.sec--ink{--sec-bg:var(--ink);--panel:var(--panel-ink)}
.sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.25) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.25) 60%,transparent 100%)}
.sec--navy::before{background-image:linear-gradient(rgb(var(--ov)/.1) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--ov)/.1) 1px,transparent 1px)}
.sec+.sec.sec--ink,.sec+.sec.sec--navy{border-top:1px solid var(--line-soft)}
.sec__in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:56px;align-items:start}
.sec__rail{position:sticky;top:calc(var(--header-h) + 32px)}
.sec__rail .label{display:block;margin-bottom:14px}
.sec__title{font-size:clamp(26px,2.6vw,38px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.sec__title::after{content:"";display:block;width:56px;height:3px;margin-top:20px;background:var(--gradient-x)}
.sec__lead{margin-top:20px;color:var(--muted);font-size:15.5px;max-width:34ch}
.sec__head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec__foot{margin-top:24px;display:flex;justify-content:center}

@media (max-width:960px){
  .sec{padding:64px 0}
  .sec__in{grid-template-columns:minmax(0,1fr);gap:32px}
  .sec__rail{position:static}
}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;background:var(--ink);padding:72px 0 88px;border-bottom:1px solid var(--line-soft);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%)}
.hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.hero .label{display:block;margin-bottom:20px}
.hero h1{font-size:clamp(34px,4.6vw,64px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.hero h1 em{display:block;margin-top:14px;font-style:normal;font-size:.62em;font-weight:700;letter-spacing:-.02em;padding-bottom:6px}
.hero__sub{margin-top:24px;max-width:56ch;color:var(--muted);font-size:clamp(16px,1.5vw,18px)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero__media{position:relative;background:var(--navy);padding:28px;border-radius:6px}
.hero__media .bubble{position:absolute;left:-28px;bottom:-24px;max-width:240px}
.hero--inner{padding:56px 0 64px}
.hero--inner .hero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}
.hero--inner h1{font-size:clamp(30px,3.8vw,52px)}
.hero--inner .hero__media{padding:20px}
.crumbs{margin-bottom:24px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px}
.crumbs li{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs a{text-decoration:none;padding:2px 6px;margin:-2px -6px;border-radius:4px}
.crumbs a:hover{color:var(--fg-strong);background:var(--hover-bg)}
.crumbs [aria-current]{color:var(--fg-strong)}
@media (max-width:960px){
  .hero{padding:48px 0 64px}
  .hero__in,.hero--inner .hero__in{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero__media .bubble{left:12px;bottom:-20px}
}

/* ---------- khung hội thoại (viền gradient, không đổ bóng), khung viền đôi ---------- */
.bubble{display:inline-block;padding:14px 18px;border:1px solid var(--hair);border-radius:16px;
  background:var(--surface-hi);color:var(--text);font-size:14px;line-height:1.45}
.bubble .label{display:block;margin-bottom:4px}
.frame{position:relative;padding:8px;border:1px solid var(--line);border-radius:6px}
.frame img{width:100%;border:1px solid var(--line);border-radius:3px}
.ratio-43 img,.ratio-169 img,.ratio-32 img{width:100%;height:100%;object-fit:cover}
.ratio-43{aspect-ratio:4/3}.ratio-169{aspect-ratio:16/9}.ratio-32{aspect-ratio:3/2}
.frame.ratio-43,.frame.ratio-169{display:block}

/* ---------- tab folder ---------- */
.tab{position:relative;margin-top:30px;display:flex;flex-direction:column}
.tab__tab{position:absolute;left:0;top:-30px;height:30px;padding:0 14px;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--label)}
.tab__body{position:relative;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:24px}
.tab__body::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gradient-x);border-radius:0 8px 0 0}
.tab__body h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.tab__body p{margin-top:12px;color:var(--muted);font-size:15.5px}
.tab__body .link-arrow{margin-top:20px;align-self:flex-start}

/* ---------- số liệu ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;background:var(--ink)}
.stat{padding:32px 24px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .mono{display:block;color:var(--label);margin-bottom:18px}
.stat__num{font-size:clamp(44px,4vw,60px);line-height:1;font-weight:800;letter-spacing:-.04em;padding-bottom:6px}
.stat h3{margin-top:10px;font-size:17px;font-weight:700}
.stat p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.55}
.stats--wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-left:0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0}
}

/* ---------- lưới thẻ ---------- */
.grid{display:grid;gap:44px 28px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--2>.span-2{grid-column:1/-1}
@media (max-width:1100px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid--2,.grid--3,.grid--4{grid-template-columns:minmax(0,1fr)}}


/* ---------- khách hàng, đối tác ---------- */
.partners h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.partners p{margin-top:10px;color:var(--muted);max-width:68ch}
.partners+.partners{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.logo-wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:28px}
.logo-wall li{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:10px 10px 8px;text-align:center}
@media (max-width:1100px){.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* ---------- tin tức ---------- */
.news{display:grid;gap:28px}
.news--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.news--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.news:empty::before{content:"Chưa có bài viết";color:var(--muted);grid-column:1/-1}
@media (max-width:1100px){.news--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.news--4,.news--2{grid-template-columns:minmax(0,1fr)}}
.post{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}
.post__body{display:flex;flex-direction:column;flex:1;padding:20px}
.post__meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.post__meta .label{color:var(--label)}
.post__meta time{font-family:var(--sans);font-size:12px;color:var(--muted)}
.post h3{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.post h3 a{text-decoration:none}
.post h3 a::after{content:"";position:absolute;inset:0}
.post p{margin-top:10px;color:var(--muted);font-size:14.5px}
.post__more{margin-top:16px;font-weight:600;font-size:14px}
.post__more::after{content:" →"}
.post--row{flex-direction:row}
.post--row img{width:42%;height:auto;aspect-ratio:auto;object-fit:cover;border-bottom:0;border-right:1px solid var(--line)}
.post--row .post__body{width:58%}
@media (max-width:560px){.post--row{flex-direction:column}.post--row img{width:100%;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}.post--row .post__body{width:100%}}
.news-group+.news-group{margin-top:40px}
.news-group h3.group-title{font-size:22px;font-weight:700;margin-bottom:24px;display:flex;align-items:center;gap:14px}
.news-group h3.group-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- đọc dài (Về chúng tôi) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,5fr);gap:48px;align-items:start}
.story__text{max-width:64ch}
.story__text h3{font-size:clamp(22px,2.2vw,30px);line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-bottom:24px}
.story__text p{color:var(--text-soft);font-size:16.5px;line-height:1.75}
.story__text p+p{margin-top:18px}
.story__text .bubble{display:block;margin:28px 0;padding:22px 26px;font-size:clamp(18px,1.8vw,22px);font-weight:600;line-height:1.45}
.story__aside{position:sticky;top:calc(var(--header-h) + 32px)}
.about-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;align-items:start}
@media (max-width:1100px){.about-split{grid-template-columns:minmax(0,1fr)}.story__aside{position:static;max-width:520px}}

/* ---------- timeline ---------- */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:none}
.timeline li{position:relative;padding-top:44px}
.timeline li::before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;border-radius:3px;background:var(--green)}
.timeline li::after{content:"";position:absolute;top:6px;left:22px;right:-28px;height:2px;background:var(--gradient-x)}
.timeline li:last-child::after{display:none}
.timeline .mono{display:block;color:var(--label);margin-bottom:10px}
.timeline h3{font-size:18px;line-height:1.35;font-weight:700}
.timeline p{margin-top:10px;color:var(--muted);font-size:15px}
.timeline--steps li{padding-top:0;padding-left:0}
.timeline--steps li::before,.timeline--steps li::after{display:none}
.step{height:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:20px;position:relative}
.step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gradient-x);border-radius:0 8px 0 0}
.step__no{font-size:44px;line-height:1;font-weight:800;letter-spacing:-.04em;padding-bottom:6px;display:block}
.step h3{margin-top:14px;font-size:18px;font-weight:700}
.step p{margin-top:8px;color:var(--muted);font-size:15px}
@media (max-width:1100px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}.timeline li:nth-child(2)::after{display:none}}
@media (max-width:640px){
  .timeline{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .timeline li{padding:0 0 0 36px}
  .timeline li::before{top:6px}
  .timeline li::after,.timeline li:nth-child(2)::after{display:block;top:26px;left:6px;right:auto;width:2px;height:auto;bottom:-32px;background:linear-gradient(180deg,var(--grad-start),var(--grad-mid))}
  .timeline li:last-child::after{display:none}
  .timeline--steps li{padding:0}
}

/* ---------- tầm nhìn / sứ mệnh / giá trị ---------- */
.vmv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.vmv .span-2{grid-column:1/-1}
.vmv h4{font-size:var(--fs-body);line-height:1.5;font-weight:600;letter-spacing:0}
.vmv .tab__body p{font-size:var(--fs-body)}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.value{border:1px solid var(--line);border-radius:8px;padding:18px;background:var(--ink)}
.value h5{margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:.01em}
.value h5::after{content:"";display:block;width:32px;height:2px;margin-top:10px;background:var(--gradient-x)}
.value p{font-size:var(--fs-body);color:var(--text-soft)}
.value p+p{margin-top:10px}
@media (max-width:960px){.vmv{grid-template-columns:minmax(0,1fr)}.values{grid-template-columns:minmax(0,1fr)}}

/* ---------- trang giải pháp ---------- */
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px;align-items:center}
.split__text{font-size:clamp(17px,1.6vw,20px);line-height:1.7;color:var(--text-soft)}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}}
.checks li{position:relative;padding:18px 0 18px 36px;border-top:1px solid var(--line);font-size:clamp(16px,1.5vw,18px);line-height:1.55}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:4px;top:27px;width:10px;height:10px;background:var(--gradient)}
.cta-band{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;position:relative}
.cta-band::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--gradient-x);border-radius:10px 10px 0 0}
.cta-band h2{font-size:clamp(22px,2.4vw,32px);line-height:1.25;font-weight:800;letter-spacing:-.02em}
.cta-band p{margin-top:8px;color:var(--muted)}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- liên hệ ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.org h3{font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
.org .en{margin-top:6px;color:var(--muted)}
.org dl{margin-top:28px;display:grid;gap:0}
.org dl>div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.org dl>div:last-child{border-bottom:1px solid var(--line)}
.org dt{font-family:var(--sans);font-size:11.5px;color:var(--label);padding-top:4px}
.org dd{overflow-wrap:anywhere}
.org a{text-decoration:underline;text-underline-offset:3px}
.map-box .btn{margin-top:20px}
@media (max-width:480px){.org dl>div{grid-template-columns:minmax(0,1fr);gap:4px}}
.addr dl{margin-top:16px;display:grid;gap:10px;font-size:15px}
.addr dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px}
.addr dt{font-family:var(--sans);font-size:11px;color:var(--label);padding-top:3px}
.addr dd{overflow-wrap:anywhere;color:var(--text-soft)}
.addr a{text-underline-offset:3px}

/* ---------- form ---------- */
.form{display:grid;gap:16px;max-width:720px}
.form--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.field label{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.field .req{color:var(--label)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--fg-strong)}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgb(var(--ov)/.4)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--fg-strong)}
.field input[type=file]{padding:10px 12px}
.field .hint{margin-top:6px;font-size:13px;color:var(--muted)}
.field .err{display:none;margin-top:6px;font-size:13.5px;color:var(--danger)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--danger)}
.field.is-invalid .err{display:block}
.form-note{font-size:13px;color:var(--muted)}
.form-ok{display:none;border:1px solid var(--green);border-radius:8px;padding:16px 18px;background:rgba(0,182,62,.1);color:var(--fg-strong)}
.form-ok.is-show{display:block}
.form-ok::before{content:"✓ ";color:var(--ok);font-weight:700}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-strong) 50%),linear-gradient(135deg,var(--fg-strong) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px!important}
select option{background:var(--ink);color:var(--fg-strong)}
@media (max-width:640px){.form--2{grid-template-columns:minmax(0,1fr)}}

/* ---------- tuyển dụng ---------- */
.filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:24px}
@media (max-width:720px){.filters{grid-template-columns:minmax(0,1fr)}}
.jobs{border-top:1px solid var(--line)}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.job[hidden]{display:none}
.job h3{font-size:19px;line-height:1.35;font-weight:700}
.job__meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:14px}
.job__meta .mono{color:var(--label);font-size:11.5px}
.jobs-empty{display:none;padding:32px 0;color:var(--muted)}
.jobs-empty.is-show{display:block}
@media (max-width:560px){.job{grid-template-columns:minmax(0,1fr)}.job .btn{width:100%}}

/* ---------- footer ---------- */
.hd-footer{position:relative;isolation:isolate;background:#000;padding:72px 0 32px;border-top:1px solid var(--line-soft)}
.hd-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--gradient-x)}
.hd-footer::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.hd-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr;gap:40px}
.hd-footer h2{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--label);margin-bottom:18px;line-height:1.5}
.hd-footer li a{display:block;padding:2px 0;color:var(--muted);font-size:14.5px;line-height:1.45;text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
.hd-footer li a:hover{color:var(--fg-strong);text-decoration:underline;text-underline-offset:3px}
.hd-footer .company img{width:100px;height:auto;margin-bottom:20px}
.hd-footer .company strong{display:block;font-size:14.5px;line-height:1.45}
.hd-footer .company p{margin-top:10px;color:var(--muted);font-size:14.5px}
.hd-footer .company address{font-style:normal;margin-top:16px;display:grid;gap:6px;color:var(--muted);font-size:14.5px}
.hd-footer .company address a{text-underline-offset:3px}
/* link footer: hover đổi nền ô (Chung · hover), thay cho gạch chân; đặt sau rule chung ở trên */
.hd-footer li a{display:block;padding:2px 8px;margin-left:-8px;border-radius:6px;color:var(--muted);font-size:14.5px;line-height:1.45;text-decoration:none;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.hd-footer li a:hover{color:var(--fg-strong);background:rgba(255,255,255,.1);text-decoration:none}
.hd-footer .copy{margin-top:20px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.hd-footer__extra{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.social{display:flex;gap:10px;margin-top:16px}
.social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;color:var(--fg-strong);padding:0}
.social a:hover{border-color:var(--fg-strong);text-decoration:none}
.social svg{width:20px;height:20px}
@media (max-width:1100px){.hd-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hd-footer__grid{grid-template-columns:minmax(0,1fr)}.hd-footer{padding-top:56px}}

/* ---------- chuyển động ---------- */
/* main.js đặt .in khi vào khung và --d (so le) cho từng phần tử trong cùng lô; [data-stag] là con của lưới, hiện bằng animation để không đè transition hover của thẻ */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.js [data-stag]:not(.in){opacity:0}
.js [data-stag].in{animation:rv-in var(--t-slow) var(--ease-out) var(--d,0ms) backwards}
@keyframes rv-in{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-stag]:not(.in){opacity:1}
}

/* =====================================================================
   v2 · bản gửi khách: ảnh thật, icon, thang khoảng cách 8/16/24/48/96
   ===================================================================== */
:root{--s1:8px;--s2:16px;--s3:24px;--s4:48px;--s5:96px}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:10px;color:var(--label);background:rgb(var(--ov)/.03)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn .i{width:18px;height:18px}
.btn:focus-visible,.link-arrow:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.link-arrow::after{content:none}
.link-arrow .i{width:16px;height:16px;transition:transform var(--t-fast) var(--ease-out)}
.link-arrow:hover .i{transform:translateX(4px)}
.link-arrow:hover{gap:8px}

/* ảnh */
.photo{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--panel-ink)}
.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.9);transition:transform var(--t-slow) var(--ease-out)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(26,52,120,.16),rgba(7,11,22,.4))}
.r-43{aspect-ratio:16/10}.r-169{aspect-ratio:16/9}.r-32{aspect-ratio:3/2}.r-11{aspect-ratio:1/1}

/* hero có ảnh nền */
.hero{display:flex;align-items:center;min-height:clamp(420px,52vw,700px);padding:var(--s5) 0;border-bottom:0}
.hero::before{display:none}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,11,22,.95) 0%,rgba(7,11,22,.74) 42%,rgba(26,52,120,.18) 100%),linear-gradient(0deg,var(--ink) 0,rgba(7,11,22,0) 22%)}
.hero__in,.hero--inner .hero__in{display:block;width:min(1240px,100% - 48px)}
.hero__txt{max-width:780px}
.hero h1{font-size:clamp(36px,5vw,68px)}
.hero h1 em{font-size:.55em}
.hero__sub{margin-top:var(--s2);max-width:72ch}
.hero--inner{min-height:clamp(340px,34vw,440px);padding:var(--s4) 0 var(--s4)}
.hero--inner h1{font-size:clamp(28px,3.4vw,46px);text-wrap:balance}
.hero--inner .label,.hero .label{margin-bottom:var(--s2)}
.crumbs{margin-bottom:var(--s3)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:var(--s2) var(--s4);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
.facts b{display:block;font-size:clamp(26px,2.6vw,36px);line-height:1.1;font-weight:800;letter-spacing:-.03em}
.facts span{font-family:var(--sans);font-size:12px;color:var(--muted)}
@media (max-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:var(--s4) 0}}

/* nhịp khối */
.sec{padding:var(--s5) 0}
.sec__in{gap:var(--s4) 56px}
@media (max-width:960px){.sec{padding:64px 0}.sec__in{gap:var(--s3)}}
.sec__lead{max-width:36ch}
.sec__sub{max-width:68ch;color:var(--muted);font-size:var(--fs-body);line-height:1.7;margin-bottom:var(--s4)}
.sec__sub--lg{font-size:var(--fs-body);color:var(--text-soft)}
.sec__sub+.btn,.sec__cta{margin-top:var(--s3)}
.sec__sub a.btn{margin-top:var(--s3)}

/* thẻ có ảnh */
.pcard{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.pcard:hover{border-color:rgb(var(--ov)/.42);transform:translateY(-3px)}
.pcard:hover .photo img{transform:scale(1.05)}
.pcard .photo{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.pcard__body{display:flex;flex-direction:column;flex:1;gap:12px;padding:var(--s3)}
.pcard h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard h3 a:focus-visible{outline:none}
.pcard h3 a:focus-visible::after{outline:2px solid var(--fg-strong);outline-offset:-2px;border-radius:10px}
.pcard p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:62ch}
.pcard__more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.pcard__more .i{width:16px;height:16px;transition:transform var(--t-fast) var(--ease-out)}
.pcard:hover .pcard__more .i{transform:translateX(4px)}
.pcard__top{display:flex;align-items:center;gap:var(--s2)}
.pcard--wide{flex-direction:row}
.pcard--wide .photo{width:42%;border-bottom:0;border-right:1px solid var(--line);aspect-ratio:auto;min-height:260px}
.pcard--wide .pcard__body{width:58%;justify-content:center}
@media (max-width:720px){.pcard--wide{flex-direction:column}.pcard--wide .photo,.pcard--wide .pcard__body{width:100%}.pcard--wide .photo{aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}}
.grid{gap:var(--s4) var(--s3)}
.grid--2>.span-2{grid-column:1/-1}
.grid--3.tight,.grid--2.tight,.grid--4.tight{gap:var(--s3)}

/* thẻ tính năng, không ảnh */
.fcard{display:flex;flex-direction:column;gap:12px;height:100%;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:10px;position:relative}
.fcard::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gradient-x);border-radius:10px 10px 0 0;opacity:0;transition:opacity var(--t-fast) var(--ease-out)}
.fcard:hover::before{opacity:1}
.fcard h3{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.fcard p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:62ch}
.fcard .code{font-family:var(--sans);font-size:12px;color:var(--label)}
.bul{display:grid;gap:12px}
.bul li{position:relative;padding-left:24px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:70ch}
.bul li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--gradient)}
.bul li b{color:var(--fg-strong);font-weight:600}
.bul--lg li{font-size:clamp(16px,1.5vw,18px);color:var(--text-soft);padding:var(--s2) 0 var(--s2) 36px;border-top:1px solid var(--line)}
.bul--lg{gap:0}
.bul--lg li:last-child{border-bottom:1px solid var(--line)}
.bul--lg li::before{left:6px;top:calc(var(--s2) + .55em)}
.prose p{max-width:68ch;color:var(--text-soft);font-size:17px;line-height:1.75}
.prose p+p{margin-top:var(--s2)}
.prose h3{font-size:22px;font-weight:700;margin:var(--s4) 0 var(--s2)}
.prose h3:first-child{margin-top:0}
.prose .bul{margin-top:var(--s2)}
.callout{margin-top:var(--s4);padding:var(--s3) 28px;border:1px solid var(--line);border-left:1px solid var(--hair);border-radius:0 10px 10px 0;background:var(--panel);font-size:clamp(17px,1.6vw,20px);line-height:1.6;font-weight:600;max-width:72ch}
.callout h3{font-size:18px;margin-bottom:12px}
.callout p{font-weight:400;color:var(--text-soft);font-size:16.5px;line-height:1.7}
.split{align-items:center;gap:var(--s4)}
.split__text{max-width:62ch}
.split__text p+p{margin-top:var(--s2)}
.split__text{font-size:17px;line-height:1.75}
.split .photo{height:100%;min-height:280px}
.story-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s4);align-items:start}
.story-cols .photo{position:sticky;top:calc(var(--header-h) + 32px)}
@media (max-width:960px){.story-cols{grid-template-columns:minmax(0,1fr)}.story-cols .photo{position:static}}

/* 5 lớp */
.layers{display:grid;gap:12px}
.layer{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.layer__head{padding:var(--s3);border-right:1px solid var(--line);position:relative}
.layer__head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--grad-start),var(--grad-mid))}
.layer__head .mono{display:block;color:var(--label);margin-bottom:8px}
.layer__head h3{font-size:17px;line-height:1.35;font-weight:700}
.layer__body{padding:var(--s3)}
.layer__body ul{display:flex;flex-wrap:wrap;gap:8px}
.layer__body li{padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:14.5px;line-height:1.45;color:var(--text-soft);background:rgb(var(--ov)/.03)}
.layer__body p{margin-top:var(--s2);color:var(--muted);font-size:15px}
@media (max-width:720px){.layer{grid-template-columns:minmax(0,1fr)}.layer__head{border-right:0;border-bottom:1px solid var(--line)}}

/* bảng bảo hành */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
.tbl th{padding:var(--s2) var(--s3);text-align:left;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--label);border-bottom:1px solid var(--line);background:rgb(var(--ov)/.03)}
.tbl td{padding:var(--s2) var(--s3);border-top:1px solid var(--line-soft);vertical-align:top;font-size:15.5px;line-height:1.55}
.tbl td:first-child{font-weight:600;white-space:nowrap}
.tbl a{text-underline-offset:3px}
@media (max-width:720px){.tbl,.tbl tbody,.tbl tr,.tbl td{display:block}.tbl thead{display:none}.tbl tr{padding:var(--s2) 0;border-top:1px solid var(--line)}.tbl tr:first-child{border-top:0}.tbl td{border:0;padding:4px var(--s2)}.tbl td:first-child{white-space:normal;font-size:17px}}

/* lưới logo */
.logo-wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.logo-wall--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.logo-wall li{display:grid;place-items:center;min-height:88px;padding:var(--s2);border:1px solid var(--line);border-radius:10px;background:var(--panel);transition:border-color var(--t-fast) var(--ease-out)}
@media (max-width:960px){.logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.logo-wall,.logo-wall--3{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-wall--3 li:first-child{grid-column:1/-1}}
.partners p{max-width:68ch}

/* hệ sinh thái (Home) */

/* bản đồ liên hệ */
.mapcard{position:relative}
.mapcard .photo{aspect-ratio:16/10}
.mapcard__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.mapcard__pin svg{width:44px;height:44px;fill:var(--green);stroke:#fff;stroke-width:1.2}
.mapcard__pin span{padding:8px 14px;background:var(--ink);border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-weight:600;white-space:nowrap}

/* footer gọn */
.hd-footer{padding:var(--s5) 0 var(--s3)}
.hd-footer__grid{gap:24px 40px}
.hd-footer .company p.tag{margin-top:8px}
.hd-footer address span{display:flex;gap:10px;align-items:flex-start}
.hd-footer address .i{margin-top:4px;color:var(--label);width:16px;height:16px}
.hd-footer__bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;color:var(--muted)}
.hd-footer__bar ul{display:flex;gap:var(--s3)}
.hd-footer__bar a{padding:0;display:inline;color:var(--muted);font-size:12px;text-decoration:none}
.hd-footer__bar a:hover{color:var(--fg-strong)}
.hd-footer h2 a{color:inherit;text-decoration:none}
.hd-footer h2 a:hover{color:var(--fg-strong)}
.social{margin-top:0}

.social svg,.hd-footer .social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.mapcard__pin{color:#fff}
.mapcard__pin{left:var(--s3);top:auto;bottom:var(--s3);transform:none;flex-direction:row;align-items:center;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 16px 8px 8px}
.mapcard__pin svg{width:32px;height:32px}
.mapcard__pin span{padding:0;border:0;background:none}
.split .photo{height:auto;min-height:0;width:100%}
@media (max-width:720px){
  .hero::after{background:linear-gradient(180deg,rgba(7,11,22,.8) 0%,rgba(7,11,22,.86) 100%)}
  .topstrip span{display:none}
}

/* trạng thái tương tác bổ sung */
.post{transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.post:hover{border-color:rgb(var(--ov)/.42);transform:translateY(-3px)}
.post h3{text-wrap:balance}
.btn--ghost:active{--btn-fill:var(--panel-navy)}
.hd-footer a:focus-visible,.social a:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px;border-radius:4px}
.post .photo{border:0;border-radius:0;border-bottom:1px solid var(--line);aspect-ratio:2/1}
.post--row .photo{flex:none;width:42%;aspect-ratio:auto;min-height:220px;border-bottom:0;border-right:1px solid var(--line)}
.post--row img{width:100%;height:100%;border:0}
.post--row .post__body{width:58%;flex:1}
@media (max-width:560px){.post--row .photo{width:100%;aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.post--row .post__body{width:100%}}

/* ===== Tin tuyển dụng ===== */
.switch{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s3);padding:4px;border:1px solid var(--line);border-radius:10px;background:rgba(7,11,22,.6)}
.switch__label{padding:0 12px 0 8px;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.switch a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.switch a:hover{color:var(--fg-strong);background:rgb(var(--ov)/.08)}
.switch a[aria-current="page"]{color:#fff;background:var(--blue)}
.switch a:focus-visible{outline:2px solid var(--fg-strong);outline-offset:2px}
@media (max-width:520px){.switch{flex-wrap:wrap}.switch__label{width:100%;padding:6px 8px 2px}}

.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgb(var(--ov)/.03);color:var(--text-soft);font-size:14.5px;font-weight:500;line-height:1;text-decoration:none;cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.chip:hover{border-color:rgb(var(--ov)/.5);background:rgb(var(--ov)/.08);color:var(--fg-strong)}
.chip:active{transform:translateY(1px)}
.chip:focus-visible{outline:2px solid var(--fg-strong);outline-offset:2px}
.chip[aria-pressed="true"]{border-color:transparent;color:#fff;font-weight:600;background:var(--blue);border:1px solid var(--blue)}
.chip--sm{min-height:30px;padding:0 12px;font-size:13px}
.chip--all{min-height:40px}

.tagbar{display:grid;gap:12px;padding:20px;margin-bottom:var(--s3);border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative}
.tagbar::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--gradient-x);border-radius:10px 10px 0 0}
.tagbar__row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--s2);align-items:start}
.tagbar__label{padding-top:10px;font-family:var(--sans);font-size:12px;color:var(--label)}
.tagbar__chips{display:flex;flex-wrap:wrap;gap:8px}
.tagbar__foot{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;justify-content:space-between;padding-top:var(--s2);border-top:1px solid var(--line-soft)}
.tagbar__count{color:var(--muted);font-size:14.5px}
.tagbar__count span{color:var(--fg-strong);font-weight:700}
@media (max-width:640px){.tagbar__row{grid-template-columns:minmax(0,1fr);gap:4px}.tagbar__label{padding-top:0}}

.jgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:720px){.jgrid{grid-template-columns:minmax(0,1fr)}}
.jcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;transition:border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.jcard[hidden]{display:none}
.jcard:hover{border-color:rgb(var(--ov)/.42);transform:translateY(-3px)}
.jcard__tags{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:2}
.jcard h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.jcard h3 a{text-decoration:none}
.jcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.jcard h3 a:focus-visible{outline:none}
.jcard h3 a:focus-visible::after{outline:2px solid var(--fg-strong);outline-offset:-2px;border-radius:10px}
.jcard__meta{display:grid;gap:6px;color:var(--text-soft);font-size:14.5px}
.jcard__meta li{display:flex;gap:8px;align-items:center}
.jcard__meta .i{width:16px;height:16px;color:var(--label)}
.jcard p{color:var(--muted);font-size:15px;line-height:1.65}
.jcard__more{margin-top:auto;padding-top:8px;display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15px}
.jcard__more .i{width:16px;height:16px;transition:transform var(--t-fast) var(--ease-out)}
.jcard:hover .jcard__more .i{transform:translateX(4px)}
.jobs-none{display:grid;justify-items:start;gap:var(--s2);padding:var(--s4) var(--s3);border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.jobs-none[hidden]{display:none}

.hero__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.jinfo-band{background:var(--ink);border-bottom:1px solid var(--line-soft)}
.jinfo-wrap{padding:var(--s3) 0}
.jinfo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin:0}
.jinfo>div{padding:var(--s2) var(--s3);border-left:1px solid var(--line)}
.jinfo>div:first-child{border-left:0;padding-left:0}
.jinfo dt{font-family:var(--sans);font-size:12px;color:var(--label);margin-bottom:6px}
.jinfo dd{font-size:16px;font-weight:600}
@media (max-width:960px){.jinfo{grid-template-columns:repeat(2,minmax(0,1fr))}.jinfo>div{border-left:0;padding-left:0;border-top:1px solid var(--line-soft)}.jinfo>div:nth-child(-n+2){border-top:0}}

.btn--lg{min-height:56px;padding:0 32px;font-size:17px}
.apply{display:grid;gap:var(--s3);justify-items:start;padding:var(--s4);border:1px solid var(--line);border-radius:10px;background:var(--panel);position:relative}
.apply::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gradient-x);border-radius:10px 10px 0 0}
.apply__label{display:block;margin-bottom:4px;font-family:var(--sans);font-size:12px;color:var(--label)}
.apply__mail{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.apply__mail .apply__label{width:100%;margin:0}
.apply__mail code{padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--ink);font-family:var(--sans);font-size:15px;color:var(--fg-strong);overflow-wrap:anywhere}
.apply__subject{color:var(--text-soft);font-size:15.5px;overflow-wrap:anywhere}
.apply__subject .apply__label{display:inline;margin-right:8px}
.copy-btn{display:inline-flex;gap:8px;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--fg-strong);font-size:14.5px;font-weight:600;cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.copy-btn .i{width:16px;height:16px}
.copy-btn:hover{border-color:var(--fg-strong);background:rgb(var(--ov)/.08)}
.copy-btn:active{transform:translateY(1px)}
.copy-btn:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.copy-status{min-height:1.4em;font-size:14px;color:var(--ok)}

/* =====================================================================
   v3 · tinh chỉnh: bỏ viền cứng, bỏ trang trí rập khuôn, nền navy chuyển nhẹ
   Bo góc 3 cấp: ảnh 12px · thẻ 16px · nút pill. Viền chỉ 1px rất nhạt.
   ===================================================================== */
:root{
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.06);
  --surface:rgba(255,255,255,.045);--surface-hi:rgba(255,255,255,.075);--hair:rgba(255,255,255,.08);
  --r-img:12px;--r-card:16px;--r-btn:999px;--num:var(--accent);
}

/* nền section: các sắc navy gần nhau, nối liền, không lưới */
.sec::before,.hero::before,.hd-footer::after{display:none}
.sec{--panel:var(--surface);--sec-bg:transparent;border-top:0!important}
.hd-footer{border-top:0}
.hd-footer::before{height:1px;background:linear-gradient(90deg,transparent,rgba(122,184,255,.5),rgba(0,182,62,.5),transparent)}
.hd-header{border-bottom:0;background:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hd-header::after{height:1px;opacity:.55}
.topstrip{border-bottom:0}

/* chữ máy chỉ còn ở nhãn đầu hero; mọi nơi khác là Inter thường */
.mono,.label,.crumbs li,.topstrip a,.topstrip span,.tab__tab,.post__meta time,.org dt,.addr dt,.jinfo dt,.tagbar__label,.apply__label,.switch__label,.facts span,.layer__head .mono,.timeline .mono,.hd-footer h2,.hd-footer__bar,.hd-footer__bar a,.hd-footer .copy,.job__meta .mono,.stat .mono{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:500}
.label{font-size:14px;color:var(--label)}
.crumbs li{font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"›";color:rgb(var(--ov)/.3)}
.topstrip a,.topstrip span{font-size:12.5px}
.hd-footer h2{font-size:14px;font-weight:600;color:var(--fg-strong);margin-bottom:var(--s2)}
.hd-footer__bar,.hd-footer__bar a{font-size:13px}
.tab__tab,.post__meta time,.org dt,.addr dt,.jinfo dt,.tagbar__label,.apply__label,.switch__label,.facts span{font-size:13px}
.facts span{color:var(--muted)}
.org dt,.addr dt,.jinfo dt,.tagbar__label,.apply__label{color:var(--label)}

/* tiêu đề section: chữ trần, không gạch trang trí */
.sec__title::after,.value h5::after{display:none}
.sec__rail .label{margin-bottom:10px}

/* nút: pill, viền 1px nhạt, không viền gradient dày */
.btn{--btn-fill:transparent;border:1px solid transparent;border-radius:var(--r-btn);background:var(--btn-fill);transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
/* nút chính: MỘT bộ duy nhất, mọi trạng thái đặc, không opacity/filter */
.btn--primary{--btn-fill:var(--blue);border-color:transparent}
.btn--primary:hover{--btn-fill:var(--blue-deep)}
.btn--primary:active{--btn-fill:var(--blue-press)}
.btn--ghost{--btn-fill:rgb(var(--ov)/.04);border-color:var(--ctl-line);color:var(--fg-strong)}
.btn--ghost:hover{--btn-fill:rgb(var(--ov)/.1);border-color:rgb(var(--ov)/.4)}
.btn--ghost:active{--btn-fill:rgb(var(--ov)/.14)}
.link-arrow{border:0;padding-bottom:0;text-decoration:none}
.link-arrow{padding:4px 10px;margin:-4px -10px;border-radius:6px}
.link-arrow:hover{background:var(--hover-bg)}

/* thẻ: phân lớp bằng sắc nền, viền 1px rất nhạt, bo 16px, không dải gradient */
.tab__body,.fcard,.pcard,.post,.jcard,.step,.value,.cta-band,.apply,.tagbar,.layer,.org,.jobs-none,.callout{border-radius:var(--r-card)}
.fcard,.pcard,.post,.jcard,.step,.value,.cta-band,.apply,.tagbar,.layer,.callout,.tab__body{background:var(--surface);border:1px solid var(--hair)}
.fcard::before,.step::before,.tab__body::before,.cta-band::before,.tagbar::before,.apply::before,.layer__head::before{display:none}
.pcard:hover,.post:hover,.jcard:hover,.fcard:hover{border-color:rgb(var(--ov)/.18);background:var(--surface-hi);transform:none}
.pcard,.post,.jcard{transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.pcard .photo{border-radius:0;border:0}
.pcard,.post{overflow:hidden}
.callout{border-left:1px solid var(--hair);font-weight:500}
.cta-band{padding:32px var(--s4)}
.layer__head{border-right:1px solid var(--hair)}
.value{background:rgb(var(--ov)/.04)}

/* tab folder: khối tô màu đặc, liền với thân thẻ, không nét viền */
.tab{margin-top:34px}
.tab--plain{margin-top:0}
.tab__tab{height:34px;padding:0 16px;border:0;border-radius:12px 12px 0 0;background:var(--surface-hi);color:var(--accent-hi);font-weight:600;top:-34px}
.tab--plain .tab__tab{display:none}
.tab__body{border:0;background:var(--surface-hi);border-radius:0 var(--r-card) var(--r-card) var(--r-card)}
.tab--plain .tab__body{border-radius:var(--r-card)}

/* ảnh: bo 12px, không viền */
.photo{border:0;border-radius:var(--r-img);background:var(--mega-bg)}
.photo::after{background:linear-gradient(180deg,rgba(15,33,80,.14),rgba(7,11,22,.32))}
.post .photo{border-radius:0;border:0}
.post--row .photo{border:0}

/* số liệu: không chia ô, số lớn một màu, vạch dọc 1px rất nhạt */
.stats{border:0;border-radius:0;background:none;gap:0}
.stat{padding:12px var(--s3) 12px;border-left:0;border-top:0!important}
.stat:first-child{border-left:0;padding-left:0}
.stat__num,.stat__num.grad-text,.facts b.grad-text,.step__no.grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--num);-webkit-text-fill-color:currentColor}
.stat__num{margin-bottom:12px}
.stat h3{color:var(--fg-strong)}
@media (max-width:1100px){.stat:nth-child(3){border-left:0;padding-left:0}.stat:nth-child(n+3){padding-top:var(--s3)}}
@media (max-width:520px){.stat{border-left:0;padding-left:0}}
.step__no{font-size:34px;font-weight:700;letter-spacing:-.02em;padding-bottom:0}

/* timeline: đường 1px nhạt, chấm tròn nhỏ, mốc hiện tại màu brand */
.timeline li{padding-top:32px}
.timeline li::before{width:10px;height:10px;border-radius:50%;background:rgb(var(--ov)/.55);top:0}
.timeline li:last-child::before{background:var(--green)}
.timeline li::after{top:4px;left:18px;right:-28px;height:1px;background:rgb(var(--ov)/.16)}
.timeline .mono{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--fg-strong);margin-bottom:8px}
.timeline--steps li::before,.timeline--steps li::after{display:none}
@media (max-width:640px){.timeline li{padding:0 0 0 32px}.timeline li::before{top:7px}.timeline li::after,.timeline li:nth-child(2)::after{top:20px;left:4px;width:1px;background:rgb(var(--ov)/.16)}}

/* icon: nét 1.5px, màu dịu, nền tròn ngả màu nhạt */
.ico{width:44px;height:44px;border:0;border-radius:50%;background:rgba(122,184,255,.12);color:var(--accent-hi)}
.ico svg{width:22px;height:22px;stroke-width:1.5}
.i{stroke-width:1.5}
.social a{border:0;border-radius:50%;background:var(--surface-hi);transition:background-color var(--t-fast) var(--ease-out)}
.social a:hover{background:rgb(var(--ov)/.16);border-color:transparent}

/* chấm đầu dòng tròn nhỏ thay ô vuông */
.bul li::before,.checks li::before{width:6px;height:6px;border-radius:50%;background:var(--green)}
.bul--lg li{border-top:1px solid var(--line-soft)}
.bul--lg li:last-child{border-bottom:1px solid var(--line-soft)}
.bul--lg li::before{top:calc(var(--s2) + .62em)}

/* form, chip, bảng */
.field input,.field select,.field textarea{border:1px solid rgb(var(--ov)/.14);border-radius:12px;background:rgb(var(--ov)/.04)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ctl-line)}
.chip{border-color:rgb(var(--ov)/.14)}
.chip[aria-pressed="true"]{background:var(--blue);border:1px solid var(--blue);color:#fff}
.chip--all[aria-pressed="true"]{background:var(--blue)}
.switch{border:1px solid var(--hair);border-radius:var(--r-btn);background:rgba(7,11,22,.55)}
.switch a{border-radius:var(--r-btn)}
.copy-btn,.apply__mail code{border-color:rgb(var(--ov)/.14);border-radius:12px}
.copy-btn{border-radius:var(--r-btn)}
.tbl{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface)}
.tbl th{border-bottom:1px solid var(--hair);background:rgb(var(--ov)/.04);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px}
.org dl>div,.job,.jobs{border-color:var(--line-soft)}
.logo-wall li{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface)}
.tagbar__foot{border-top:1px solid var(--line-soft)}
.jinfo>div{border-left:1px solid var(--line-soft)}
.jinfo-band{border-bottom:0;background:rgb(var(--ov)/.03)}
.mapcard__pin{border:0;border-radius:var(--r-btn);background:rgba(7,11,22,.88)}
.facts{border-top:1px solid var(--line-soft)}
.bubble{border:1px solid var(--hair);border-radius:var(--r-card);background:var(--surface-hi)}
.story__text .bubble{border-radius:var(--r-card);padding:24px 28px}
.hd-footer__extra{border-top:1px solid var(--line-soft)}

/* ===== v4 · sau review độc lập ===== */
/* nền: một nền chính, chênh sắc rất nhỏ giữa các khối, không dải sáng */
body{background:var(--page)}
.sec--ink,.sec--navy{background:var(--page)}
.sec--navy{background:var(--page-2)}
.hd-footer{background:#060a16}
/* lưới ô rất nhạt (≤4%) chỉ ở hero */
.hero::before{display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgb(var(--ov)/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--ov)/.035) 1px,transparent 1px);
  background-size:56px 56px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 70%,transparent 100%)}
/* ô logo khách hàng và đối tác */
.logo-wall li{border:0}
/* mạng xã hội ở footer: viền và icon đủ tương phản */
.social a{border:1px solid rgb(var(--ov)/.5);background:rgb(var(--ov)/.1);color:var(--fg-strong)}
.social a:hover{background:rgb(var(--ov)/.2);border-color:var(--fg-strong)}
.social svg,.hd-footer .social svg{stroke-width:1.75}
/* ô nhập: viền 1px thấy rõ trên navy */
.field input,.field select,.field textarea{border:1px solid var(--ctl-line);background:rgb(var(--ov)/.07)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgb(var(--ov)/.5)}
.field input::placeholder,.field textarea::placeholder{color:var(--placeholder)}
.post:target{border-color:rgba(122,184,255,.55);background:var(--surface-hi)}

/* logo khách hàng & đối tác: màu gốc trên ô sáng ở cả hai chế độ (BR-25) */
.logo-wall li{align-content:center;justify-items:center;gap:8px}
.logo-wall .logo{display:block;height:var(--h,30px);width:auto;max-width:min(100%,var(--w,112px));object-fit:contain}
.logo-wall .logo--tint{--h:40px}
.logo-wall li{background:#fff;border:1px solid rgba(11,18,38,.12)}
.logo-name{font-size:12px;line-height:1.3;color:#3a4660;text-align:center}
.logo[src$="acv.svg"]{--h:28px;--w:120px}
.logo[src$="bidv.svg"]{--h:32px}
.logo[src$="cisco.svg"]{--h:34px}
.logo[src$="ibm.svg"]{--h:30px}
.logo[src$="oracle.svg"]{--h:24px;--w:120px}
.logo[src$="dell.svg"]{--h:20px;--w:150px}
.logo[src$="hpe.svg"]{--h:26px}
.logo[src$="palo-alto.svg"]{--h:28px;--w:130px}
.logo[src$="bosch.svg"]{--h:26px;--w:130px}
.logo[src$="vmware.svg"]{--h:26px}
.logo[src$="citrix.svg"]{--h:30px}
.logo[src$="juniper.svg"]{--h:34px}
.logo[src$="veeam.svg"]{--h:26px}
.logo[src$="veritas.svg"]{--h:22px;--w:120px}
@media (max-width:560px){.logo-wall .logo{max-width:min(100%,var(--w,96px));zoom:.88}.logo-wall .logo--tint{--h:36px}}


/* =====================================================================
   v5 · feedback khách đợt 1 (docs/day-chuyen-feedback/dot-1.md)
   ===================================================================== */

/* FB-01 · nhịp khoảng cách section gọn hơn (96 → 72 / 48; đợt 26/10: thêm −25% → 30 / 24) */
.sec{padding:30px 0}
.sec__in{gap:32px 48px}
.sec__sub{margin-bottom:24px}
.sec__sub--lg{margin-bottom:20px}
.hero{padding:56px 0;min-height:clamp(320px,30vw,400px)}
.hero--inner{min-height:clamp(160px,13vw,200px);padding:48px 0}
.hd-footer{padding:32px 0 16px}
.hd-footer__bar{margin-top:24px}
.grid{gap:24px}
@media (max-width:960px){.sec{padding:24px 0}.sec__in{gap:20px}.hero{padding:48px 0}.hero--inner{padding:40px 0}}

/* FB-02 · chống rơi chữ: tiêu đề cân dòng, đoạn tránh dòng cuối 1 từ */
h1,h2,h3,h4,.sec__title,.stat p,.stat h3,.tick b,.fcard b,.pcard h3,.jcard h3,.post h3,.cta-band p{text-wrap:balance}
p,li,.sec__sub,.hero__sub{text-wrap:pretty}
.sec__title{font-size:clamp(26px,2.4vw,34px)}

/* FB-05 · footer: khối công ty trải hết hàng đầu, tên công ty một dòng */
.hd-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.hd-footer .company{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 32px;align-items:start;padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft)}
.hd-footer .company img{grid-row:1/span 3;margin:0}
.hd-footer .company strong{font-size:15px;letter-spacing:.01em}
.hd-footer .company address{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 32px}
@media (min-width:1101px){.hd-footer .company strong{white-space:nowrap}}
@media (max-width:1100px){.hd-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hd-footer .company strong{text-wrap:balance}}
@media (max-width:640px){.hd-footer .company{grid-template-columns:minmax(0,1fr)}.hd-footer .company img{grid-row:auto;margin-bottom:16px}}
@media (max-width:560px){.hd-footer__grid{grid-template-columns:minmax(0,1fr)}}

/* FB-15 · hệ sinh thái Home: icon cùng hàng, tiêu đề cân 2 dòng */

/* FB-16 · hover logo hiện bản gốc trên nền sáng */
.logo-wall li{transition:border-color var(--t-fast) var(--ease-out)}
.logo-wall li:hover,.logo-wall li:focus-within{border-color:rgba(11,18,38,.4)}

/* FB-82 · «Xem chi tiết» đổi màu nhẹ khi hover */
.pcard__more,.post__more,.jcard__more{transition:color var(--t-fast) var(--ease-out)}
.pcard:hover .pcard__more,.post:hover .post__more,.pcard__more:hover{color:var(--label)}

/* FB-84/104/105/113 · khối giới thiệu: tiêu đề trên, chữ + ảnh cùng căn đỉnh */
.sec--intro .sec__in{grid-template-columns:minmax(0,1fr)}
.sec--intro .sec__rail{position:static}
.sec--intro .sec__rail .label,.sec--intro .sec__rail{display:block}
.sec--intro .sec__title{max-width:28ch}
.sec--intro .split,.sec--intro .story-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.sec--intro .split .photo{aspect-ratio:16/10;height:auto;min-height:0}
@media (max-width:960px){.sec--intro .split,.sec--intro .story-cols{grid-template-columns:minmax(0,1fr);gap:24px}}

/* FB-114 · chữ nội dung chi tiết: cùng cỡ, cùng màu */
.split__text,.prose p{font-size:18px;line-height:1.7;color:var(--text-body)}
.sec__sub,.sec__sub--lg{font-size:var(--fs-body);line-height:1.7;color:var(--text-body)}
.split__text p+p{margin-top:16px}
.lead-in{font-size:clamp(18px,1.7vw,21px)}

/* FB-03/85/89 · danh sách tick (thay cho lưới ô khi có nhiều ý) */
.ticks{display:grid;gap:12px}
.tick{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border-radius:12px;background:var(--surface);transition:background-color var(--t-fast) var(--ease-out)}
.tick:hover{background:var(--surface-hi)}
.tick__mark{display:grid;place-items:center;flex:none;width:28px;height:28px;margin-top:1px;border-radius:50%;background:rgba(0,182,62,.16);color:var(--ok)}
.tick__mark svg{width:16px;height:16px;stroke-width:2}
.tick p{font-size:var(--fs-body);line-height:1.65;color:var(--text-soft)}
.tick b{color:var(--fg-strong);font-weight:700}
.ticks--plain .tick{align-items:center;padding:14px 20px}
.ticks--plain .tick p{color:var(--fg-strong)}
.tick--rich h3{font-size:18px;line-height:1.35;font-weight:700;margin-bottom:8px}
.tick--rich .bul{gap:6px}
.tick--rich .bul li{font-size:15.5px;max-width:none}
.ticks+.callout,.ticks+.conclusion{margin-top:32px}

/* FB-86 · câu kết luận: đóng khung riêng, chữ lớn hơn, cách xa danh sách */
.callout{margin-top:32px;padding:24px 32px;max-width:none;border:1px solid rgba(122,184,255,.3);border-left:4px solid var(--green);border-radius:0 var(--r-card) var(--r-card) 0;background:rgba(122,184,255,.07);color:var(--fg-strong);font-size:clamp(18px,1.7vw,21px);line-height:1.6;font-weight:600}
.sec__body>.callout:first-child{margin-top:0}

/* FB-81 · chuyên mục: hiện tối đa 6 thẻ, phần còn lại ẩn đến khi bấm «Xem thêm» (bố cục p2 giữ nguyên) */
[data-more]>.is-extra{display:none}
.more-bar{display:flex;justify-content:center;margin-top:24px}
.more-bar .btn .i{transform:rotate(90deg);transition:transform var(--t-fast) var(--ease-out)}
.more-bar [aria-expanded="true"] .i{transform:rotate(-90deg)}

/* FB-106 · hàng ngang: tiêu đề trái, nội dung phải */
.grid--rows{grid-template-columns:minmax(0,1fr);gap:16px}
.fcard--row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px 40px;align-items:start;padding:24px 28px}
.fcard--row>.ico{grid-column:1;grid-row:1}
.fcard--row>h3{grid-column:1;grid-row:2}
.fcard--row>p,.fcard--row>.bul{grid-column:2;grid-row:1/span 3}
.fcard--row>.bul{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px}
@media (max-width:960px){.fcard--row{grid-template-columns:minmax(0,1fr)}.fcard--row>p,.fcard--row>.bul{grid-column:1;grid-row:auto}.fcard--row>.bul{grid-template-columns:minmax(0,1fr)}}

/* FB-102 · 5 lớp kiến trúc dạng lưới thẻ */
.layers--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.layers--grid .layer{grid-template-columns:minmax(0,1fr);height:100%}
.layers--grid .layer__head{border-right:0;border-bottom:1px solid var(--hair);padding:20px 24px}
.layers--grid .layer__body{padding:20px 24px}
.layers--grid .layer__body ul{display:grid;gap:8px}
.layers--grid .layer__body li{padding:0 0 0 18px;border:0;background:none;position:relative}
.layers--grid .layer__body li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (max-width:1100px){.layers--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.layers--grid{grid-template-columns:minmax(0,1fr)}}

/* FB-112 · số điện thoại trong bảng không rớt dòng */
.tbl td:last-child,.tbl td:last-child a{white-space:nowrap}
@media (max-width:720px){.tbl td:last-child{padding-top:0}}

/* FB-88 · mô tả ngắn ở thẻ liên quan */
#lien-quan .pcard p{font-size:14.5px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* FB-18/41/42/43/44 · tin tức: bài nổi bật + lưới 3, cắt dòng */
.news--feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.news--feat>.post--feature{grid-column:1/-1;flex-direction:row;align-items:stretch}
.post--feature .photo{flex:none;width:40%;aspect-ratio:auto;min-height:240px;border-radius:0;border:0;border-right:1px solid var(--hair)}
.post--feature .photo img{height:100%}
.post--feature .post__body{width:60%;justify-content:center;padding:28px 36px}
.post--feature h3{font-size:clamp(20px,2vw,26px)}
.post h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post__more{margin-top:auto;padding-top:14px}
@media (max-width:1100px){.news--feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.news--feat{grid-template-columns:minmax(0,1fr)}.news--feat>.post--feature{flex-direction:column}.post--feature .photo{width:100%;min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--hair)}.post--feature .post__body{width:100%;padding:20px}}

/* FB-45 · trang bài viết chi tiết (mẫu) */
.article{max-width:760px;margin-inline:auto}
.article__meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted);font-size:14.5px}
.article h1{font-size:clamp(28px,3.4vw,42px);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:12px 0 24px;text-wrap:balance}
.article__lead{font-size:19px;line-height:1.7;color:var(--text-body);margin-bottom:32px}
.article .photo{margin-bottom:32px}
.article__body p{font-size:17px;line-height:1.8;color:var(--text-soft)}
.article__body p+p{margin-top:20px}
.article__body h2{font-size:22px;font-weight:700;margin:40px 0 12px}
.article__share{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:14.5px}

/* =====================================================================
   v6 · feedback khách đợt 2 (docs/day-chuyen-feedback/dot-2.md)
   ===================================================================== */
/* chung: các ô trong cùng một hàng lưới cao bằng nhau (FB-50, FB-71) */
.grid>div>.tab{height:100%}

/* FB-24 · đường ngăn giữa hai khối cùng nền */
.sec.sec--divided{border-top:1px solid rgb(var(--ov)/.14)!important}


/* FB-21 · lịch sử: 4 mốc cố định, thêm mốc thì cuộn ngang */
.tl-scroll{position:relative;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:rgb(var(--ov)/.25) transparent}
.tl-scroll:focus-visible{outline:2px solid var(--fg-strong);outline-offset:4px;border-radius:8px}
.timeline.timeline--h{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 84px)/4);gap:28px;row-gap:0}
@media (max-width:1100px){.timeline.timeline--h{grid-auto-columns:minmax(260px,45%)}}
@media (max-width:640px){.timeline.timeline--h{grid-auto-columns:minmax(240px,82%)}}
.timeline.timeline--h li{padding:36px 0 0;scroll-snap-align:start}
.timeline.timeline--h li::before{top:0}
.timeline.timeline--h li:nth-child(n)::after{display:block;top:4px;left:18px;right:-28px;bottom:auto;width:auto;height:1px;background:rgb(var(--ov)/.16)}
.timeline.timeline--h li:last-child:nth-child(n)::after{display:none}
.tl-nav{display:flex;gap:8px;justify-content:flex-end;margin-bottom:16px}
.tl-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ctl-line);border-radius:50%;background:rgb(var(--ov)/.04);color:var(--fg-strong);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.tl-btn:hover{background:rgb(var(--ov)/.12);border-color:rgb(var(--ov)/.4)}
.tl-btn[disabled]{opacity:.35;cursor:not-allowed}
.tl-btn .i{width:18px;height:18px}
.tl-btn--prev .i{transform:rotate(180deg)}
/* Lịch sử dạng slide (data-tls, main.js): chỉ bật khi nội dung tràn ngang (>4 mốc ở máy tính, hoặc màn nhỏ). Không JS thì vẫn là hộp overflow-x:auto ở trên */
.tl-scroll[data-tls]{margin:-6px -6px 0;padding:6px 6px 12px;scroll-padding-left:6px}
.tl-scroll[data-tls].is-slide{scroll-snap-type:x mandatory}
.tls__dot{display:none;position:absolute;z-index:1;top:0;left:0;width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgb(var(--ov)/.55);cursor:pointer;transition:background-color var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.tls__dot::after{content:"";position:absolute;inset:-9px}
.tls__dot:hover{background:rgb(var(--ov)/.85)}
.tls__dot[aria-current="true"]{background:var(--green);transform:scale(1.25)}
.tls__dot:focus-visible{outline:2px solid var(--fg-strong);outline-offset:4px}
.tl-scroll[data-tls].is-slide .tls__dot{display:block}
.tl-scroll[data-tls].is-slide .timeline li::before{display:none}
@media (prefers-reduced-motion:reduce){.tls__dot{transition:none}}


/* FB-63 · hover «Xem chi tiết» đổi màu */
.job .btn{transition:background-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.job:hover .btn,.job .btn:hover{color:var(--label)}
.jcard:hover .jcard__more{color:var(--label)}

/* FB-58 · ô tìm kiếm trên Tin tuyển dụng */
.tagbar__search input{width:100%;min-height:44px;padding:10px 16px;border:1px solid var(--ctl-line);border-radius:12px;background:rgb(var(--ov)/.07);color:var(--fg-strong)}
.tagbar__search input::placeholder{color:var(--placeholder)}
.tagbar__search input:hover{border-color:rgb(var(--ov)/.5)}
.tagbar__search input:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--fg-strong)}
.tagbar label.tagbar__label{cursor:pointer}
.jobs+.more-bar,.jgrid+.more-bar{margin-top:24px}

/* FB-66 · chi tiết tin: điểm đầu dòng căn giữa theo chiều dọc của dòng */
.jdetail .bul--lg li{display:flex;align-items:center;min-height:64px}
.jdetail .bul--lg li::before{top:50%;margin-top:-3px}

/* FB-71 · liên hệ: các ô cao bằng nhau */
.contact-grid{align-items:stretch}
.contact-grid .org{display:flex;flex-direction:column}
.map-box{display:flex;flex-direction:column;gap:20px}
.map-box .btn{margin-top:0;align-self:flex-start}
.mapcard{flex:1}
.mapcard .photo{height:100%;min-height:260px;aspect-ratio:auto}
.grid:has(>div>.tab:not(.tab--plain)){row-gap:48px}

/* =====================================================================
   v7 · feedback khách bổ sung 26/10 (docs/feedback/ra-soat-2026-10-26.md)
   ===================================================================== */
/* R26 · logo header thu nhỏ khi cuộn */
.hd-logo img{transition:width var(--t-fast) var(--ease-out)}
.hd-header.is-scrolled .hd-logo img{width:82px}
.hd-header.is-scrolled .hd-header__in{min-height:56px}
@media (max-width:960px){.hd-header.is-scrolled .hd-logo img{width:75px}}
@media (prefers-reduced-motion:reduce){.hd-logo img{transition:none}}

/* R8/R27/R32 · khách hàng chia nhóm, đối tác cuộn ngang */
.logo-groups{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s3);margin-top:var(--s3)}
.logo-group__t{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--label)}
.logo-wall--grp{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.logo-group:last-child .logo-wall--grp{grid-template-columns:minmax(0,1fr)}
.logo-wall--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s2);padding-bottom:12px;-webkit-overflow-scrolling:touch}
.logo-wall--scroll li{flex:0 0 calc((100% - 5*var(--s2))/6);min-width:140px;scroll-snap-align:start}
.logo-wall--scroll:focus-visible{outline:2px solid var(--fg-strong);outline-offset:4px;border-radius:6px}
@media (max-width:960px){.logo-groups{grid-template-columns:minmax(0,1fr)}.logo-wall--scroll li{flex-basis:calc((100% - 2*var(--s2))/3)}}
@media (max-width:560px){
  .logo-wall--grp{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-group:last-child .logo-wall--grp{grid-template-columns:minmax(0,1fr)}
  .logo-wall--scroll li{flex-basis:calc((100% - var(--s2))/2)}
}

/* R28 · chân trang một hàng ở 360px */
.hd-footer__bar{flex-wrap:nowrap;align-items:center}
.hd-footer__bar ul{flex:none}

/* R23/R30 · mạng xã hội ở footer */
.hd-footer__extra .social{margin-top:8px}

.readmore{display:none;justify-self:start;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--fg-strong);font:600 15px var(--sans)}
.readmore:hover{border-color:var(--fg-strong)}
.readmore:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}



/* 01!R18/R19/R25/R31 · VI/EN và tìm kiếm trên header (UI mẫu) */
.hd-tools{display:flex;align-items:center;gap:12px;flex:none}
.hd-search-btn{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ctl-line);border-radius:50%;background:rgb(var(--ov)/.04);color:var(--fg-strong);cursor:pointer}
.hd-search-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hd-search-btn:hover,.hd-search-btn[aria-expanded="true"]{border-color:var(--fg-strong);background:rgb(var(--ov)/.1)}
.hd-search-btn:focus-visible,.lang a:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.lang{display:flex;align-items:center;border:1px solid var(--ctl-line);border-radius:999px;padding:3px}
.lang a{display:grid;place-items:center;min-width:38px;min-height:36px;padding:0 8px;border-radius:999px;font-family:var(--sans);font-size:12.5px;color:var(--muted);text-decoration:none;transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.lang a:hover{color:var(--fg-strong)}
.lang a[aria-current="true"]{background:var(--blue);color:#fff}
.hd-search{position:absolute;left:0;right:0;top:100%;background:var(--panel-ink);border-bottom:1px solid var(--line);padding:20px 0 24px;z-index:55}
.hd-search[hidden]{display:none}
.hd-search__form{display:flex;gap:12px}
.hd-search__form input{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--ctl-line);border-radius:12px;background:rgb(var(--ov)/.07);color:var(--fg-strong);font:inherit;font-size:16px}
.hd-search__form input:focus-visible{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--fg-strong)}
.hd-search__form .btn{min-height:48px}
.hd-search__note{margin-top:10px;font-size:13px;color:var(--muted)}
.hd-search__status{margin-top:12px;font-size:14px;color:var(--text-soft)}
.hd-search__status:empty{display:none}
.hd-search__res{display:grid;gap:4px;margin-top:8px;max-height:min(50vh,360px);overflow:auto}
.hd-search__res a{display:block;padding:10px 12px;border-radius:8px;color:var(--fg-strong);text-decoration:none}
.hd-search__res a:hover,.hd-search__res a:focus-visible{background:rgb(var(--ov)/.08);outline:none}
.hd-search__res small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
@media (min-width:1121px) and (max-width:1320px){.hd-header__in{gap:16px}.hd-tools{gap:8px}}
@media (max-width:1120px){.hd-tools{margin-left:auto}.hd-header__in{gap:12px}}
@media (max-width:400px){.hd-search-btn{width:40px;height:40px}.lang a{min-width:32px;padding:0 6px}}

/* 05!R2/R3, 06!R2, 7.3!R2, 8!R2 · bố cục theo p1-blueprint (body.layout-p1) */
.layout-p1 .sec__in{display:block}
.layout-p1 .sec__rail{position:static;max-width:760px;margin-bottom:var(--s3)}
.layout-p1 .hero--split{min-height:0;padding:56px 0;background:radial-gradient(80% 120% at 85% 10%,rgba(0,112,244,.18),transparent 60%),var(--ink)}
.layout-p1 .hero--split .hero__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.layout-p1 .hero--split h1{font-size:clamp(32px,3.8vw,52px)}
.hero__card{position:relative}
.hero__card .photo{box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hero__tag{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:rgba(7,11,22,.88);font-size:13.5px;font-weight:600;color:#fff}
.hero__tag svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--label);stroke-width:1.8}
.ov{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.ov__text .sec__title{margin-bottom:var(--s3)}
.ov__text .btn{margin-top:var(--s3)}
.addr-card{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:14px;background:var(--panel);border:1px solid rgb(var(--ov)/.08)}
.addr-card h3{font-size:18px;font-weight:700;line-height:1.35}
.addr-card p{font-size:15px;color:var(--text-soft)}
.addr-card__tel{display:flex;align-items:center;gap:8px;margin-top:auto}
.addr-card__tel .i{width:16px;height:16px;color:var(--label)}
.addr-cards{gap:var(--s3)}
.cform{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.cform__intro .sec__sub{margin:var(--s2) 0 var(--s3)}
.cform__card{padding:32px;border-radius:16px;background:var(--panel);border:1px solid rgb(var(--ov)/.08)}
.cform__card .form{max-width:none}
@media (max-width:960px){
  .layout-p1 .hero--split .hero__in,.ov,.cform{grid-template-columns:minmax(0,1fr);gap:32px}
  .grid--4.addr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grid--4.addr-cards{grid-template-columns:minmax(0,1fr)}
  .cform__card{padding:20px}
  .hero__tag{left:10px;bottom:10px;font-size:12.5px}
}

/* 02!R3 · câu chuyện thương hiệu theo p1-blueprint (body: chữ liền + cột phải sticky) */
.story-p1{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.story-p1__text{max-width:64ch}
.story-p1__text .label{display:block;margin-bottom:14px}
.story-p1__text .sec__title{margin-bottom:var(--s3);text-wrap:balance}
.story-p1__text p{margin:0 0 14px;font-size:17px;line-height:1.68;color:var(--text-body)}
.story-p1__aside{position:sticky;top:calc(var(--header-h) + 24px);display:grid;gap:var(--s2)}
.deco-frame{position:relative}
.deco-frame::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:12px;background:rgba(0,112,244,.14);z-index:0}
.deco-frame>.photo{position:relative;z-index:1}
.story-quote{margin:0;padding:20px 24px;border-left:4px solid var(--green);border-radius:0 10px 10px 0;background:rgba(0,182,62,.08);font-size:clamp(18px,1.7vw,21px);font-weight:700;line-height:1.5;color:var(--fg-strong)}
.story-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.story-stats li{padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.story-stats strong{display:block;font-family:var(--sans);font-size:clamp(24px,2.6vw,32px);font-weight:500;line-height:1.1}
.story-stats span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.readmore{margin:0 0 18px}
@media (max-width:960px){
  .story-p1{grid-template-columns:minmax(0,1fr);gap:40px}
  .story-p1__aside{position:static}
  .story-p1[data-readmore] .readmore{display:inline-flex;align-items:center}
  .story-p1[data-readmore]:not(.is-open) .story-p1__more{display:none}
}
@media (max-width:560px){.deco-frame::before{inset:10px -10px -10px 10px}.story-stats strong{font-size:22px}}

/* 01!R32 · Bộ Công An một hàng riêng, ACV + BIDV hàng dưới (mọi cỡ màn hình) */
.logo-groups{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.logo-wall--grp,.logo-group:last-child .logo-wall--grp{grid-template-columns:repeat(3,minmax(0,1fr))}
.logo-wall--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:561px){.logo-wall--solo{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.logo-wall--grp,.logo-group:last-child .logo-wall--grp{grid-template-columns:repeat(2,minmax(0,1fr))}.logo-wall--solo{grid-template-columns:minmax(0,1fr)}}

/* 02!R5 · Giải thưởng theo p1 hd-awards: 4 thẻ ngang, mỗi giải một thẻ */
.award-head{margin-bottom:var(--s3)}
.award-cards{display:flex;gap:var(--s3);align-items:stretch;padding:0 0 12px;scroll-snap-type:x mandatory}
.award-card{flex:0 0 calc((100% - 3*var(--s3))/4);scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;min-width:0;padding:28px var(--s3);border:1px solid var(--line);border-radius:14px;background:var(--panel);transition:border-color var(--t-fast) var(--ease-out),transform var(--t-base) var(--ease-out)}
.award-card:hover{border-color:rgb(var(--ov)/.4);transform:translateY(-3px)}
.award-card__ico{display:grid;place-items:center;width:52px;height:52px;margin-bottom:var(--s1);border-radius:50%;background:rgba(0,112,244,.16);color:var(--accent)}
.award-card__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.award-card__year{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--accent)}
.award-card h3{font-size:19px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.award-card>p{margin:0;font-size:15px;color:var(--muted)}
@media (max-width:1200px){.award-card{flex-basis:calc((100% - 2*var(--s3))/3)}}
@media (max-width:900px){.award-card{flex-basis:calc((100% - var(--s3))/2)}}
@media (max-width:600px){.award-card{flex-basis:100%}}

/* footer: icon mạng xã hội căn giữa (rule chung .hd-footer li a có độ ưu tiên cao hơn .social a) */
.hd-footer .social a{display:grid;place-items:center;margin:0;padding:0;line-height:0}

/* câu chuyện: câu chốt in đậm */
.story-quote{font-weight:700}
.story-p1__text strong{font-weight:700;color:var(--fg-strong)}

/* 02 · Về chúng tôi trên mobile (≤600px): gọn trang, desktop không đổi */
.more-link{display:inline-flex;align-items:center;min-height:36px;margin-top:6px;padding:0;border:0;background:none;color:var(--accent);font:600 14px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.more-link:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px;border-radius:4px}
.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp,3);overflow:hidden}
@media (max-width:600px){
  .story-p1{gap:24px}
  .story-p1__aside .photo{aspect-ratio:2/1}
  .page-about .hero--inner{min-height:0;padding:40px 0}
  .story-p1:not(.is-open) .story-quote,.story-p1:not(.is-open) .story-stats{display:none}
  .story-p1__aside{gap:var(--s2)}
  .story-p1__text .sec__title{font-size:26px}
  .timeline.timeline--h li p{font-size:14.5px}
  .award-cards{gap:12px;-webkit-overflow-scrolling:touch}
  .award-card{padding:var(--s3)}
  #so-lieu .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #so-lieu .stat{padding:12px 0;border-left:0;border-top:0!important}
  #so-lieu .stat__num{font-size:30px;padding-bottom:2px}
  #so-lieu .stat h3{font-size:16px;margin-top:6px}
  #so-lieu .stat p{font-size:13px;line-height:1.5}
  #tam-nhin-su-menh .tab{margin-top:20px}
  #tam-nhin-su-menh .tab__body{padding:16px}
  #tam-nhin-su-menh .tab__body h4{font-size:var(--fs-body);margin-bottom:8px}
  #tam-nhin-su-menh .tab__body p{font-size:14.5px;line-height:1.55}
  #tam-nhin-su-menh .values{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-top:12px;padding-bottom:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  #tam-nhin-su-menh .value{flex:0 0 82%;scroll-snap-align:start}
  #tam-nhin-su-menh .value{padding:12px 14px}
  #tam-nhin-su-menh .value h5{margin-bottom:6px}
  #tam-nhin-su-menh .value p{font-size:var(--fs-body);font-weight:400;color:var(--text-soft)}
  #khach-hang-doi-tac .partners h3{font-size:18px}
  #khach-hang-doi-tac .partners p{font-size:15px;line-height:1.55}
  #khach-hang-doi-tac .logo-wall li{min-height:72px}
  .story-p1__text p{font-size:16px;line-height:1.65;margin-bottom:14px}
  #cau-chuyen,#lich-su,#giai-thuong,#so-lieu,#tam-nhin-su-menh,#khach-hang-doi-tac{padding-top:48px;padding-bottom:48px}
}

/* about mobile: footer gập các nhóm liên kết (chỉ trang Về chúng tôi) */
.foot-toggle{display:none}
@media (max-width:600px){
  .page-about .hd-footer nav[aria-label]{position:relative;border-top:1px solid var(--line-soft)}
  .page-about .hd-footer nav[aria-label] h2{margin:0;padding:14px 48px 14px 0}
  .page-about .hd-footer .foot-toggle{display:grid;place-items:center;position:absolute;right:0;top:4px;width:44px;height:44px;border:0;background:none;color:var(--fg-strong);cursor:pointer}
  .page-about .hd-footer .foot-toggle svg{width:12px;height:12px;transition:transform var(--t-fast) var(--ease-out)}
  .page-about .hd-footer .foot-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  .page-about .hd-footer .foot-toggle:focus-visible{outline:2px solid var(--fg-strong);outline-offset:-2px;border-radius:8px}
  .page-about .hd-footer nav[aria-label].is-folded ul{display:none}
  .page-about .hd-footer__grid{gap:var(--s3)}
}

/* Giải thưởng: nút Chi tiết + popup */
html:has(dialog[open]){overflow:hidden}
.award__btn{align-self:flex-start;margin-top:auto;min-height:40px;padding:0 18px;border:1px solid var(--ctl-line);border-radius:999px;background:rgb(var(--ov)/.04);color:var(--fg-strong);font:600 14px var(--sans);cursor:pointer}
.award__btn:hover{background:rgb(var(--ov)/.12);border-color:var(--fg-strong)}
.award__btn:focus-visible,.award-dialog__x:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.award-card>p{margin-bottom:12px}
.award-dialog{width:min(760px,calc(100% - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel-ink);color:var(--fg-strong);overflow:hidden}
.award-dialog::backdrop{background:rgba(3,6,14,.78)}
.award-dialog[open]{display:flex}
.award-dialog__in{position:relative;flex:1;min-width:0;max-height:calc(100vh - 48px);overflow-y:auto;padding:32px}
.award-dialog__x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ctl-line);border-radius:50%;background:rgb(var(--ov)/.06);color:var(--fg-strong);font-size:26px;line-height:1;cursor:pointer}
.award-dialog__x:hover{background:rgb(var(--ov)/.14);border-color:var(--fg-strong)}
.award-detail__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 52px 10px 0;font-family:var(--sans);font-size:13px;color:var(--accent)}
.award-detail__meta span:first-child{font-size:15px}
.award-dialog h3{font-size:clamp(22px,3vw,28px);line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0 52px 16px 0;text-wrap:balance}
.award-detail__text{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--text-body)}
.award-detail__imgs{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.award-detail__imgs--1{grid-template-columns:minmax(0,1fr)}
.award-detail__imgs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.award-detail__imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;filter:saturate(.9)}
.award-detail__imgs--1 img{aspect-ratio:16/9}
@media (max-width:600px){
  .award-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0}
  .award-dialog__in{max-height:none;padding:64px 20px 24px}
  .award-detail__imgs,.award-detail__imgs--2{grid-template-columns:minmax(0,1fr)}
  .award-detail__imgs img,.award-detail__imgs--1 img{aspect-ratio:16/10}
}

/* 05!R2/R3 · Liên hệ theo p1: thẻ tab «Trụ sở», icon tròn, ảnh deco-frame + chip, thẻ bảo hành, form trong thẻ tab */
.tabf{position:relative;display:flex;flex-direction:column;min-width:0}
.tabf__tab{align-self:flex-start;position:relative;z-index:1;margin-bottom:-1px;padding:9px 20px 10px;border-radius:12px 12px 0 0;background:rgba(0,112,244,.2);font-size:13px;font-weight:600;color:var(--accent-hi)}
.tabf__body{flex:1;padding:var(--s3);border:1px solid var(--line);border-radius:0 14px 14px 14px;background:var(--panel)}
.c-info{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:start}
.c-info h2{font-size:clamp(19px,1.9vw,22px);font-weight:800;line-height:1.3;margin-bottom:4px}
.c-en{margin:0 0 var(--s3);color:var(--muted)}
.c-list{margin:0;display:grid;gap:var(--s2)}
.c-list>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2);align-items:start}
.c-list dt{font-size:13px;font-weight:600;color:var(--muted)}
.c-list dd{margin:2px 0 0;font-size:16px;overflow-wrap:anywhere}
.c-list a{text-underline-offset:3px}
.c-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:rgba(0,112,244,.16);color:var(--accent)}
.bh-card .c-ico{width:48px;height:48px}
.c-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c-map .photo{position:relative}
.c-chip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--green);color:#04170b;font-size:15px;font-weight:700;white-space:nowrap}
.c-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.c-map__btn{margin:var(--s3) 0 0}
.c-map__btn .btn{border-radius:999px}
.bh-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.bh-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--s3);border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.bh-card .c-ico{margin-bottom:var(--s1)}
.bh-card h3{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:4px}
.bh-card p{margin:0;font-size:15px;color:var(--text-soft)}
.bh-card strong{color:var(--fg-strong)}
.bh-card a{text-underline-offset:3px}
.cform .tabf__body{padding:32px}
@media (max-width:960px){.c-info{grid-template-columns:minmax(0,1fr);gap:40px}.bh-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.c-chip{font-size:13.5px;padding:8px 14px}.cform .tabf__body{padding:20px}}

/* =====================================================================
   phiếu #11 · giao diện sáng/tối (BR-26) và chỉnh G1–G7
   Có nút Dark/Light trên thanh menu (.theme-toggle, main.js). Mặc định luôn Dark, KHÔNG theo prefers-color-scheme.
   Lựa chọn lưu ở localStorage khoá «hitd-theme»; script nhỏ trong <head> đặt data-theme trên <html> trước khi vẽ, nên không nháy màu.
   Bộ biến sáng chỉ áp khi <html data-theme="light">.
   ===================================================================== */
/* vùng luôn tối ở cả hai chế độ: hero ảnh nền, footer (Q-12), thanh chọn phương án.
   Khai báo lại bộ biến tối ngay trên vùng, nên bộ biến sáng ở :root không chạm tới. */
.hero,.hd-footer,.topstrip{
  --ov:255 255 255;--ink:#070b16;--page:#09112a;--page-2:#0b1634;
  --text:#eef2fa;--text-soft:#dbe3f2;--text-body:#e6ecf8;--muted:#aebbd4;--label:#74b3ff;
  --accent:#7ab8ff;--accent-hi:#9ccaff;--ok:#5fe38a;--danger:#ff9b9b;--num:#7ab8ff;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.06);--hair:rgba(255,255,255,.08);
  --surface:rgba(255,255,255,.045);--surface-hi:rgba(255,255,255,.075);
  --panel-ink:#0d1426;--panel-navy:#14295f;--panel:#0d1426;
  --mega-bg:#0b1226;--hover-bg:rgba(255,255,255,.06);--fg-strong:#fff;
  --ctl-line:rgba(255,255,255,.4);--placeholder:#97a6c6;--header-bg:rgba(7,11,22,.92);
  color:var(--text);
}

/* logo header hai bản (LOGO_HTML): tối dùng bản sáng, sáng dùng bản tối */
.hd-logo .logo--on-light{display:none}

/* số liệu thẳng cột */
.stat__num,.facts b,.step__no,.story-stats strong,.award-card__year,.award-detail__meta,.post__meta time,.timeline .mono,.jinfo dd,.tagbar__count span,.stat .mono,.hd-footer .copy{font-variant-numeric:tabular-nums}

:root{color-scheme:dark}
:root[data-theme=light]{
  color-scheme:light;
  --ov:11 18 38;
  --ink:#fff;--page:#f4f7fc;--page-2:#e8eef8;
  --text:#0e1a35;--text-soft:#26334f;--text-body:#18233f;--muted:#4a5878;--label:#0057c2;
  --accent:#0057c2;--accent-hi:#0057c2;--ok:#0b7a32;--danger:#b3261e;
  --line:rgba(11,18,38,.16);--line-soft:rgba(11,18,38,.09);--hair:rgba(11,18,38,.12);
  --surface:#fff;--surface-hi:#e9eff8;
  --panel-ink:#fff;--panel-navy:#dfe8f5;
  --mega-bg:#fff;--hover-bg:rgba(11,18,38,.06);--fg-strong:#0b1226;
  --ctl-line:rgba(11,18,38,.5);--placeholder:#5b6985;--header-bg:rgba(255,255,255,.94);
  /* giữ nguyên ở cả hai chế độ */
  --blue:#0070f4;--green:#00b63e;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--header-h:72px;
  --gradient-x:linear-gradient(90deg,var(--grad-start) 0%,var(--grad-mid) 58%,var(--grad-end) 100%);
}
[data-theme=light] .hd-logo .logo--on-dark{display:none}
[data-theme=light] .hd-logo .logo--on-light{display:block}
[data-theme=light] .hd-header{border-bottom:1px solid var(--hair)}
[data-theme=light] .callout{border-color:rgba(0,112,244,.35);background:rgba(0,112,244,.06)}
[data-theme=light] .tick,[data-theme=light] .value{border:1px solid var(--hair)}
[data-theme=light] .tabf__tab{background:rgba(0,112,244,.1)}

/* BR-27 · co giãn 320–1920 px, vùng chạm ≥ 44 px trên màn nhỏ và cảm ứng */
.tbl{display:block;max-width:100%;overflow-x:auto}
@media (max-width:960px),(pointer:coarse){
  .hd-logo{display:flex;align-items:center;min-height:44px}
  .hd-search-btn{width:44px;height:44px}
  .lang{padding:0}
  .lang a{min-width:44px;min-height:44px}
  .btn--sm,.copy-btn,.award__btn,.more-link,.readmore,.tl-btn,a.chip,button.chip,.switch a,.topstrip a{min-height:44px}
  .tl-btn{width:44px}
  .award__btn,.more-link,.topstrip a,.link-arrow{display:inline-flex;align-items:center}
  .link-arrow{min-height:44px}
  .hd-footer li a{display:flex;align-items:center;min-height:44px}
  .hd-footer__bar a,.hd-footer address a,.hd-footer .company a{display:inline-flex;align-items:center;min-height:44px}
  .hd-footer__extra .social a{width:44px;height:44px}
}
@media (max-width:400px){
  .wrap{width:min(1240px,100% - 32px)}
  .hd-header__in{gap:8px}
  .hd-tools{gap:6px}
  .hd-logo img,.hd-header.is-scrolled .hd-logo img{width:88px}
  .lang a{padding:0 4px}
}
@media (max-width:340px){.lang a{min-width:44px}}

/* phiếu #13 · vùng chạm ≥ 44px cho link con của thẻ hệ sinh thái */

/* =====================================================================
   Feedback p2 đợt 26/10 · T1 nền chung (docs/day-chuyen/feedback-p2/t1.md)
   Phần riêng từng nhóm trang nằm ở css/<nhom>.css (nạp sau file này).
   ===================================================================== */

/* FB-63, FB-82 · «Xem chi tiết» đổi màu nhẹ khi rê chuột (thẻ giải pháp, tin, job) */
.pcard__more,.post__more,.jcard__more{transition:color var(--t-fast) var(--ease-out)}
.pcard:hover .pcard__more,.post:hover .post__more,.jcard:hover .jcard__more,
.pcard__more:hover,.post__more:hover,.jcard__more:hover{color:var(--label)}

/* Nút Dark/Light cạnh nút ngôn ngữ (.hd-tools). Ở Dark hiện mặt trời (bấm để sáng), ở Light hiện mặt trăng.
   aria-pressed="true" = đang ở giao diện sáng. main.js lo trạng thái và localStorage. */
.theme-toggle{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--ctl-line);border-radius:50%;background:rgb(var(--ov)/.04);color:var(--fg-strong);cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{border-color:var(--fg-strong);background:rgb(var(--ov)/.1)}
.theme-toggle:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}
.theme-toggle__moon{display:none}
[data-theme=light] .theme-toggle__sun{display:none}
[data-theme=light] .theme-toggle__moon{display:block}
@media (max-width:400px){.theme-toggle{width:40px;height:40px}}

/* FB-03, FB-85, FB-89, FB-86 · .list-tick: danh sách có dấu tick cho khối có HƠN 6 mục (từ 6 mục trở xuống giữ dạng thẻ như cũ).
   Cách dùng:
     <ul class="list-tick">
       <li><b>Nhãn đậm</b> Mô tả một hai câu, chữ thường.</li>
       <li><b>Nhãn khác</b> Mô tả.</li>
     </ul>
     <p class="list-tick__conclusion">Câu kết luận của khối.</p>          ← tuỳ chọn, đặt ngay sau danh sách
   Nhãn là <b> hoặc <strong> con trực tiếp của <li> (hoặc class .list-tick__label), tự xuống dòng riêng.
   Mục không có mô tả thì chỉ để nhãn (hoặc chỉ chữ thường). Dấu tick vẽ bằng CSS, không cần icon sprite.
   .list-tick__conclusion: khung kết luận chữ to hơn, vạch xanh bên trái; dùng được trên <p> hoặc <div>. */
.list-tick{list-style:none;margin:0;padding:0;display:grid;gap:0}
.list-tick>li{position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--line-soft);font-size:var(--fs-body);line-height:1.65;color:var(--text-soft)}
.list-tick>li:first-child{border-top:0}
.list-tick>li::before{content:"";position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;background:rgba(0,182,62,.16)}
.list-tick>li::after{content:"";position:absolute;left:10px;top:20px;width:8px;height:13px;border:solid var(--ok);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.8);transform-origin:center}
.list-tick>li>b,.list-tick>li>strong,.list-tick__label{display:block;margin-bottom:2px;font-weight:700;font-size:17px;line-height:1.45;color:var(--fg-strong);text-wrap:balance}
.list-tick>li>b:only-child,.list-tick>li>strong:only-child{margin-bottom:0}
.list-tick__conclusion{display:block;margin-top:32px;padding:24px 32px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 var(--r-card,10px) var(--r-card,10px) 0;background:var(--surface);color:var(--fg-strong);font-size:clamp(19px,1.8vw,24px);line-height:1.5;font-weight:600;text-wrap:balance}
.list-tick+.list-tick__conclusion{margin-top:32px}
@media (max-width:560px){.list-tick>li{padding-left:40px}.list-tick__conclusion{padding:18px 20px}}

@media (max-width:380px){.lang a{min-width:40px}}
/* thanh menu ở 320px: thêm nút Dark/Light nên thu nhỏ logo, nút và cặp VI/EN để không tràn ngang (vùng chạm vẫn ≥ 36px) */
@media (max-width:340px){
  .hd-header__in{gap:6px}
  .hd-tools{gap:4px}
  .hd-logo img,.hd-header.is-scrolled .hd-logo img{width:72px}
  .hd-search-btn,.theme-toggle{width:38px;height:38px}
  .lang a{min-width:36px;min-height:38px}
}

/* ---------- khối số liệu: không viền (Home · 3, Về chúng tôi · 5) ---------- */
.stats,.stat{border:0;border-radius:0}

/* ---------- logo đối tác (Home · 7, 8, 9; Về chúng tôi · 8) ----------
   Nhóm «Cơ quan nhà nước» và «Doanh nghiệp» đều là dải cuộn ngang (.logo-wall--scroll) và dùng một cỡ logo chung:
   cao 44px, rộng tối đa 150px, bỏ cỡ riêng từng ảnh (--h/--w inline) để quốc huy và logo ngang cùng tầm mắt. */
.logo-wall--scroll .logo{height:44px;max-width:min(100%,150px)}
/* Dải logo (.logo-wall--scroll): cuộn ngang thường, không còn nút ‹ › và không tự trượt (phiếu #23, BR-08; slider #1246/#1247 đã gỡ).
   Dải nằm gọn trong lề nội dung và mỗi thẻ rộng đúng 1/6 (1/3, 1/2) khung, nên lúc dừng không thẻ nào bị cắt.
   Mặc định ẩn thanh cuộn; rê chuột hoặc focus vào dải thì hiện (thin, thumb theo --ctl-line).
   Chrome/Safari/Edge: ::-webkit-scrollbar cao 0 → 8px, bớt 8px padding-bottom khi hiện để dải không đổi chiều cao.
   Firefox: thanh cuộn thin luôn chiếm chỗ, chỉ đổi màu trong suốt → ctl-line, nên cũng không xô bố cục. Slider chỉ còn ở .award-cards (about.html) */
.logo-wall--scroll{overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:transparent transparent}
.logo-wall--scroll:hover,.logo-wall--scroll:focus-within{scrollbar-color:var(--ctl-line) transparent}
@supports selector(::-webkit-scrollbar){
  .logo-wall--scroll,.logo-wall--scroll:hover,.logo-wall--scroll:focus-within{scrollbar-width:auto;scrollbar-color:auto}
  .logo-wall--scroll::-webkit-scrollbar{height:0}
  .logo-wall--scroll:hover::-webkit-scrollbar,.logo-wall--scroll:focus-within::-webkit-scrollbar{height:8px}
  .logo-wall--scroll::-webkit-scrollbar-track{background:transparent}
  .logo-wall--scroll::-webkit-scrollbar-thumb{background:var(--ctl-line);border-radius:4px}
  .logo-wall--scroll:hover,.logo-wall--scroll:focus-within{padding-bottom:16px}
}
.award-cards{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
.award-cards::-webkit-scrollbar{display:none}
.logo-wall--scroll li{min-width:0}
.logo-wall--scroll img{-webkit-user-drag:none;user-select:none}
.award-cards.is-drag{user-select:none}
.award-head.logo-head{margin-bottom:var(--s3)}
.award-cards.is-drag{cursor:grabbing;scroll-snap-type:none}
.logo-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.logo-nav{display:flex;gap:8px;flex:none}
.logo-nav[hidden]{display:none}
.logo-nav__btn{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg-strong);cursor:pointer;transition:border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.logo-nav__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.logo-nav__btn:hover{border-color:var(--accent);color:var(--accent)}
.logo-nav__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* tên logo hiện tức thì (main.js đặt vị trí; data-name ở <li>) */
.logo-tip{position:fixed;z-index:200;max-width:min(320px,calc(100vw - 16px));padding:6px 10px;border-radius:6px;background:var(--fg-strong);color:var(--page);font:500 13px/1.35 var(--sans);text-align:center;pointer-events:none;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.logo-tip[hidden]{display:none}

/* ===== CMS-KEEP hitd-eco (phiếu #27) =====
   P/ đã bỏ khối «hệ sinh thái» khỏi Trang chủ, nhưng shortcode [hitd-eco] vẫn còn cho trang đã có dữ liệu cũ (BR-11).
   Phần dưới là CSS của .eco* lấy từ bản style.css trước phiếu; không có trong P/. Ba luật cuối gộp từ các danh sách chọn chung cũ. */
/* hệ sinh thái (Home): hover/focus hoặc chạm để mở danh sách con */
.eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 24px}
@media (max-width:1100px){.eco{grid-template-columns:minmax(0,1fr)}}
.eco .tab__body{padding:0;overflow:hidden}
.eco__media{border-bottom:1px solid var(--line);aspect-ratio:3/2;overflow:hidden}
.eco__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.eco__item:hover .eco__media img,.eco__item:focus-within .eco__media img,.eco__item.is-open .eco__media img{transform:scale(1.04)}
.eco__text{padding:24px 24px 8px}
.eco__text h3 a{text-decoration:none}
.eco__text h3 a::after{content:"";position:absolute;inset:0}
.eco__toggle{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 48px);margin:8px 24px 0;min-height:44px;padding:0;background:none;border:0;border-top:1px solid var(--line);color:var(--label);cursor:pointer;font-family:var(--sans);font-size:11.5px;font-weight:500}
/* dấu +/–: hai vạch vẽ bằng gradient; mở thì vạch dọc co lại và cả dấu xoay, nên đổi mượt thay vì đổi chữ */
.eco__toggle::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform var(--t-base) var(--ease-out),background-size var(--t-base) var(--ease-out)}
.eco__item.is-open .eco__toggle::after,.eco__item:hover .eco__toggle::after{transform:rotate(180deg);background-size:100% 2px,2px 0}
@media (hover:none){.eco__item:hover .eco__toggle::after{transform:none;background-size:100% 2px,2px 100%}.eco__item.is-open .eco__toggle::after{transform:rotate(180deg);background-size:100% 2px,2px 0}}
.eco__list{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base) var(--ease-out);position:relative;z-index:2}
/* khoảng đệm cuối nằm trong li cuối (không ở ul) để hàng grid co về 0 được, không nhảy 20px ở cuối chuyển động */
.eco__list>ul{min-height:0;overflow:hidden;padding:0 24px}
.eco__list li:last-child{padding-bottom:20px}
.eco__list li{opacity:0;transform:translateY(6px);transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.eco__list li:nth-child(2){--i:1}.eco__list li:nth-child(3){--i:2}.eco__list li:nth-child(4){--i:3}.eco__list li:nth-child(5){--i:4}.eco__list li:nth-child(n+6){--i:5}
.eco__list li a{display:block;padding:9px 0;color:var(--muted);font-size:14.5px;line-height:1.4;text-decoration:none;border-top:1px solid var(--line-soft);transition:color var(--t-fast) var(--ease-out),padding-left var(--t-fast) var(--ease-out)}
.eco__list li a:hover,.eco__list li a:focus-visible{color:var(--fg-strong);padding-left:4px}
.eco__item:hover .eco__list,.eco__item.is-open .eco__list{grid-template-rows:1fr}
.eco__item:hover .eco__list li,.eco__item.is-open .eco__list li{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0)*30ms)}
@media (hover:none){
  .eco__item:hover .eco__list{grid-template-rows:0fr}
  .eco__item:hover .eco__list li{opacity:0;transform:translateY(6px);transition-delay:0s}
  .eco__item.is-open .eco__list{grid-template-rows:1fr}
  .eco__item.is-open .eco__list li{opacity:1;transform:none;transition-delay:calc(60ms + var(--i,0)*30ms)}
}
.eco__media{border-bottom:1px solid var(--line);aspect-ratio:3/2;position:relative}
.eco__media.photo{border-radius:0;border-width:0 0 1px}
.eco__text{padding:var(--s3) var(--s3) 8px;display:flex;gap:var(--s2);align-items:center}
.eco__text h3{font-size:19px;line-height:1.3;font-weight:700}
.eco>.tab{height:100%}
.eco .tab__body{height:100%;display:flex;flex-direction:column}
.eco__toggle{margin-top:auto}
.eco__toggle:focus-visible,.eco__list a:focus-visible{outline:2px solid var(--fg-strong);outline-offset:2px}
.eco .tab__body{overflow:hidden}
.eco__toggle{border-top:1px solid var(--line-soft)}
.eco__text .ico{flex:none}
.eco__text{align-items:flex-start}
.eco__text h3{min-height:2.6em;display:flex;align-items:center;text-wrap:balance}
.eco__text .ico{margin-top:0}
@media (max-width:720px){.eco__list li a{display:flex;align-items:center;min-height:44px;padding:4px 0}}
.eco__media.photo{border-radius:0;border:0}
.eco__media{border-bottom:0}
.eco__toggle{font-family:var(--sans);text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;text-wrap:balance}