/* SHINE Group — nền sáng; màu lấy từ logo: xanh ngọc #44dee7, vàng chanh #c9dd2e, rêu đậm #2a3513; chữ và mảng tối dùng xanh cổ vịt rất đậm.
   Họa tiết riêng: các LỚP DẢI UỐN xếp chồng của chữ S (assets/nen-dai.svg ở phần mở đầu + cuối trang, assets/nen-dai-goc.svg ở dải kêu gọi)
   và bóng "xếp lớp" lệch góc ở nút, thẻ, hình minh họa.
   Xanh ngọc / vàng chanh KHÔNG đủ tương phản để làm chữ trên nền sáng → chỉ làm mảng nền, viền, điểm nhấn; chữ màu trên nền sáng dùng --xanh-dam. */
:root {
  --ngoc: #44dee7;
  --ngoc-nhat: #e3f7f9;
  --chanh: #c9dd2e;
  --chanh-nhat: #f4f8d5;
  --reu: #2a3513;
  --co-vit: #3d8385;
  --xanh-dam: #0a5f64;
  --dem: #0d2327;
  --dem-2: #143a3f;
  --chu: #0d2327;
  --chu-mo: #445c60;
  --nen: #fff;
  --nen-2: #f2f9f9;
  --vien: #d5e5e6;
  --tren-dem: #effbfc;
  --tren-dem-mo: #a9c6c8;
  --vien-dem: rgba(255, 255, 255, .16);
  --lop-3: var(--dem);
  --rong: 1180px;
  --bo: 18px;
  --bo-nho: 12px;
  --cao-dau: 72px;
  --tieu-de: "Montserrat", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --noi-dung: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--cao-dau); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--noi-dung);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-family: var(--tieu-de); color: var(--dem); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(1.9rem, .6rem + 3.3vw, 3.3rem); font-weight: 800; line-height: 1.16; letter-spacing: -.028em; }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.13rem; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; }
h4 { font-family: var(--tieu-de); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--xanh-dam); }
p { color: var(--chu-mo); text-wrap: pretty; }
p + p { margin-top: 1rem; }
strong { color: var(--chu); font-weight: 600; }
:focus-visible { outline: 3px solid var(--dem); outline-offset: 3px; border-radius: 6px; }
.phan--dem :focus-visible, .the--dem :focus-visible, .keu-goi :focus-visible, .chan-trang :focus-visible { outline-color: var(--chanh); }   /* trên mảng tối: vòng vàng chanh */
[hidden] { display: none !important; }
.an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.khung { width: 100%; max-width: var(--rong); margin-inline: auto; padding-inline: 20px; }
.khung--hep { max-width: 900px; }
.bo-qua {
  position: absolute; left: 12px; top: -70px; z-index: 100;
  background: var(--dem); color: #fff; font-weight: 600;
  padding: .65rem 1rem; border-radius: 10px; box-shadow: 4px 4px 0 var(--ngoc); transition: top .15s;
}
.bo-qua:focus { top: 12px; }

/* Nhãn nhỏ phía trên tiêu đề: đứng trước là dấu ba lớp lệch nhau (ngọc · chanh · đậm).
   Lớp .nhan--vang (index.php gắn ở phần mở đầu và mục cam kết) không cần luật riêng: trên mảng tối nhãn tự đổi sang vàng chanh. */
.nhan {
  display: flex; align-items: flex-start; gap: .65rem;
  font-family: var(--tieu-de);
  font-size: .78rem; font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase;
  color: var(--xanh-dam);
  margin-bottom: .9rem;
  text-wrap: balance;
}
.nhan::before {
  content: ""; flex: none; width: 20px; height: 13px; margin-top: .28em;
  background:
    linear-gradient(var(--ngoc), var(--ngoc)) 0 0 / 14px 3px no-repeat,
    linear-gradient(var(--chanh), var(--chanh)) 3px 5px / 14px 3px no-repeat,
    linear-gradient(var(--lop-3), var(--lop-3)) 6px 10px / 14px 3px no-repeat;
}
/* Chữ nhấn mạnh trong tiêu đề lớn: giữ màu chữ đậm, gạch nền vàng chanh kiểu bút dạ */
.chu-vang {
  background: linear-gradient(transparent 60%, var(--chanh) 60% 91%, transparent 91%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .1em; margin-inline: -.1em;
}

/* Nút: khối đậm bo góc, một lớp xanh ngọc lệch góc phía sau; rê chuột thì lộ thêm lớp vàng chanh */
.nut {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.5rem;
  border: 2px solid var(--dem); border-radius: var(--bo-nho);
  background: var(--dem); color: #fff;
  font-family: var(--tieu-de); font-weight: 700; font-size: .98rem; line-height: 1.2; text-align: center;
  max-width: 100%;
  box-shadow: 4px 4px 0 var(--ngoc);
  transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.nut:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ngoc), 8px 8px 0 var(--chanh); }
.nut:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ngoc); }
.nut--vien, .nut--vien-dam { background: var(--nen); color: var(--dem); box-shadow: none; }
.nut--vien:hover, .nut--vien-dam:hover { background: var(--ngoc-nhat); box-shadow: 4px 4px 0 var(--chanh); }
.nut--vien:active, .nut--vien-dam:active { box-shadow: 1px 1px 0 var(--chanh); }
.nut--nho { min-height: 44px; padding: .5rem 1.15rem; font-size: .92rem; box-shadow: 3px 3px 0 var(--ngoc); }
.hang-nut { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; margin-top: 2rem; }

