/* =========================================================
   TEQTO — site.css
   Viet moi hoan toan. Khong dung Bootstrap, khong Font Awesome,
   khong font nhung. Mot tep duy nhat.
   ========================================================= */

/* ---------- 1. Bien ---------- */
:root{
  /* mau */
  --blue:#0064a8;
  --blue-dark:#004c80;
  --blue-soft:#eaf3fa;
  --amber:#f5b301;
  --ink:#16202b;
  --body:#3a4854;
  --muted:#5d6b78;
  --line:#e2e8ee;
  --bg:#f6f8fa;
  --white:#fff;
  --dark:#1e2a37;        /* khoi toi (nang luc cong nghe) — nhat hon --ink */
  --footer:#003865;      /* chan trang — cung tong navy */
  --navy:#003865;                /* xanh navy — tong cua diepthaithanh.com */
  --hdr:rgba(0,56,101,.70);      /* thanh menu tren anh banner */
  --hdr-solid:rgba(0,56,101,.94);/* thanh menu khi da cuon qua anh */
  --hdr-txt:#ffffff;             /* chu tren thanh menu */
  --hdr-line:rgba(255,255,255,.16);/* duong ke duoi thanh menu */

  /* Inter — tu host trong fonts/inter, khai bao o css/inter.css.
     Muon quay lai font he thong: bo 'Inter' o dau danh sach. */
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* do rong */
  --wrap:1180px;
  /* Chu gian het khung cha (--wrap = 1180px).
     Do la KHONG con tran rieng cho cot chu: khung cha 1180px da giu so ky tu
     moi dong o muc 79 — nam trong khoang doc thoai mai 45-90. Them mot tran nua
     chi lam thua khoang trang ben phai ma khong cai thien gi. */
  --measure:none;
  --gap:28px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:18px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.25;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}

/* Ngat dong:
   - balance CHI cho tieu de ngan (chia deu 2-3 dong cho can doi).
   - Doan van KHONG dung pretty: tren Chrome no doi khi rut ngan CA CAC DONG
     chu khong chi dong cuoi, khien hai doan canh nhau lech mep phai. */
h1,h2,h3,h4{text-wrap:balance}

/* ---------- 3. Bo cuc ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.grid{display:grid;gap:var(--gap)}
.grid>*,.tech>*,.shots>*,.page__grid>*,.ftr__grid>*,.eco__it>*{min-width:0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.section{padding:78px 0}
.section--soft{background:var(--bg)}
.section--dark{background:var(--dark);color:#d7e0e8}

.head{margin:0 0 44px}
.head h2{font-size:36px;letter-spacing:-.022em;margin:0 0 14px}
.head p{font-size:19.5px;color:var(--muted);line-height:1.65}
.section--dark .head h2{color:#fff}
.section--dark .head p{color:#a9b8c6}


/* ---------- Be rong chu thong nhat ----------
   Chi con HAI mep phai tren moi trang:
   - Khoi van ban  -> var(--measure)
   - Khoi bo cuc   -> het chieu rong container
   Truoc day co toi sau gia tri khac nhau (828/858/960/980/1092/1132px). */
.head p,
.lead p,
.quest > p,
.prose > p,
.prose > ul,
.eco__it p{max-width:var(--measure)}
/* .list2 la khoi BO CUC hai cot, khong phai khoi van ban:
   chay het chieu rong container nhu .rules va .caps, moi cot ~544px */
.prose > ul.list2{max-width:none}
/* van ban nam trong cot hep (split, the, luoi) khong can gioi han them */
.split__txt p,.split__txt ul,.card p,.caps p,.rules p,.person p{max-width:none}

