html,body{margin:0;padding:0;background:#f5f5f5}
/* ============================================================
   VỎ BÀI SOHA · tokens, 8 skin, khung, linh kiện
   Mọi lớp mang tiền tố mgd-. Tokens đặt trên .mgd-bai (không đặt trên :root)
   để nhúng vào CMS không đụng CSS của trang Soha.
   Linh kiện chỉ dùng biến --mgd-*, không gõ cứng màu, phông.
   ============================================================ */
.mgd-bai{
  --mgd-nen:#ffffff;--mgd-chu:#1f1f1f;--mgd-phu:#6b6b6b;--mgd-ke:#e6e6e6;
  --mgd-nhan:#ea3939;--mgd-nhan-2:#333333;--mgd-hop:#f7f5f2;--mgd-tren-nhan:#ffffff;
  --mgd-tit:"Phudu",system-ui,sans-serif;--mgd-than:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mgd-chu-thich:var(--mgd-than);
  --mgd-co:18px;--mgd-dong:1.75;--mgd-can:justify;--mgd-cot:720px;--mgd-rong:1280px;
  --mgd-tit-w:900;--mgd-tit-hoa:uppercase;
  --mgd-nhan-chu:#d32f2f;--mgd-nhan-nen:#d32f2f;--mgd-tren-nhan-2:#ffffff;
  /* chuyển động: chuẩn chung, không phải bản sắc (Carbon productive; WCAG 2.2.2, 2.3.1, 2.3.3) */
  --mgd-cd-tuc:100ms;--mgd-cd-nhanh:150ms;--mgd-cd-vua:250ms;--mgd-cd-cham:400ms;--mgd-cd-dai:800ms;
  --mgd-gt-vao:cubic-bezier(0,0,.38,.9);--mgd-gt-ra:cubic-bezier(.2,0,1,.9);--mgd-gt-doi:cubic-bezier(.2,0,.38,.9);--mgd-gt-bieu-cam:cubic-bezier(.4,.14,.3,1);
  container:mgdbai/inline-size;position:relative;font-family:var(--mgd-than);color:var(--mgd-chu);background:var(--mgd-nen);
  max-width:1920px;margin:0 auto;text-align:left;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  font-size:var(--mgd-co);line-height:var(--mgd-dong)}
.mgd-bai *{box-sizing:border-box}
.mgd-bai img{max-width:100%;display:block;height:auto}
.mgd-bai figure{margin:0}
.mgd-bai .mgd-cot,.mgd-bai .mgd-rong{margin-inline:auto}
.mgd-bai figure.mgd-anh{margin-block:6px}
.mgd-bai button{font:inherit;cursor:pointer;color:inherit}
.mgd-bai a{color:var(--mgd-nhan-chu)}
.mgd-bai :focus-visible{outline:3px solid var(--mgd-nhan);outline-offset:2px}
.mgd-an-chu{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tám skin nay là tám công thức mẫu trong nhan-dien/mau-san.json; máy dựng sinh luật token cho từng bài. */

/* ---------- khung ---------- */
.mgd-than{padding-bottom:48px;font-size:var(--mgd-co)}
.mgd-khoi{padding:10px 0}
.mgd-cot{max-width:calc(var(--mgd-cot) + 40px);margin-inline:auto;padding-inline:20px}
.mgd-rong{max-width:calc(var(--mgd-rong) + 40px);margin-inline:auto;padding-inline:20px}
.mgd-tran{width:100%}
@container mgdbai (max-width:640px){.mgd-than{--mgd-co:17px;--mgd-can:left}.mgd-cot,.mgd-rong{padding-inline:16px}}

/* thanh điều hướng Soha: cao 45px, nền đen */
.mgd-dh{position:sticky;top:0;z-index:50;height:45px;background:#000;display:flex;align-items:center;justify-content:space-between;font-family:Arial,Helvetica,sans-serif;line-height:1}
.mgd-dh-ben{display:flex;align-items:center;height:100%}
.mgd-bai .mgd-dh a,.mgd-bai .mgd-dh button{color:#fff;text-decoration:none}
.mgd-dh-lui{width:45px;height:45px;background:#007f74;display:flex;align-items:center;justify-content:center}
.mgd-dh-lui svg,.mgd-dh-chia svg{fill:currentColor}
.mgd-dh-lui svg{width:20px;height:20px}
.mgd-dh-soha{margin-left:15px;display:flex;align-items:center}
.mgd-dh-soha img{height:24px;width:auto}
.mgd-dh-giua{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;pointer-events:none}
.mgd-dh-giua img{height:26px;width:auto}
.mgd-dh-phai{padding-right:12px}
.mgd-dh-chia{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;background:none;border:0;min-height:40px;padding:0 6px}
.mgd-dh-chia svg{width:14px;height:14px}
@container mgdbai (max-width:768px){.mgd-dh-giua{display:none}}

/* dải nhãn tài trợ: vòng bất biến, không theo skin (chữ, vị trí, màu cố định) */
.mgd-tt{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:#f2f2f2;color:#222;font:600 14px/1.4 Arial,Helvetica,sans-serif;border-bottom:1px solid #d9d9d9;text-align:center}
.mgd-tt b{font-weight:700}
.mgd-tt-doi-tac{background:#fff4d6;border-bottom-color:#e2b84f}
.mgd-tt-doi-tac b{letter-spacing:.06em}
.mgd-tt-logo{height:24px;width:auto;display:inline-block}

/* ---------- khối nền ---------- */
.mgd-bia{position:relative}
.mgd-bia-anh{position:relative;width:100%;max-width:1920px;margin:0 auto;overflow:hidden}
.mgd-bia-anh img{width:100%}
.mgd-bia-anh picture{display:block}
.mgd-bia-chu{max-width:calc(var(--mgd-rong) + 40px);margin:0 auto;padding:34px 20px 6px;text-align:center}
.mgd-bia-k{display:block;color:var(--mgd-nhan-chu);font-family:var(--mgd-tit);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:15px;margin-bottom:10px}
.mgd-bia-t{font-family:var(--mgd-tit);font-weight:var(--mgd-tit-w);text-transform:var(--mgd-tit-hoa);color:var(--mgd-chu);font-size:clamp(28px,4.4cqi,68px);line-height:1.18;margin:0}
.mgd-bia-p{font-size:clamp(18px,1.8cqi,24px);line-height:1.5;color:var(--mgd-phu);margin:14px auto 0;max-width:900px}
.mgd-bia-a{font-size:15px;color:var(--mgd-phu);margin-top:14px;font-family:var(--mgd-chu-thich)}
.mgd-bia-ct{font-family:var(--mgd-chu-thich);font-size:14px;font-style:italic;color:var(--mgd-phu);text-align:center;padding:6px 20px 0;margin:0}
.mgd-bia-de .mgd-bia-chu{position:absolute;left:0;right:0;bottom:0;max-width:none;padding:90px 20px 36px;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.78))}
.mgd-bia-de .mgd-bia-chu>*{max-width:var(--mgd-rong);margin-left:auto;margin-right:auto}
.mgd-bia-de .mgd-bia-t,.mgd-bia-de .mgd-bia-p,.mgd-bia-de .mgd-bia-a{color:#fff}
@container mgdbai (max-width:640px){.mgd-bia-de .mgd-bia-chu{position:static;background:none;padding-top:22px}.mgd-bia-de .mgd-bia-t{color:var(--mgd-chu)}.mgd-bia-de .mgd-bia-p,.mgd-bia-de .mgd-bia-a{color:var(--mgd-phu)}}
.mgd-sapo{display:flow-root;font-weight:700;font-size:1.06em;line-height:1.7;margin:6px 0 4px;text-align:var(--mgd-can)}
.mgd-hoa-dau::first-letter{float:left;font-family:var(--mgd-tit);font-weight:900;font-size:4.1em;line-height:.86;padding:6px 10px 0 0;color:var(--mgd-nhan)}
.mgd-doan p{margin:0 0 1em;text-align:var(--mgd-can)}
.mgd-doan p:last-child{margin-bottom:0}
.mgd-tm{font-family:var(--mgd-tit);font-weight:var(--mgd-tit-w);text-transform:var(--mgd-tm-hoa,uppercase);color:var(--mgd-tm-mau,var(--mgd-nhan));text-align:var(--mgd-tm-can,center);line-height:1.25;margin:26px 0 4px;font-size:clamp(24px,3.4cqi,34px)}
.mgd-tm::after{content:"";display:var(--mgd-tm-gach,none);width:80px;height:6px;border-radius:3px;background:var(--mgd-nhan);margin:12px var(--mgd-tm-gach-le,auto) 0}
h3.mgd-tm{font-size:clamp(20px,2.6cqi,24px);text-transform:none;text-align:left;color:var(--mgd-chu);margin-top:16px}
h3.mgd-tm::after{display:none}
.mgd-ds{margin:0;padding-left:1.4em;text-align:var(--mgd-can)}
.mgd-ds li{margin:4px 0;padding-left:4px}
.mgd-ds li::marker{color:var(--mgd-nhan);font-weight:700}
.mgd-anh{margin:6px auto}
.mgd-anh-ct,.mgd-ct{font-family:var(--mgd-chu-thich);font-size:15px;font-style:italic;color:var(--mgd-phu);margin:8px auto 0;line-height:1.5;text-align:center}
.mgd-tran .mgd-anh-ct,.mgd-rong .mgd-anh-ct{max-width:calc(var(--mgd-cot) + 40px);padding-inline:20px}
.mgd-anh-doi{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:12px}
.mgd-anh-doi img{width:100%;aspect-ratio:4/3;object-fit:cover}
@container mgdbai (max-width:640px){.mgd-anh-doi{grid-template-columns:1fr}}
.mgd-video-khung{position:relative;aspect-ratio:16/9;background:#0d0f12;overflow:hidden;margin:0 auto}
.mgd-video-doc{aspect-ratio:9/16;max-width:420px}
.mgd-video-vuong{aspect-ratio:1/1;max-width:640px}
.mgd-video-khung iframe,.mgd-video-khung video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
.mgd-ke{border:0;margin:18px auto;height:1px;background:var(--mgd-ke);max-width:var(--mgd-cot)}
.mgd-ke-ba-cham{background:none;height:auto;text-align:center;color:var(--mgd-nhan);letter-spacing:.8em;font-size:20px;line-height:1}
.mgd-ke-ba-cham::before{content:"\2022\2022\2022"}
.mgd-gc{margin:24px 0 8px;font-family:var(--mgd-chu-thich);font-size:15px;line-height:1.7;color:var(--mgd-phu);text-align:center;border-top:1px solid var(--mgd-ke);padding-top:18px}
.mgd-gc b{color:var(--mgd-chu)}
.mgd-nguon{font-family:var(--mgd-chu-thich);font-size:14px;font-style:italic;color:var(--mgd-phu);margin:8px 0 0}


/* ---------- dùng chung giữa các linh kiện ---------- */
.mgd-nut{min-height:44px;min-width:44px;padding:8px 16px;border-radius:6px;border:1px solid var(--mgd-ke);background:var(--mgd-hop);color:var(--mgd-chu);font-weight:600;transition:background-color var(--mgd-cd-nhanh) var(--mgd-gt-doi),border-color var(--mgd-cd-nhanh) var(--mgd-gt-doi)}
.mgd-nut:disabled{opacity:.4;cursor:default}
/* .mgd-bai .mgd-nut-chinh: phải mạnh hơn .mgd-bai button{color:inherit}, không thì chữ nút chính mất màu tren-nhan (lỗi của bản cũ) */
.mgd-bai .mgd-nut-chinh{background:var(--mgd-nhan-nen);color:var(--mgd-tren-nhan);border-color:var(--mgd-nhan-nen)}
.mgd-bd-t{font-family:var(--mgd-tit);font-weight:700;font-size:clamp(19px,2.4cqi,24px);line-height:1.3;margin:0 0 4px}
.mgd-bd-dv{font-size:14px;color:var(--mgd-phu);margin:0 0 12px}
.mgd-bang-gon{margin-top:10px;font-size:15px}
.mgd-bang-gon summary{cursor:pointer;color:var(--mgd-phu);min-height:40px;display:flex;align-items:center}
.mgd-bang-gon table{border-collapse:collapse;width:100%;font-size:15px}
.mgd-bang-gon th,.mgd-bang-gon td{border-bottom:1px solid var(--mgd-ke);padding:6px 8px;text-align:left}
.mgd-buoc-dieu{display:none;justify-content:space-between;gap:8px;margin-top:10px}
.mgd-co-js .mgd-buoc-dieu{display:flex}

/* ---------- phong cách của bài (máy dựng sinh từ nhan-dien/) ---------- */
.mgd-bai{--mgd-nen:#f5f5f5;--mgd-chu:#1d2433;--mgd-phu:#5d6577;--mgd-ke:#dde3ee;--mgd-nhan:#0057d9;--mgd-nhan-2:#daa520;--mgd-hop:#ffffff;--mgd-tren-nhan:#ffffff;--mgd-than:"Noto Serif",Georgia,serif;--mgd-chu-thich:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mgd-tm-hoa:none;--mgd-nhan-chu:#0057d9;--mgd-nhan-nen:#0057d9;--mgd-tren-nhan-2:#141414}
/* ---------- P3 biểu đồ (chữ, nhãn là HTML thật; chỉ nét vẽ là SVG) ---------- */
.mgd-bd-thanh{display:grid;grid-template-columns:minmax(80px,max-content) 1fr;gap:8px 12px;align-items:center;margin:0;padding:0;list-style:none}
.mgd-bd-thanh li{display:contents}
.mgd-bd-nhan{font-size:15px;line-height:1.3}
.mgd-bd-ray{display:flex;align-items:center;gap:8px;min-width:0}
.mgd-bd-vach{height:26px;background:var(--mgd-nhan);border-radius:0 3px 3px 0;min-width:2px;transition:width var(--mgd-cd-dai) var(--mgd-gt-doi)}
.mgd-bd-gt{font-weight:700;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mgd-bd-cot{display:flex;align-items:flex-end;gap:6px;height:280px;border-bottom:2px solid var(--mgd-chu);padding:24px 0 0;margin:0;list-style:none;overflow-x:auto}
.mgd-bd-cot li{flex:1 1 0;min-width:30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.mgd-bd-cot .mgd-bd-vach{width:72%;max-width:64px;height:auto;border-radius:3px 3px 0 0;transition:height var(--mgd-cd-dai) var(--mgd-gt-doi)}
.mgd-bd-cot .mgd-bd-gt{font-size:13px;margin-bottom:4px}
.mgd-bd-trucx{display:flex;gap:6px;margin:6px 0 0;padding:0;list-style:none;overflow:hidden}
.mgd-bd-trucx li{flex:1 1 0;min-width:30px;text-align:center;font-size:13px;color:var(--mgd-phu);line-height:1.25}
.mgd-bd-vung{position:relative;height:300px;margin:8px 3.4em 0 44px;border-left:1px solid var(--mgd-ke);border-bottom:2px solid var(--mgd-chu)}
@container mgdbai (max-width:640px){.mgd-bd-vung{height:240px}.mgd-bd-cot{height:220px}}
.mgd-bd-vung svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mgd-bd-luoi{position:absolute;left:0;right:0;border-top:1px dashed var(--mgd-ke)}
.mgd-bd-luoi span{position:absolute;right:calc(100% + 6px);top:-.7em;font-size:12px;color:var(--mgd-phu);white-space:nowrap}
.mgd-bd-diem{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--mgd-nen);border:2px solid var(--mgd-nhan)}
.mgd-bd-mc{position:absolute;width:24px;height:24px;margin:-30px 0 0 -12px;border-radius:50%;background:var(--mgd-chu);color:var(--mgd-nen);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mgd-bd-x{position:absolute;top:calc(100% + 6px);transform:translateX(-50%);font-size:12px;color:var(--mgd-phu);white-space:nowrap}
.mgd-bd-cuoi{position:absolute;transform:translate(6px,-50%);font-size:13px;font-weight:700;white-space:nowrap}
.mgd-bd-cg{margin:36px 0 0;padding:0;list-style:none;font-size:15px;line-height:1.5}
.mgd-bd-cg li{display:flex;gap:10px;margin:6px 0}
.mgd-bd-cg b{flex:none;width:24px;height:24px;border-radius:50%;background:var(--mgd-chu);color:var(--mgd-nen);font-size:13px;display:flex;align-items:center;justify-content:center}
.mgd-bd-ch{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;margin:0 0 8px}
.mgd-bd-ch span{display:inline-flex;align-items:center;gap:6px}
.mgd-bd-ch i{width:14px;height:4px;border-radius:2px;display:inline-block}

@media screen{.mgd-co-js .mgd-cho .mgd-bd-ray .mgd-bd-vach{width:0!important}.mgd-co-js .mgd-cho .mgd-bd-cot .mgd-bd-vach{height:0!important}}
/* ---------- chung ---------- */
.mgd-co-js .mgd-chi-khong-js{display:none}
.mgd-dong .mgd-khoi{opacity:0;transform:translateY(18px);transition:opacity var(--mgd-cd-cham) var(--mgd-gt-vao),transform var(--mgd-cd-cham) var(--mgd-gt-vao)}
/* thang nghiêm 4–5: chỉ mờ dần, không trượt, không trang trí chuyển động */
.mgd-bai[data-nghiem="4"] .mgd-dong .mgd-khoi,.mgd-bai[data-nghiem="5"] .mgd-dong .mgd-khoi,.mgd-bai[data-nghiem="4"].mgd-dong .mgd-khoi,.mgd-bai[data-nghiem="5"].mgd-dong .mgd-khoi{transform:none}
.mgd-dong .mgd-khoi.mgd-hien{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mgd-bai *{transition:none!important;animation:none!important}
  .mgd-dong .mgd-khoi{opacity:1;transform:none}
}
@media print{
  .mgd-dh{position:static}
  .mgd-dong .mgd-khoi{opacity:1!important;transform:none!important}
  .mgd-co-js .mgd-bdvn-ke .mgd-bdvn-ds>li,.mgd-co-js .mgd-dtg-vung .mgd-dtg-ds>li,.mgd-co-js .mgd-buoc .mgd-buoc-ds>li,
  .mgd-co-js .mgd-tn .mgd-tn-cau,.mgd-co-js .mgd-tn .mgd-tn-kq,.mgd-co-js .mgd-tn .mgd-tn-kq-ds li{display:block!important}
  .mgd-co-js .mgd-cuon{display:block!important}
  .mgd-co-js .mgd-cuon-visual,.mgd-buoc-nut,.mgd-buoc-dieu,.mgd-tn-dieu,.mgd-bang-loc,.mgd-bang-trang,.mgd-ad-o,.mgd-dh-chia{display:none!important}
  .mgd-co-js .mgd-cuon .mgd-buoc-ds figure{display:block!important}
  .mgd-co-js .mgd-cuon .mgd-buoc-ds>li{min-height:0!important}
  .mgd-bang tr{display:table-row!important}
  .mgd-khoi{break-inside:avoid-page}
}