/* ── Đầu trang (nền sáng) ── */
.dau-trang {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--chu);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.dau-trang.cuon {
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: var(--vien);
  box-shadow: 0 12px 30px -24px rgba(13, 35, 39, .5);
}
.dau-trang__trong { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--cao-dau); }
.thuong-hieu { display: flex; align-items: center; gap: .65rem; min-width: 0; min-height: 44px; }
.thuong-hieu img { flex: none; width: auto; height: 44px; }   /* dấu "S" 256×307: cao cố định, rộng theo tỉ lệ */
.thuong-hieu__chu { display: grid; min-width: 0; line-height: 1.1; }
.thuong-hieu__chu b, .thuong-hieu__chu small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thuong-hieu__chu b { font-family: var(--tieu-de); font-weight: 800; font-size: 1.2rem; letter-spacing: .005em; color: var(--dem); padding-block: .08em; }
.thuong-hieu__chu small { font-family: var(--tieu-de); font-weight: 600; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--xanh-dam); padding-block: .18em; }   /* khẩu hiệu có thể trống: tên tự nằm giữa theo chiều dọc */
.menu { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.9rem); font-weight: 500; font-size: .97rem; line-height: 1.3; }
.menu > a:not(.nut) { color: var(--chu-mo); padding: .55rem 0; text-align: center; transition: color .2s, box-shadow .2s; }
.menu > a:not(.nut):hover { color: var(--dem); box-shadow: inset 0 -3px 0 var(--vien); }
.menu > a[aria-current], .menu > a[aria-current]:hover { color: var(--dem); box-shadow: inset 0 -3px 0 var(--xanh-dam); }
.nut-menu { display: none; flex: none; width: 46px; height: 46px; background: none; border: 0; border-radius: 12px; padding: 10px; cursor: pointer; color: var(--dem); }
html:not(.js) .dau-trang { background: var(--nen); border-color: var(--vien); }
html:not(.js) .nut-menu { display: none; }
.nut-menu span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; margin: 5.5px 0; transition: transform .25s, opacity .25s, width .25s; }
.nut-menu span:nth-child(2) { width: 18px; }

/* ── Nút đổi ngôn ngữ VI | EN: trong menu đầu trang (nền sáng) và ở dòng cuối trang (nền tối) ── */
.doi-nn { display: inline-flex; flex-shrink: 0; padding: 3px; border: 1px solid var(--vien); border-radius: 11px; background: var(--nen); }
.doi-nn__muc {
  display: grid; place-items: center; min-width: 34px; min-height: 30px; padding: 0 .45rem; border-radius: 8px;
  font-family: var(--tieu-de); font-weight: 700; font-size: .76rem; line-height: 1; letter-spacing: .06em;
  color: var(--chu-mo); transition: background .2s, color .2s;
}
a.doi-nn__muc:hover { background: var(--ngoc-nhat); color: var(--dem); }
.doi-nn__muc[aria-current] { background: var(--dem); color: #fff; }
.doi-nn__muc:focus-visible { outline-offset: 2px; border-radius: 8px; }
.chan-trang .doi-nn { border-color: var(--vien-dem); background: none; }
.chan-trang .doi-nn__muc { color: var(--tren-dem); }
.chan-trang a.doi-nn__muc:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.chan-trang .doi-nn__muc[aria-current] { background: var(--ngoc); color: var(--dem); }
@media (pointer: coarse) { .doi-nn__muc { min-width: 44px; min-height: 44px; } }   /* màn cảm ứng: vùng bấm đủ 44px */

/* ── Mở đầu: chữ bên trái, logo đầy đủ trên nền sáng bên phải; dưới cùng là dải uốn nhiều lớp rồi dải chữ chạy ── */
.mo-dau {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: var(--cao-dau);
  background: var(--nen);
}
.mo-dau__nen {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(44% 56% at 79% 42%, var(--ngoc-nhat), transparent 72%),
    linear-gradient(180deg, var(--nen) 35%, var(--nen-2));
}
.mo-dau__trong {
  flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); align-items: center;
  gap: clamp(1.6rem, 5vw, 4.5rem);
  padding-block: clamp(2.4rem, 6vw, 4.5rem) clamp(1.6rem, 3.5vw, 3rem);
}
.mo-dau__chu, .ct__chu { min-width: 0; }   /* cho phép cột chữ co hẹp hơn một từ dài (từ dài tự ngắt) */
.mo-dau__mo-ta { font-size: clamp(1.02rem, 1.4vw, 1.14rem); max-width: 60ch; margin-top: 1.4rem; }
.diem-nhan { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; margin-top: 1.9rem; font-size: .93rem; font-weight: 500; line-height: 1.45; color: var(--chu); }
.diem-nhan li { display: flex; align-items: flex-start; gap: .55rem; }
.diem-nhan li::before, .ds-tich li::before {
  content: "✓"; flex: none; display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; border-radius: 6px; background: var(--chanh); color: var(--dem); font-size: .72rem; font-weight: 700; line-height: 1;
}
.diem-nhan li::before { margin-top: .05em; }
.mo-dau__logo { justify-self: center; width: 100%; max-width: 520px; }
.mo-dau__logo img { width: 100%; filter: drop-shadow(0 22px 26px rgba(13, 35, 39, .13)); }
.mo-dau__dai { flex: none; height: clamp(48px, 8.5vw, 132px); margin-bottom: -1px; background: url(../assets/nen-dai.svg) no-repeat center bottom / 100% 100%; }
@media (min-width: 901px) {
  .mo-dau { min-height: min(100vh, 920px); min-height: min(100svh, 920px); }
}

.chay-chu { position: relative; overflow: hidden; padding: 1rem 0; background: var(--dem); }
.chay-chu__dai { display: flex; width: max-content; animation: chay 80s linear infinite; }
.chay-chu span {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--tieu-de); font-weight: 700; font-size: .88rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tren-dem);
}
.chay-chu span::after {   /* dấu ngăn: hai vạch xiên chanh + ngọc */
  content: ""; width: 20px; height: 12px; margin-inline: 1.7rem;
  background: linear-gradient(112deg, transparent 14%, var(--chanh) 14% 40%, transparent 40% 58%, var(--ngoc) 58% 84%, transparent 84%);
}
@keyframes chay { to { transform: translateX(-50%); } }