/* ---------- 4. Nut ---------- */
.btn{
  display:inline-block;padding:14px 30px;border-radius:4px;
  font-size:16px;font-weight:600;line-height:1.2;
  border:2px solid transparent;cursor:pointer;transition:.18s;
}
.btn--amber{background:var(--amber);color:#16202b}
.btn--amber:hover{background:#ffc21f;color:#16202b}
.btn--line{border-color:rgba(255,255,255,.8);color:#fff}
.btn--line:hover{background:#fff;color:var(--ink)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-dark);color:#fff}

/* ---------- 5. Header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--hdr);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hdr-line5,.08);
  transition:background .25s ease;
}
/* khi da cuon xuong khoi anh, nen dam lai de chu van ro */
.hdr.is-solid{background:var(--hdr-solid)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.hdr__logo img{height:34px;width:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:6px;
  padding:24px 14px;font-size:16.5px;font-weight:600;
  color:var(--hdr-txt);letter-spacing:.01em;white-space:nowrap;
}
.nav__link:hover,.nav__item--on>.nav__link{color:var(--amber)}
.nav__caret{width:9px;height:9px;flex:none;opacity:.7;transition:transform .18s}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

/* panel cap 2 — luon xep doc */
.sub{
  position:absolute;top:100%;left:0;min-width:365px;
  background:rgba(0,45,82,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:3px solid var(--amber);
  border-radius:0 0 4px 4px;box-shadow:0 18px 40px rgba(0,0,0,.32);
  padding:8px 0;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.18s;
}
.nav__item:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
/* panel cuoi cung neo phai de khong tran ra khoi man hinh hep */
.sub--right{left:auto;right:0}
.sub a{display:block;padding:11px 22px;color:#fff}
.sub a:hover{background:rgba(255,255,255,.08)}
.sub b{display:block;font-size:17px;font-weight:600;line-height:1.35}
.sub span{display:block;font-size:15px;color:#a8bccd;font-weight:400;margin-top:2px}
.sub a:hover span{color:#cfe0ec}

.lang{display:flex;align-items:center;padding:0 6px 0 14px}
.lang img,.lang svg{width:26px;height:auto;border-radius:2px;display:block}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--hdr-txt);margin:5px 0;transition:.2s}

/* ---------- 6. Hero ---------- */
.hero{position:relative;background:#0d151d}
.hero img{width:100%;height:clamp(380px,52vw,620px);object-fit:cover;
  object-position:center 32%;opacity:1}
/* lop phu chuyen sac: anh sang ro hon blanket opacity, chu van doc duoc */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,25,.66) 0%,rgba(11,18,25,.40) 42%,rgba(11,18,25,.58) 100%)}
.hero__txt{
  z-index:2;position:absolute;inset:70px 0 0 0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 24px;
}
.hero h1{
  color:#fff;font-size:clamp(26px,3.3vw,40px);font-weight:700;
  letter-spacing:-.025em;max-width:min(1120px,92vw);margin:0 0 14px;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero p{
  /* khoi CAN GIUA: gioi han be rong de dong chu khong qua dai; khoang trang hai ben deu nhau */
  color:#dbe6ef;font-size:clamp(16.5px,1.6vw,21px);max-width:34em;
  margin:0 0 30px;text-shadow:0 2px 16px rgba(0,0,0,.5);
}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ---------- 7. The (card) ---------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;transition:.2s;
}
.card:hover{border-color:var(--blue);box-shadow:0 10px 30px rgba(0,80,140,.10);transform:translateY(-2px)}
.card__img{aspect-ratio:16/10;background:var(--blue-soft);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__b{padding:26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:23px;letter-spacing:-.01em;margin:0 0 6px}
/* nhan phan loai cung la the <p> nen bi quy tac .card p{flex:1} lam gian ra.
   flex:none giu no dung chieu cao noi dung; chi doan than bai moi gian. */
.card p.card__k{flex:none}
.card__k{font-size:16px;font-weight:600;color:var(--blue);line-height:1.4;margin:0 0 14px}
/* rieng luoi san pham (3 the, nhan dai gan bang nhau): giu nhan cao 2 dong
   de noi dung ba the thang hang. Khong ap cho luoi dich vu vi nhan dai ngan khac nhau. */
.section--soft .g3 .card__k{min-height:2.8em}
.card p{font-size:18px;line-height:1.72;color:var(--body);margin:0 0 20px;flex:1}
.card__go{font-size:17px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;gap:7px}
.card__go svg{width:15px;height:15px;transition:transform .18s}
.card:hover .card__go svg{transform:translateX(3px)}

/* o anh cho */
.hold{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--blue-soft);border:1px dashed #b3c6d4;color:#6d8194;
  font-size:15.5px;line-height:1.5;padding:18px;height:100%;
}

/* ---------- 8. Nang luc cong nghe ---------- */
.tech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:52px;align-items:center}
.tech__row{margin-bottom:18px}
.tech__lbl{font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin:0 0 5px}
.tech__val{font-variant-numeric:tabular-nums;font-size:18px;color:#e3ebf2;font-weight:500;line-height:1.6}
.tech__note{
  font-size:18.5px;line-height:1.75;color:#a9b8c6;
  border-left:3px solid var(--amber);padding-left:20px;margin:26px 0 0;
}
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shot{
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;border-radius:5px;font-size:15.5px;line-height:1.5;
  background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.24);color:#8fa3b4;
}
/* anh that trong dai Nang luc ky thuat */
.shots img{width:100%;aspect-ratio:16/10;object-fit:contain;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px}

/* ---------- 9. CTA ---------- */
.cta{background:var(--blue);color:#fff;padding:64px 0;text-align:center}
.cta h2{color:#fff;font-size:34px;letter-spacing:-.022em;margin:0 0 12px}
/* khoi CAN GIUA: gioi han be rong de dong chu khong qua dai; khoang trang hai ben deu nhau */
.cta p{font-size:19.5px;color:rgba(255,255,255,.92);max-width:40em;margin:0 auto 28px}

/* ---------- 10. Trang trong ---------- */
.phead{position:relative;background:#0d151d}
.phead img{width:100%;height:clamp(230px,27vw,320px);object-fit:cover;
  object-position:center 28%;opacity:1}
/* banner trang Tu van: neo sat mep tren de khong cat mat dong chu tren phong nen */
.phead img[src*="tv-band"]{object-position:center 4%}
/* banner ControlMES: neo sao cho dong chu tren phong nen hien tron duoi thanh menu */
.phead img[src*="smart-factory"]{object-position:center 32%}
.phead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,18,25,.70) 0%,rgba(11,18,25,.48) 60%,rgba(11,18,25,.55) 100%)}
.phead__t{z-index:2;position:absolute;inset:70px 0 0 0;display:flex;align-items:center}
.phead h1{color:#fff;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.025em;text-shadow:0 2px 20px rgba(0,0,0,.5)}

.lead{background:var(--bg);border-bottom:1px solid var(--line);padding:36px 0}
.lead p{font-size:21px;line-height:1.7;color:var(--ink);max-width:var(--measure);margin:0}

.page{padding:64px 0}
.page__grid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,1fr);gap:56px;align-items:start}
.page__grid--full{grid-template-columns:1fr}
.prose h2{font-size:30px;letter-spacing:-.022em;margin:0 0 14px}
.prose h2+p,.prose h2+ul{margin-top:0}
.prose h2:not(:first-child){margin-top:44px}
.prose h3{font-size:22px;margin:32px 0 10px}
.prose p{font-size:19.5px;line-height:1.8;color:var(--body);margin:0 0 18px;max-width:var(--measure)}
.prose ul{margin:0 0 20px;padding-left:4px}
.prose ul li{font-size:19.5px;line-height:1.8;color:var(--body);margin:0 0 9px;padding-left:26px;position:relative}
.prose ul li::before{
  content:"";position:absolute;left:6px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--blue);
}
.prose .btn{margin-top:8px}

.aside{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:26px;position:sticky;top:100px}
.aside h4{font-size:18px;margin:0 0 14px}
.aside li{font-size:17px;line-height:1.65;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line)}
.aside li:last-child{border-bottom:0}

/* ---------- 10b. Khoi anh ---------- */
.fig{margin:32px 0}
.fig img{width:100%;border-radius:6px;display:block}
.fig figcaption{font-size:15px;line-height:1.6;color:var(--muted);margin-top:10px}
.fig__ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--blue-soft);border:1px dashed #b3c6d4;border-radius:6px;
  color:#5f7488;text-align:center;padding:20px;
}
.fig__ph b{font-size:15px;font-weight:600;letter-spacing:.02em}
.fig__ph span{font-size:14.5px}
.fig--box  .fig__ph{aspect-ratio:4/3}    /* dat canh chu */
.fig--thumb .fig__ph{aspect-ratio:16/10} /* hang 3 anh nho */
.fig--band{margin:6px 0 46px}           /* dai anh ngang chay het chieu rong */
.fig--band img{border-radius:6px}
/* Anh that phai theo dung ty le khung, neu khong cac the se lech nhau */
.fig--box img{aspect-ratio:4/3;object-fit:cover}
/* Anh chup man hinh: hien nguyen ven, khong cat mat thong tin */
.fig--shot img{object-fit:contain;background:var(--blue-soft);padding:8px}
.caps .fig--shot img{padding:6px}
/* dat SAU .fig--box/.fig--thumb de khong bi ghi de thanh cover -> tranh cat mat logo */
.fig.fig--shot img{object-fit:contain}
.fig.fig--shot.fig--full img{object-fit:cover}
/* anh mockup da co nen rieng, dung day khung, khong chen them */
.fig--full img{object-fit:cover;background:none;padding:0}
/* anh chup man hinh trong the san pham: hien nguyen ven */
.card__img img.shotfit{object-fit:contain;background:var(--blue-soft);padding:8px}
.fig--thumb img{aspect-ratio:16/10;object-fit:cover}
.caps .fig img{border-radius:0;border-bottom:1px solid var(--line)}
/* anh dat truc tiep trong the: sat mep, khong bo goc, khong le */
.card>.fig{margin:0}
.card>.fig img{border-radius:0;border-bottom:1px solid var(--line)}

/* ---------- 10c. Bo cuc chu canh anh ---------- */
/* Anh chia se chieu cao voi van ban, khong keo dai trang. */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;align-items:center;margin:0 0 52px;
}
.split .fig{margin:0}
/* cot anh trong split: 1 anh lon phia tren, 2 anh nho phia duoi */
.imgstack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.imgstack>.fig{margin:0}
.split--rev>*:first-child{order:2}
.split__txt h2{margin-top:0}
.split__txt p{max-width:none}
.split__txt>*:last-child{margin-bottom:0}

.figs3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:28px 0 52px}
.figs3 .fig{margin:0}

/* ---------- 10d. Khoi cau hoi mo dau ---------- */
.quest{
  background:var(--blue-soft);border-left:4px solid var(--blue);
  border-radius:0 6px 6px 0;padding:30px 34px;margin:0 0 52px;
}
.quest h2{font-size:21px;margin:0 0 18px}
.quest ol{margin:0 0 18px;padding:0;counter-reset:q;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.quest li{
  list-style:none;position:relative;padding:58px 0 0;margin:0;
  font-size:18px;font-weight:600;line-height:1.5;color:var(--ink);
}
/* so lon lam moc thi giac; chu canh trai de doc thang leo */
.quest li::before{
  counter-increment:q;content:counter(q);
  position:absolute;left:-2px;top:-8px;
  font-size:54px;font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--blue);opacity:.9;
}
.quest>p{font-size:17.5px;line-height:1.7;color:var(--body);margin:0;max-width:var(--measure)}