/* ── Khung các phần ── */
.phan { padding-block: clamp(3.8rem, 9vw, 6.5rem); }
.phan--nhat { background: var(--nen-2); }
.phan--sat { padding-top: clamp(2.6rem, 5vw, 4rem); }
.phan--dem { --lop-3: #fff; color: var(--tren-dem); background: var(--dem); }
.phan--dem h2, .phan--dem h3 { color: #fff; }
.phan--dem p { color: var(--tren-dem-mo); }
.phan--dem .nhan { color: var(--chanh); }
.phan--dem strong, .the--dem strong, .keu-goi strong { color: #fff; }
.dau-phan { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dau-phan h2 + p { margin-top: 1rem; font-size: 1.06rem; }
.hai-cot { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.hai-cot > * { min-width: 0; }
.hai-cot h2 { margin-bottom: 1.2rem; }

/* ── Dải điểm mạnh (ngay dưới phần mở đầu): các cột có vạch màu bên trái ── */
.cot-1 { --cot: 1; } .cot-2 { --cot: 2; } .cot-3 { --cot: 3; } .cot-4 { --cot: 4; } .cot-5 { --cot: 5; } .cot-6 { --cot: 3; }
.dai-so { background: var(--nen); padding-block: clamp(2.2rem, 4.5vw, 3.4rem); }
.dai-so__luoi { display: grid; grid-template-columns: repeat(var(--cot, 4), minmax(0, 1fr)); gap: 1.6rem clamp(1rem, 2.6vw, 2.2rem); }
.dai-so li { display: grid; gap: .45rem; align-content: start; padding-left: clamp(.85rem, 1.6vw, 1.2rem); border-left: 4px solid var(--ngoc); }
.dai-so li:nth-child(3n + 2) { border-color: var(--chanh); }
.dai-so li:nth-child(3n) { border-color: var(--dem); }
.dai-so b {
  font-family: var(--tieu-de); font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em; color: var(--dem);
  overflow-wrap: anywhere;
}
.dai-so span { color: var(--chu-mo); font-size: .93rem; line-height: 1.45; text-wrap: balance; }

/* ── Lĩnh vực: lưới thẻ, mỗi thẻ có số thứ tự (trùng số của hàng chi tiết bên dưới) ── */
.luoi-dv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: the; }
.the {
  --dem-the: clamp(1.35rem, 2.3vw, 1.8rem);
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: var(--dem-the);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.the:hover, .gp:hover { transform: translate(-3px, -3px); border-color: var(--dem); box-shadow: 4px 4px 0 var(--ngoc), 8px 8px 0 var(--chanh); }
.the:not(.the--dem) { counter-increment: the; }
.the:not(.the--dem)::after {
  content: counter(the, decimal-leading-zero); content: counter(the, decimal-leading-zero) / "";
  position: absolute; top: calc(var(--dem-the) + .2rem); right: var(--dem-the);
  font-family: var(--tieu-de); font-weight: 800; font-size: .82rem; line-height: 1; letter-spacing: .1em; color: var(--chu-mo);
}
.the__hinh { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--dem); margin-bottom: 1.2rem; }
.the__hinh svg { width: 27px; height: 27px; fill: none; stroke: var(--ngoc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.the h3 { margin-bottom: .5rem; }
.the p { font-size: .97rem; }
.the__muc { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.2rem; }
.the__muc li {
  font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--xanh-dam);
  background: var(--nen-2); border: 1px solid var(--vien); border-radius: 8px; padding: .3rem .65rem;
}
.the__them { margin: .2rem 0 -.55rem; font-size: .92rem; }   /* đệm trên dưới của .lien-ket đã lo vùng bấm → kéo sát lại cho khỏi hở */
.the > p + .the__them { margin-top: auto; padding-top: .9rem; }
/* Thẻ kêu gọi (ô cuối lưới): mảng tối */
.the--dem { color: var(--tren-dem); border-color: var(--dem); background: linear-gradient(140deg, var(--dem-2), var(--dem) 72%); background-origin: border-box; }
.the--dem .the__hinh { background: var(--chanh); }
.the--dem h3 { color: #fff; }
.the--dem p { color: var(--tren-dem-mo); margin-bottom: 1.4rem; }
.the--dem .nut { margin-top: auto; }
.the--dem .nut, .keu-goi .nut { background: var(--chanh); border-color: var(--chanh); color: var(--dem); }
.the--dem .nut:hover, .keu-goi .nut:hover { box-shadow: 4px 4px 0 var(--ngoc), 8px 8px 0 var(--co-vit); }
/* Dấu ba lớp dải uốn (in từ index.php) — dùng ở thẻ kêu gọi, các ô tầm nhìn, và làm biểu tượng dự phòng */
.lop-1, .lop-2, .lop-3 { fill: none; stroke-width: 2.3; stroke-linecap: round; }
.lop-1 { stroke: var(--ngoc); }
.lop-2 { stroke: var(--chanh); }
.lop-3 { stroke: #fff; }
.the--dem .the__hinh path { stroke: var(--dem); }
/* Thẻ kêu gọi đứng cuối mà hàng cuối còn ô trống → kéo dài cho kín hàng, nội dung xếp ngang */
@media (min-width: 1041px) {
  .luoi-dv > .the--dem:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .luoi-dv > .the--dem:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.4rem; align-items: center; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) > * { margin: 0; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) > .the__hinh { grid-row: 1 / span 2; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) > :is(h3, p) { grid-column: 2; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) > p { margin-top: .3rem; }
  .luoi-dv > .the--dem:last-child:is(:nth-child(3n + 1), :nth-child(3n + 2)) > .nut { grid-column: 3; grid-row: 1 / span 2; margin-right: 4px; }
}
@media (min-width: 641px) and (max-width: 1040px) {
  .luoi-dv > .the--dem:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1.4rem; align-items: center; }
  .luoi-dv > .the--dem:last-child:nth-child(odd) > * { margin: 0; }
  .luoi-dv > .the--dem:last-child:nth-child(odd) > .the__hinh { grid-row: 1 / span 2; }
  .luoi-dv > .the--dem:last-child:nth-child(odd) > :is(h3, p) { grid-column: 2; }
  .luoi-dv > .the--dem:last-child:nth-child(odd) > p { margin-top: .3rem; }
  .luoi-dv > .the--dem:last-child:nth-child(odd) > .nut { grid-column: 3; grid-row: 1 / span 2; margin-right: 4px; }
}

/* ── Thẻ thông tin doanh nghiệp / liên hệ: mép trên là dải ba màu ── */
.ho-so {
  position: relative; overflow: hidden;
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: calc(clamp(1.4rem, 3vw, 2.2rem) + 6px) clamp(1.3rem, 3vw, 2.2rem) clamp(1.3rem, 3vw, 2rem);
  box-shadow: 0 30px 60px -46px rgba(13, 35, 39, .5);
}
.ho-so::before, .da::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--ngoc) 58%, var(--chanh) 58% 84%, var(--reu) 84%); }
.ho-so h3 { margin-bottom: .6rem; }
.ho-so dl > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--vien); }
.ho-so dl > div:first-child { border-top: 0; }
.ho-so dt { color: var(--chu-mo); font-size: .9rem; padding-top: .08rem; }
.ho-so dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ho-so dd a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; color: var(--xanh-dam); text-decoration: underline; text-underline-offset: 3px; }
.mang-xa-hoi { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.mang-xa-hoi:empty { display: none; }
.mang-xa-hoi a { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--vien); border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--xanh-dam); transition: border-color .2s, background .2s; }
.mang-xa-hoi a:hover { border-color: var(--xanh-dam); background: var(--ngoc-nhat); }
.ban-do { margin-top: clamp(2rem, 4vw, 3rem); }
.ban-do iframe { display: block; width: 100%; height: 380px; border: 1px solid var(--vien); border-radius: var(--bo); }