/* ---------- 10e. Ba nang luc — moi the co mot anh chung minh ---------- */
.caps{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 52px}
.caps>div{
  background:#fff;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;
}
.caps .fig{margin:0}
.caps .fig__ph{border:0;border-radius:0;border-bottom:1px dashed #b3c6d4;aspect-ratio:16/10}
.caps .fig img{border-radius:0}
.caps__b{padding:22px 24px 24px}
.caps h3{font-size:19px;margin:0 0 9px;color:var(--blue)}
.caps p{font-size:17px;line-height:1.7;color:var(--body);margin:0;max-width:none}

/* ---------- 10f. Danh sach 2 cot ---------- */
/* dong chay theo cot (1-5 ben trai, 6-9 ben phai) cho de doc doc */
.list2{columns:2;column-gap:44px;margin:0 0 12px}
.list2 li{max-width:none;break-inside:avoid}

/* ---------- 10g. Nguyen tac dang luoi 2x2 ---------- */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 48px;margin:0 0 52px}
.rules h3{font-size:19px;margin:0 0 8px;color:var(--blue)}
.rules p{margin:0;max-width:none;font-size:17.5px}

@media(max-width:980px){
  .split{grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:40px}
  .split--rev>*:first-child{order:0}
  .caps,.rules,.quest ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .figs3{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media(max-width:620px){
  .caps,.rules,.quest ol,.figs3{grid-template-columns:minmax(0,1fr)}
  .list2{columns:1}
  .quest{padding:22px 20px}
  .quest li{font-size:17px;padding-top:50px}
  .quest li::before{font-size:46px}
}

.contactbox{
  margin-top:44px;background:var(--bg);border:1px solid var(--line);
  border-radius:6px;padding:30px 34px;max-width:var(--measure);
}
.contactbox h3{font-size:21px;margin:0 0 14px}
.contactbox .info li{padding:10px 0;border-bottom:0}

/* ---------- 11. He sinh thai ---------- */
.eco{display:grid;gap:0}
.eco__it{display:grid;grid-template-columns:170px minmax(0,1fr);gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start}
.eco__it:last-child{border-bottom:0}
.eco__logo{display:flex;align-items:center;min-height:52px}
.eco__logo .fig{margin:0;width:100%}
.eco__logo .fig--thumb .fig__ph{aspect-ratio:auto;min-height:64px;padding:10px}
.eco__logo .fig__ph b{font-size:13px}
.eco__logo .fig__ph span{display:none}
.eco__logo img{max-height:44px;width:auto}
.eco__role{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--blue);background:var(--blue-soft);border-radius:3px;padding:4px 11px;margin:0 0 9px;
}
.eco__it h3{font-size:21px;margin:0 0 8px}
.eco__it p{font-size:18px;line-height:1.72;color:var(--body);max-width:var(--measure)}

/* ---------- 12. Form ---------- */
.form label{display:block;font-size:16.5px;font-weight:600;color:var(--ink);margin:0 0 7px}
.form input,.form textarea{
  width:100%;padding:14px 16px;font-size:17.5px;font-family:inherit;color:var(--ink);
  border:1px solid var(--line);border-radius:4px;background:#fff;margin:0 0 18px;
}
.form input:focus,.form textarea:focus{outline:2px solid rgba(0,100,168,.3);border-color:var(--blue)}
.form textarea{min-height:150px;resize:vertical}

.info li{display:flex;gap:14px;padding:12px 0;font-size:18px;line-height:1.6;align-items:flex-start}
.info svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--blue)}