/* ── Cam kết (mảng tối): mỗi ô một dấu tích trên nền vàng chanh ── */
.nam-sao { display: grid; grid-template-columns: repeat(var(--cot, 5), minmax(0, 1fr)); gap: 1.1rem; }
.nam-sao li {
  border: 1px solid var(--vien-dem); border-radius: var(--bo);
  background: rgba(255, 255, 255, .05);
  padding: 1.5rem 1.25rem;
}
.nam-sao svg {
  width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: var(--chanh);
  fill: none; stroke: var(--dem); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 1.1rem;
}
.nam-sao h3 { margin-bottom: .45rem; }
.nam-sao p { font-size: .95rem; }

/* ── Quy trình: ô số nối nhau bằng một đường kẻ ── */
.buoc { display: grid; grid-template-columns: repeat(var(--cot, 4), minmax(0, 1fr)); gap: 2.4rem 1.6rem; }
.buoc li { position: relative; }
.buoc li::before { content: ""; position: absolute; top: 22px; left: 62px; right: 0; height: 2px; border-radius: 2px; background: var(--vien); }
.buoc li:last-child::before { display: none; }
.buoc__so {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: var(--dem); color: var(--chanh); box-shadow: 3px 3px 0 var(--ngoc);
  font-family: var(--tieu-de); font-weight: 800; font-size: 1.05rem;
  margin-bottom: 1.2rem;
}
.buoc h3 { margin-bottom: .4rem; }
.buoc p { font-size: .97rem; }
/* Sau mỗi bước khách nhận được gì */
.buoc__nhan { align-self: start; margin-top: .9rem; padding: .6rem .85rem; border-left: 3px solid var(--chanh); border-radius: 0 10px 10px 0; background: var(--nen-2); font-size: .9rem; line-height: 1.5; color: var(--chu); }
.buoc__nhan b { font-family: var(--tieu-de); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--xanh-dam); margin-right: .2rem; }
/* Số · tên bước · mô tả · "Bạn nhận" của các bước cùng hàng luôn thẳng hàng nhau (điện thoại 1 cột thì không cần) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .buoc li { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
    .buoc__so { grid-row: 1; }
    .buoc h3 { grid-row: 2; }
    .buoc li > p { grid-row: 3; }
    .buoc li > .buoc__nhan { grid-row: 4; }
  }
}

/* ── Liên kết có mũi tên ── */
.lien-ket {   /* inline-block + đệm trên dưới: vùng bấm cao ≥ 44px; mũi tên là khối riêng nên không bị gạch chân theo */
  display: inline-block; padding-block: .7rem; font-family: var(--tieu-de); font-weight: 700; font-size: .95rem; line-height: 1.5; color: var(--xanh-dam);
  text-decoration: underline; text-decoration-color: var(--chanh); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.lien-ket::after { content: "→"; display: inline-block; margin-left: .4rem; transition: transform .2s; }
.lien-ket--ngoai::after { content: "↗"; }
.lien-ket:hover { color: var(--dem); text-decoration-color: var(--ngoc); }
.lien-ket:hover::after { transform: translateX(4px); }

/* ── Hình minh họa (SVG trong lib/minh-hoa/, chỉ tô / kẻ bằng các lớp dưới đây) ── */
.mh { display: block; width: 100%; height: auto; border-radius: 22px; }
/* Bảng lớp màu cho minh họa của SHINE Group (nằm trong css/style.css). Hình vẽ CHỈ được dùng các lớp này để tô / kẻ.
   Khung hình là một tấm NỀN TỐI (xanh cổ vịt đậm) đặt trên trang nền sáng; vật thể tô xanh ngọc + vàng chanh của logo, nét sáng. */
.mh .mh-nen        { fill: #0d2327; }                       /* nền khung, tối nhất */
.mh .mh-nen2       { fill: #143a3f; }                       /* mảng nền phụ, sáng hơn 1 bậc */
.mh .mh-nen3       { fill: #1e5258; }                       /* mảng nền phụ, sáng hơn 2 bậc */
.mh .mh-xanh       { fill: #44dee7; }                       /* xanh ngọc của logo */
.mh .mh-xanh-nhat  { fill: #44dee7; fill-opacity: .22; }
.mh .mh-vang       { fill: #c9dd2e; }                       /* vàng chanh của logo */
.mh .mh-vang-nhat  { fill: #c9dd2e; fill-opacity: .22; }
.mh .mh-trang      { fill: #effbfc; }
.mh .mh-trang-nhat { fill: #ffffff; fill-opacity: .1; }
.mh .mh-net-xanh, .mh .mh-net-vang, .mh .mh-net-trang, .mh .mh-net-mo { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mh .mh-net-xanh   { stroke: #44dee7; }
.mh .mh-net-vang   { stroke: #c9dd2e; }
.mh .mh-net-trang  { stroke: #effbfc; }
.mh .mh-net-mo     { stroke: #ffffff; stroke-opacity: .28; }
.mh .mh-manh       { stroke-width: 2; }                     /* thêm vào cạnh lớp nét: nét mảnh */
.mh .mh-dam        { stroke-width: 7; }                     /* thêm vào cạnh lớp nét: nét đậm */
.mh .mh-chu        { fill: #effbfc; font-family: var(--tieu-de); font-weight: 700; font-size: 14px; letter-spacing: 1.5px; }

/* ── Chi tiết từng lĩnh vực: hình một bên, chữ một bên, so le; sau hình là hai lớp ngọc + chanh lệch góc ── */
.ct-ds { display: grid; gap: clamp(3.2rem, 7vw, 5.5rem); }
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center; scroll-margin-top: 20px; }   /* phần chừa cho đầu trang đã có ở scroll-padding-top của html */
.ct:nth-child(even) .ct__hinh { order: 2; }
@media (min-width: 861px) { .ct:nth-child(even) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }   /* hàng chẵn đảo cả tỉ lệ cột → hình hàng nào cũng cùng cỡ */
.ct__hinh { --lech: clamp(7px, 1.1vw, 13px); padding: 0 calc(var(--lech) * 2) calc(var(--lech) * 2) 0; }
.ct__hinh .mh { box-shadow: var(--lech) var(--lech) 0 var(--ngoc), calc(var(--lech) * 2) calc(var(--lech) * 2) 0 var(--chanh); }
@media (min-width: 861px) {   /* hàng chẵn (hình bên phải): hai lớp lệch về bên trái */
  .ct:nth-child(even) .ct__hinh { padding: 0 0 calc(var(--lech) * 2) calc(var(--lech) * 2); }
  .ct:nth-child(even) .ct__hinh .mh { box-shadow: calc(var(--lech) * -1) var(--lech) 0 var(--ngoc), calc(var(--lech) * -2) calc(var(--lech) * 2) 0 var(--chanh); }
}
.ct__so { display: flex; align-items: center; gap: .7rem; font-family: var(--tieu-de); font-weight: 800; font-size: .95rem; line-height: 1.2; letter-spacing: .12em; color: var(--xanh-dam); margin-bottom: .6rem; }
.ct__so::after { content: ""; width: 46px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ngoc) 50%, var(--chanh) 50%); }
.ct h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.25; letter-spacing: -.015em; margin-bottom: 1rem; }
.ct h4 { margin: 1.6rem 0 .8rem; }
.ct .lien-ket { margin-top: .6rem; }
.ds-tich { display: grid; gap: .55rem; }
.ds-tich li { position: relative; padding-left: 1.9rem; color: var(--chu); font-size: .98rem; line-height: 1.55; }
.ds-tich li::before { position: absolute; left: 0; top: .14em; }

/* ── Giải pháp theo nhu cầu ── */
.luoi-gp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.luoi-gp > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* số mục lẻ: mục cuối kín hàng */
.gp {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.gp__so {
  display: grid; place-items: center; min-width: 46px; height: 32px; padding-inline: .6rem; border-radius: 8px;
  background: var(--chanh); color: var(--dem);
  font-family: var(--tieu-de); font-weight: 800; font-size: .88rem; line-height: 1; letter-spacing: .08em;
  margin-bottom: 1.1rem;
}
.gp h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.gp p:not(.gp__so) { font-size: .97rem; max-width: 72ch; }
.gp__gom { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.2rem; }
.gp__gom li { font-size: .82rem; font-weight: 500; line-height: 1.3; color: var(--reu); background: var(--chanh-nhat); border: 1px solid #dbe69a; border-radius: 8px; padding: .3rem .65rem; }
@media (min-width: 1041px) {   /* đúng 3 mục: một hàng ba cột */
  .luoi-gp:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .luoi-gp:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; }
}

/* ── Tầm nhìn · sứ mệnh · giá trị ── */
.ba-o { display: grid; grid-template-columns: repeat(var(--cot, 3), minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.2rem, 5vw, 3.5rem); }
.ba-o li { background: var(--nen-2); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.5rem 1.4rem 1.6rem; }
.ba-o svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--dem); margin-bottom: 1rem; }
.ba-o h3 { margin-bottom: .45rem; }
.ba-o p { font-size: .97rem; }

/* ── Dự án tiêu biểu · khách hàng nói gì (chỉ hiện khi có dữ liệu thật) ── */
.luoi-da, .luoi-yk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }   /* tự co theo số mục: 1 mục không nép 1/3 hàng */
@media (min-width: 900px) { .luoi-da > :only-child, .luoi-yk > :only-child { max-width: 760px; } }   /* chỉ chặn khi khoảng trống bên phải đủ lớn để thấy là chủ ý; hẹp hơn thì thẻ đơn kín hàng */
.da { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo); padding: calc(1.6rem + 6px) 1.6rem 1.5rem; }
.da__khach { font-family: var(--tieu-de); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--xanh-dam); margin-bottom: .5rem; }
.da h3 { margin-bottom: .5rem; }
.da p:not(.da__khach) { font-size: .97rem; }
.da .lien-ket { margin-top: auto; padding-top: .7rem; }
.yk { margin: 0; display: flex; flex-direction: column; background: var(--nen-2); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.7rem 1.6rem 1.5rem; }
.yk blockquote { margin: 0; }
.yk blockquote::before { content: "“"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 3.6rem; line-height: .72; color: var(--xanh-dam); margin-bottom: .35rem; }
.yk blockquote p { color: var(--chu); font-size: 1.02rem; }
.yk figcaption { display: grid; gap: .1rem; margin-top: auto; padding-top: 1.3rem; font-size: .92rem; }
.yk figcaption b { font-family: var(--tieu-de); color: var(--dem); }
.yk figcaption span { color: var(--chu-mo); }

/* ── Dải kêu gọi: một tấm tối bo góc nằm giữa trang, góc phải dưới là dải uốn nhiều lớp ── */
.keu-goi { padding: clamp(2.4rem, 6vw, 4rem) 20px; background: var(--nen); }
.phan:not(.phan--nhat):not(.phan--dem) + .keu-goi { padding-top: 0; }   /* đứng sau một phần nền trắng: phần đó đã có khoảng đệm dưới */
.keu-goi:has(+ .phan:not(.phan--nhat):not(.phan--dem)) { padding-bottom: 0; }   /* …đứng trước một phần nền trắng cũng vậy */
.keu-goi__trong {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.7rem;
  max-width: calc(var(--rong) - 40px);
  padding: clamp(2rem, 5vw, 3.6rem);
  border-radius: clamp(20px, 3vw, 30px);
  background: var(--dem); color: var(--tren-dem);
}
.keu-goi__trong::after {
  content: ""; position: absolute; z-index: -1; right: 0; bottom: 0;
  width: min(44%, 520px); aspect-ratio: 520 / 360;
  background: url(../assets/nen-dai-goc.svg) no-repeat right bottom / contain;
}
.keu-goi h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); max-width: 24ch; }
.keu-goi p { color: var(--tren-dem-mo); margin-top: .8rem; max-width: 54ch; }
.keu-goi .nut { flex-shrink: 0; }
@media (min-width: 641px) {
  .keu-goi__trong { padding-right: min(46%, 540px); }   /* chữ + nút nằm bên trái, chừa bên phải cho dải uốn */
}

/* ── Hỏi đáp ── */
.hd { display: grid; gap: .75rem; }
.hd__muc { background: var(--nen); border: 1px solid var(--vien); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.hd__muc[open] { border-color: var(--dem); box-shadow: 4px 4px 0 var(--ngoc); }
.hd summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  min-height: 56px; padding: .95rem 1.2rem; border-radius: 13px;
  font-family: var(--tieu-de); font-weight: 700; font-size: 1.02rem; line-height: 1.4; color: var(--dem);
}
.hd summary span { text-wrap: balance; }
.hd summary::-webkit-details-marker { display: none; }
.hd summary::after {
  content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--ngoc-nhat); color: var(--dem); font-family: var(--noi-dung); font-size: 1.25rem; font-weight: 500; line-height: 1; transition: background .2s, color .2s;
}
.hd__muc[open] summary::after { content: "−"; background: var(--dem); color: var(--chanh); }
.hd summary:hover { color: var(--xanh-dam); }
.hd__tl { padding: 0 1.2rem 1.2rem; max-width: 72ch; }

/* ── Cuối trang (mảng tối): mép trên là dải uốn lật ngược chiều phần mở đầu; thương hiệu = dấu "S" + tên ── */
.chan-trang { background: var(--dem); color: var(--tren-dem); }
.chan-trang::before {
  content: ""; display: block; height: clamp(40px, 7vw, 104px); margin-bottom: -1px;
  background: var(--nen) url(../assets/nen-dai.svg) no-repeat center bottom / 100% 100%;
  transform: scaleX(-1);
}
.chan-trang p { color: var(--tren-dem-mo); font-size: .93rem; }
.chan-trang p + p { margin-top: .35rem; }
.chan-trang strong { color: #fff; font-family: var(--tieu-de); font-weight: 700; letter-spacing: .01em; }
.chan-trang__trong { display: grid; grid-template-columns: 1.15fr 1.3fr .8fr 1.3fr; gap: clamp(1.6rem, 4vw, 3.2rem); padding-block: clamp(2.2rem, 5vw, 3.4rem) clamp(2.4rem, 5vw, 3.4rem); }
.chan-trang__trong > * { min-width: 0; }
.chan-trang__dau { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.chan-trang__dau img { flex: none; width: auto; height: 56px; }
.chan-trang__dau b { font-family: var(--tieu-de); font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: .005em; color: #fff; overflow-wrap: anywhere; }
.chan-trang__gt p { font-size: .9rem; max-width: 36ch; }
.chan-trang h2 { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--chanh); margin-bottom: 1rem; }
.chan-trang__cot { display: grid; align-content: start; }
.chan-trang__cot a { color: var(--tren-dem-mo); font-size: .95rem; line-height: 1.45; padding: .38rem 0; transition: color .2s; }
.chan-trang__cot a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--ngoc); text-underline-offset: 4px; }
.chan-trang__tt p:first-of-type { text-wrap: balance; }
.chan-trang__tt p a { display: inline-block; padding: .6rem 0; margin-block: -.35rem; color: var(--tren-dem); text-decoration: underline; text-underline-offset: 3px; }
.chan-trang__duoi { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; padding-bottom: 1rem; }   /* nút đổi ngôn ngữ nằm sát dòng bản quyền bên trái: góc phải dành cho nút nổi */
.chan-trang__duoi::before { content: ""; flex: 0 0 100%; border-top: 1px solid var(--vien-dem); }
.chan-trang__duoi p { font-size: .85rem; }

/* ── Nút nổi góc màn hình: Zalo, gọi điện, về đầu trang ── */
.noi { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: grid; gap: .6rem; justify-items: end; }
.noi__nut {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px;
  box-shadow: 0 12px 22px -10px rgba(13, 35, 39, .55); transition: transform .2s;
  font-family: var(--tieu-de); font-weight: 800; font-size: .74rem;
}
.noi__nut:hover { transform: translateY(-3px); }
.noi__nut svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.noi__nut--zalo { background: #0068ff; color: #fff; }
.noi__nut--goi { background: var(--ngoc); color: var(--dem); border: 2px solid var(--dem); }
.noi__nut--len { background: var(--nen); color: var(--dem); border: 2px solid var(--dem); width: 46px; height: 46px; border-radius: 13px; }
.noi__nut:focus-visible { outline-color: var(--dem); box-shadow: 0 0 0 9px #fff; }   /* nút nổi đè lên cả nền sáng lẫn nền tối: vòng đậm kẹp giữa hai vòng trắng */

/* ── Hiện dần khi cuộn tới (chỉ khi có JS) ── */
.js .hien-dan { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.js .hien-dan.thay { opacity: 1; transform: none; }
.js .luoi-gp .hien-dan:nth-child(even), .js .ba-o .hien-dan:nth-child(2), .js .luoi-dv .hien-dan:nth-child(3n + 2), .js .nam-sao .hien-dan:nth-child(2), .js .buoc .hien-dan:nth-child(2) { transition-delay: .08s; }
.js .ba-o .hien-dan:nth-child(3), .js .luoi-dv .hien-dan:nth-child(3n), .js .nam-sao .hien-dan:nth-child(3), .js .buoc .hien-dan:nth-child(3) { transition-delay: .16s; }
.js .nam-sao .hien-dan:nth-child(4), .js .buoc .hien-dan:nth-child(4), .js .ba-o .hien-dan:nth-child(4) { transition-delay: .24s; }
.js .nam-sao .hien-dan:nth-child(5) { transition-delay: .32s; }

/* ── Máy tính màn thấp (1366×768, 1280×720): bớt đệm + hạ dải uốn để nút kêu gọi nằm trong màn đầu ── */
@media (min-width: 901px) and (max-height: 800px) {
  h1 { font-size: clamp(1.9rem, .6rem + 2.8vw, 2.9rem); }
  .mo-dau__trong { padding-block: 1.6rem 1.2rem; }
  .mo-dau__dai { height: clamp(48px, 6vw, 88px); }
  .mo-dau__logo { max-width: 400px; }
}
/* ── Vừa hết kiểu menu điện thoại: đầu trang chật nhất, thu khoảng cách giữa các mục để đủ chỗ cho nút đổi ngôn ngữ ── */
@media (min-width: 901px) and (max-width: 1040px) {
  .menu { gap: .8rem; font-size: .93rem; }
}
/* ── Nhãn tiếng Anh ở thẻ thông tin dài hơn ("Company name", "Business hours"): nới cột nhãn để khỏi gãy dòng ── */
@media (min-width: 641px) {
  .ho-so dl > div:lang(en) { grid-template-columns: 124px minmax(0, 1fr); }
}
/* ── Màn hình vừa ── */
@media (max-width: 1040px) {
  .luoi-dv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chan-trang__trong { grid-template-columns: 1fr 1fr; }
  .ba-o.cot-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nam-sao { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nam-sao.cot-1 { grid-template-columns: 1fr; }
  .nam-sao.cot-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buoc.cot-1 { grid-template-columns: 1fr; }
  .buoc li:nth-child(even)::before { display: none; }   /* hai cột: đường kẻ chỉ nối bước lẻ sang bước chẵn cùng hàng */
}
/* Đúng 5 mục ở màn vừa: 3 trên + 2 dưới kín hai mép (không để hở 1 ô) */
@media (min-width: 641px) and (max-width: 1040px) {
  .nam-sao.cot-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nam-sao.cot-5 li { grid-column: span 2; }
  .nam-sao.cot-5 li:nth-child(n + 4) { grid-column: span 3; }
  .nam-sao.cot-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ── Menu kiểu điện thoại (nút ba gạch → bảng thả xuống nền trắng) ── */
@media (max-width: 900px) {
  .nut-menu { display: block; }
  .menu {
    position: absolute; top: var(--cao-dau); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nen); border-bottom: 1px solid var(--vien);
    padding: .2rem 20px 1.5rem; font-size: 1.02rem;
    box-shadow: 0 26px 40px -24px rgba(13, 35, 39, .45);
    max-height: calc(100vh - var(--cao-dau));
    max-height: calc(100dvh - var(--cao-dau));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .menu.mo { display: flex; }
  .menu > a:not(.nut) { display: flex; align-items: center; min-height: 52px; padding: .6rem 0; border-bottom: 1px solid var(--vien); color: var(--chu); font-weight: 600; text-align: left; }
  .menu > a:not(.nut):hover { box-shadow: none; color: var(--xanh-dam); }
  .menu > a[aria-current], .menu > a[aria-current]:hover { box-shadow: inset 4px 0 0 var(--xanh-dam); padding-left: .9rem; }
  .menu .nut { margin: 1.1rem 4px 0 0; min-height: 48px; }
  .menu .doi-nn { align-self: flex-start; margin-top: 1.1rem; }
  .doi-nn__muc { min-width: 48px; min-height: 44px; font-size: .84rem; }
  .dau-trang:has(.menu.mo) { background: var(--nen); border-color: var(--vien); }
  .nut-menu[aria-expanded="true"] span { width: 26px; }
  .nut-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nut-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nut-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .chan-trang__cot a { padding: .7rem 0; }   /* vùng bấm ≥ 44px */
  /* Không có JS: không có nút mở menu → đầu trang nằm trong dòng chảy, các mục menu xếp hàng ngang tự xuống dòng */
  html:not(.js) { scroll-padding-top: 0; }
  html:not(.js) .dau-trang { position: static; }
  html:not(.js) .dau-trang__trong { height: auto; flex-wrap: wrap; padding-block: .6rem; }
  html:not(.js) .menu { position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 1.2rem; width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; box-shadow: none; background: none; font-size: .97rem; }
  html:not(.js) .menu > a:not(.nut) { min-height: 44px; border: 0; }
  html:not(.js) .menu .nut, html:not(.js) .menu .doi-nn { margin: .3rem 0; }
  html:not(.js) .mo-dau { padding-top: 0; }
}
@media (max-width: 860px) {
  .hai-cot { grid-template-columns: minmax(0, 1fr); }
  .ct { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .ct:nth-child(even) .ct__hinh { order: 0; }
  .ct__hinh { max-width: 560px; }
  .dai-so__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dai-so__luoi.cot-1 { grid-template-columns: minmax(0, 1fr); }
  .dai-so__luoi.cot-3 li:nth-child(3) { grid-column: 1 / -1; }
  .ba-o, .ba-o[class] { grid-template-columns: minmax(0, 1fr); }
  .ba-o li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1.1rem; align-content: start; padding: 1.3rem 1.2rem; }
  .ba-o svg { grid-row: span 2; margin: .1rem 0 0; }
  .ba-o li > :not(svg) { grid-column: 2; }
}
/* ── Phần mở đầu xếp một cột: chữ trước, logo sau ── */
@media (min-width: 721px) and (max-width: 900px) {
  .mo-dau__trong { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
}
@media (max-width: 720px) {
  .mo-dau__trong { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding-block: 2rem 1.2rem; }
  .mo-dau__logo { max-width: min(76%, 320px); }
}
/* ── Điện thoại ── */
@media (max-width: 640px) {
  :root { --cao-dau: 64px; }
  .thuong-hieu img { height: 40px; }
  .thuong-hieu__chu b { font-size: 1.08rem; }
  .luoi-dv, .luoi-gp, .buoc, .buoc[class], .nam-sao, .nam-sao[class] { grid-template-columns: minmax(0, 1fr); }
  .chan-trang__trong { grid-template-columns: minmax(0, 1fr); }
  .mo-dau .hang-nut .nut, #nut-lien-he .nut { flex: 1 1 100%; margin-right: 4px; }   /* chừa 4px bên phải cho lớp bóng lệch */
  .keu-goi .nut { align-self: stretch; margin-right: 4px; }
  .keu-goi__trong { padding-bottom: calc(1.4rem + min(62%, 320px) * .66); }   /* chừa đáy tấm cho dải uốn (cao ≈ 0,69 × rộng), nút không đè lên */
  .keu-goi__trong::after { width: min(62%, 320px); }
  .diem-nhan { flex-direction: column; gap: .5rem; }
  .noi { right: 12px; bottom: 12px; }
  .nam-sao li { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 1rem; align-content: start; padding: 1.2rem; }
  .nam-sao svg { grid-row: span 2; margin: .1rem 0 0; }
  .nam-sao li > :not(svg) { grid-column: 2; }
  .buoc { row-gap: 2rem; }
  .buoc li::before, .buoc li:nth-child(even)::before, .buoc li:last-child::before { display: block; }   /* một cột: bước nào cũng có đường kẻ bên phải ô số */
  .chan-trang__duoi { padding-right: 64px; }   /* chữ không chui xuống dưới nút nổi */
  .ho-so dl > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .ban-do iframe { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chay-chu__dai { animation: none; }
  .js .hien-dan { opacity: 1; transform: none; transition: none; }
  .nut, .the, .gp, .noi__nut, .lien-ket::after, .doi-nn__muc, .nut-menu span, .dau-trang, .bo-qua, .hd__muc { transition: none; }
  .nut:hover, .nut:active, .the:hover, .gp:hover, .noi__nut:hover, .lien-ket:hover::after { transform: none; }
}
/* ── Bản in: bỏ phần điều hướng + trang trí, mảng tối in thành chữ đen nền trắng ── */
@media print {
  .dau-trang, .bo-qua, .noi, .doi-nn, .chay-chu, .mo-dau__nen, .mo-dau__dai, .hang-nut, .the__them, .ct .lien-ket, .the--dem .nut, .keu-goi .nut, .ban-do, .chan-trang::before, .keu-goi__trong::after, .chan-trang__cot:not(.chan-trang__tt) { display: none !important; }
  body { font-size: 11pt; line-height: 1.5; }
  .js .hien-dan { opacity: 1; transform: none; }
  .mo-dau { min-height: 0; padding-top: 0; }
  .mo-dau__trong { display: block; padding-block: 0 1rem; }
  .mo-dau__logo { max-width: 200px; margin-top: 1rem; }
  .mo-dau__logo img { filter: none; }
  .phan, .dai-so, .keu-goi { padding-block: 1rem; background: none; }
  .phan--dem, .the--dem, .keu-goi__trong, .chan-trang { background: none; color: #000; }
  .keu-goi__trong { padding: 0; }
  .phan--dem :is(h2, h3, p, strong), .phan--dem .nhan, .the--dem :is(h3, p, strong), .keu-goi :is(h2, p, strong), .chan-trang :is(h2, p, strong, b) { color: #000; }
  .the, .gp, .ct, .ho-so, .hd__muc, .da, .yk, .nam-sao li, .ba-o li, .buoc li { break-inside: avoid; box-shadow: none; }
  .nam-sao li { border-color: var(--vien); }
  .ct__hinh { max-width: 300px; padding: 0; }
  .ct__hinh .mh { box-shadow: none; }
  .chan-trang__trong { display: block; padding-block: 1rem; }
  .chan-trang__dau img { height: 40px; }
}