/* ---------- 13. Footer ---------- */
.ftr{background:linear-gradient(118deg,#00426f 0%,#003865 42%,#001b31 100%);
  color:#c9d6e2;padding:56px 0 0}
.ftr__grid{display:block}
.ftr h4{color:#fff;font-size:18px;margin:0 0 18px;letter-spacing:.02em}
.ftr li{font-variant-numeric:tabular-nums;display:flex;gap:13px;padding:8px 0;font-size:17.5px;line-height:1.6;align-items:flex-start}
.ftr svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--amber)}
.ftr a{color:#dbe6ef}
.ftr a:hover{color:var(--amber)}
.ftr__logos{display:flex;flex-wrap:wrap;gap:26px;align-items:center}
.ftr__logos img{max-height:36px;width:auto;opacity:.9}
.ftr__logos a:hover img{opacity:1}
.ftr__bar{margin-top:44px;border-top:1px solid rgba(245,179,1,.45);padding:20px 0;
  text-align:center;font-size:16px;color:#a9bacb}

/* ---------- 14. Man hinh nho ---------- */
@media(max-width:980px){
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tech{grid-template-columns:minmax(0,1fr);gap:38px}
  .page__grid{grid-template-columns:minmax(0,1fr);gap:38px}
  .aside{position:static}
  .ftr__grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .section{padding:58px 0}
  .head h2{font-size:30px}
  .cta h2{font-size:28px}
  .prose h2{font-size:26px}

  .burger{display:block}
  .nav{
    position:fixed;inset:70px 0 auto 0;background:rgba(0,45,82,.97);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex-direction:column;
    align-items:stretch;gap:0;padding:8px 0 20px;max-height:calc(100vh - 70px);
    overflow:auto;display:none;
  }
  .nav.open{display:flex}
  .nav__link{padding:14px 24px;justify-content:space-between}
  .sub,.sub--right{position:static;left:auto;right:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:rgba(0,0,0,.22);border-top:0;border-radius:0;padding:4px 0;display:none}
  .nav__item.open .sub{display:block}
  .nav__item.open .nav__caret{transform:rotate(180deg)}
  .sub a{padding:12px 34px}
  .lang{padding:14px 24px}
}
@media(max-width:620px){
  .g2,.g3,.shots{grid-template-columns:minmax(0,1fr)}
  .section--soft .g3 .card__k{min-height:0}
  .eco__it{grid-template-columns:minmax(0,1fr);gap:14px}
  body{font-size:17.5px}
  .head p{font-size:18px}
  .lead p{font-size:19px}
  .prose p,.prose ul li{font-size:18px}
}

/* =========================================================
   15. THANH PHAN RIENG CHO TRANG SAN PHAM
   ========================================================= */

/* khoi ba cau hoi mo dau */
.qbox{background:var(--blue-soft);border-left:4px solid var(--blue);border-radius:0 6px 6px 0;
  padding:30px 34px;margin:0 0 40px}
.qbox li{font-size:19.5px;line-height:1.55;font-weight:600;color:var(--ink);
  padding:0 0 0 40px;margin:0 0 18px;position:relative;counter-increment:q}
.qbox ol{counter-reset:q;margin:0 0 20px;padding-left:0;list-style:none}
.qbox li::before{content:counter(q);position:absolute;left:0;top:1px;
  width:27px;height:27px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.qbox p{font-size:18px;line-height:1.75;color:var(--body);margin:0}

/* o anh trong bai — cao va thoang */
.fig{margin:34px 0;max-width:none}
.fig .ph{display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--blue-soft);border:1px dashed #b3c6d4;border-radius:6px;
  color:#6d8194;font-size:15.5px;line-height:1.6;padding:24px;min-height:340px}
.fig figcaption{font-size:15.5px;color:var(--muted);margin-top:11px;text-align:center}
.fig--wide .ph{min-height:400px}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:34px 0}
.figs .fig{margin:0}
.figs .ph{min-height:270px}

/* cac danh sach rieng khong dung dau cham tron mac dinh cua .prose */
.prose .principles>li,.prose .mods li,.prose .qbox li{padding-left:0}
.prose .principles>li::before,.prose .mods li::before,.prose .qbox li::before{display:none}
.prose .qbox li{padding-left:40px}
.prose .qbox li::before{display:flex}

/* danh sach nguyen tac */
.principles{margin:0 0 8px}
.principles>li{padding:24px 0;border-bottom:1px solid var(--line);margin:0}
.principles>li:first-child{padding-top:6px}
.principles>li:last-child{border-bottom:0}
.principles b{display:block;font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px;line-height:1.35}
.principles span{display:block;font-size:19.5px;line-height:1.8;color:var(--body)}

/* danh sach 9 nhom chuc nang */
.mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px;margin:0 0 8px}
.mods li{padding:13px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.6;color:var(--body)}
.mods li b{color:var(--ink);font-weight:700}

/* dai nganh ap dung */
.tags{display:flex;flex-wrap:wrap;gap:11px;margin:0 0 22px}
.tags span{background:var(--blue-soft);color:var(--blue);border-radius:100px;
  padding:9px 20px;font-size:16.5px;font-weight:600}

@media(max-width:820px){
  .mods,.figs{grid-template-columns:minmax(0,1fr)}
  .qbox{padding:24px 22px}
  .qbox li{font-size:18px}
  .fig .ph{min-height:250px}
  .fig--wide .ph{min-height:280px}
}

/* ---------- 10h. The gioi thieu nguoi ---------- */
.fig--sq img{aspect-ratio:1/1;object-fit:cover;object-position:center 22%}
.person .card__b{padding:22px 24px 26px}
.person h3{font-size:21px;margin:0 0 4px}
.person .card__k{margin:0 0 12px}
.person p{font-size:16.5px;line-height:1.7}
.person:hover{transform:none;box-shadow:none;border-color:var(--line)}