/* ================================================================
   BỘ NHẬN DIỆN "GIẤY NGỌC" — web cô Nguyễn Thị Giang Thanh (17/10/2026)
   Thế giới: tờ phiếu học tập — giấy kem, mực xanh đen, xanh ngọc làm màu chính,
   san hô chỉ cho hành động và nét nhấn (như nét bút chấm bài).
   Màu lấy từ chính bộ slide của cô: #1F7A70 · #EE7A63 · #173432 · #F1E9D4.
   Không bóng phát sáng, không chữ gradient, không viền trái, không nhãn trên tiêu đề.
   Chuyển động: một khoảnh khắc có chủ đích (mở đầu) + phần tử có việc phải làm
   (bản đồ, thanh so sánh, đồng hồ). Máy báo "giảm chuyển động" vẫn thấy trang sống.
   ================================================================ */
:root{
  --paper:#F5F8F3; --paper-2:#EFE8D3; --mint:#E2EEE7; --white:#FFFDF8;
  --ink:#173432; --ink-2:#3B5552; --ink-3:#4A605D;
  --teal:#1F7A70; --teal-d:#155C54; --teal-l:#BFDCD3;
  --coral:#EE7A63; --coral-d:#A8402C; --coral-l:#F9D9D1;
  --sage:#7B9985;
  --line:#D9D2BE; --line-2:#C5BDA6;
  --serif:'Fraunces','Times New Roman','Noto Serif',serif; /* KHÔNG dùng Georgia làm dự phòng: nó vỡ dấu tiếng Việt khi phông Google bị chặn */
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;scrollbar-color:var(--teal) var(--paper-2)}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.72;color:var(--ink);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-d);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--coral-d)}
.skip-link:hover,.skip-link:focus{color:var(--white)}
::selection{background:var(--teal);color:var(--white)}
input,textarea,select{caret-color:var(--teal)}
::placeholder{color:#44595A;opacity:1}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:8px 14px;border-radius:8px;z-index:100}
.skip-link:focus{left:12px}
p{max-width:60ch}
strong{font-weight:700}

/* ---------- chữ ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.012em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.45rem,5.8vw,4.5rem);line-height:1.14;font-variation-settings:"opsz" 80}
h2{font-size:clamp(1.9rem,3.8vw,2.85rem);line-height:1.18;font-variation-settings:"opsz" 60}
h3{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.3}
.nho{font-size:.9rem;color:var(--ink-3)}
/* chữ gốc viết HOA trong slide: giữ nguyên trong HTML, hiện dạng câu cho dễ đọc */
.thuong{text-transform:lowercase}
.thuong::first-letter{text-transform:uppercase}

/* ---------- đầu trang ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--coral);z-index:70;pointer-events:none}
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo{display:inline-block;padding:10px 0;font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo em{font-style:normal;color:var(--teal)}
#navMenu{display:flex;gap:2px;list-style:none}
#navMenu .item{display:block;padding:9px 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font-size:.95rem;font-weight:500;transition:background .2s,color .2s}
#navMenu .item:hover{background:var(--mint);color:var(--ink)}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;border-radius:10px}
.nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;position:relative;margin:auto;transition:transform .3s}
.nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0}
.nav-bars::before{top:-7px}.nav-bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .nav-toggle{display:block}
  #navMenu{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--paper);padding:8px 20px 16px;border-bottom:1px solid var(--line);display:none}
  #navMenu.open{display:flex}
  #navMenu .item{padding:13px 10px;font-size:1.02rem}
}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:999px;border:2px solid var(--coral);background:var(--coral);color:var(--ink);font:inherit;font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--coral-d);border-color:var(--coral-d);color:var(--white);transform:translateY(-2px)}
.btn.line{background:transparent;border-color:var(--teal);color:var(--teal-d)}
.btn.line:hover{background:var(--teal);border-color:var(--teal);color:var(--white)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- mở đầu trang ---------- */
.crumb{font-size:.92rem;color:var(--ink-3);padding-top:28px}
.crumb a{display:inline-block;padding:12px 0;color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--teal-d);text-decoration:underline}
.crumb svg{width:12px;height:12px;margin:0 8px;vertical-align:-1px;color:var(--line-2)}
.mo-dau{padding:36px 0 clamp(56px,8vw,104px);border-bottom:1px solid var(--line)}
.mo-dau-luoi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,84px);align-items:center;margin-top:28px}
.mo-dau h1{margin-bottom:24px;max-width:13ch}
.mo-dau .lead{font-size:clamp(1.12rem,1.9vw,1.3rem);color:var(--ink-2);max-width:34em}
.mo-dau .phu{font-size:.98rem;color:var(--ink-3);margin-bottom:12px;font-weight:500}
.mo-dau .nut{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hinh{margin:0;position:relative}
.hinh img{width:100%;border-radius:22px;background:var(--paper-2)}
.hinh figcaption{font-size:.9rem;color:var(--ink-3);margin-top:10px}
.mo-dau .hinh img{box-shadow:0 22px 40px -24px rgba(23,52,50,.5)}
.mo-dau .hinh.doc img{aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.mo-dau .hinh.ngang img{aspect-ratio:16/10;object-fit:cover}
/* khoảnh khắc có chủ đích duy nhất của trang: ảnh mở đầu hiện ra như tờ giấy được kéo xuống */
@keyframes mo-anh{from{clip-path:inset(0 0 100% 0 round 22px)}to{clip-path:inset(0 0 0 0 round 22px)}}
@keyframes mo-chu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .mo-dau .hinh img{animation:mo-anh 1.1s var(--ease) .15s both}
.js .mo-dau h1,.js .mo-dau .lead,.js .mo-dau .phu{animation:mo-chu .8s var(--ease) both}
.js .mo-dau .lead{animation-delay:.12s}
@media (max-width:860px){.mo-dau-luoi{grid-template-columns:1fr}.mo-dau .hinh.doc img{aspect-ratio:4/3}}

/* ---------- khối nội dung ---------- */
.muc{padding:clamp(44px,6vw,84px) 0;border-bottom:1px solid var(--line)}
.muc.mint{background:var(--mint)}
.muc.giay{background:var(--paper-2)}
.muc-dau{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,72px);align-items:end;margin-bottom:clamp(32px,5vw,56px)}
.muc-dau p{color:var(--ink-2);font-size:1.08rem}
@media (max-width:820px){.muc-dau{grid-template-columns:1fr;gap:14px}}
.sau{margin-top:1.1em}
.sau+.sau{margin-top:.8em}

/* nhấn chữ: nét bút dạ mỏng dưới chữ, không dùng gradient chữ */
mark.cc-dau{color:inherit;background:linear-gradient(var(--coral-l),var(--coral-l)) no-repeat 0 92%/0% .42em;padding:0 .08em;transition:background-size .9s var(--ease) .25s}
mark.cc-dau.on,html:not(.js) mark.cc-dau{background-size:100% .42em}
.nen-ink mark.cc-dau,.dai-chot mark.cc-dau{background:none;color:var(--coral);text-decoration:none;padding:0}

/* ---------- 3 mục tiêu: ba cột ngăn bằng nét kẻ, không thẻ ---------- */
.cot3{display:grid;grid-template-columns:repeat(3,1fr)}
.cot3>div{padding:4px clamp(18px,3vw,40px) 4px 0}
.cot3>div+div{padding-left:clamp(18px,3vw,40px);border-left:1px solid var(--line-2)}
.cot3 h3{margin-bottom:10px;color:var(--teal-d)}
.cot3 p{color:var(--ink-2);font-size:1.02rem}
@media (max-width:820px){.cot3{grid-template-columns:1fr;gap:26px}.cot3>div,.cot3>div+div{padding:0;border-left:0}.cot3>div+div{border-top:1px solid var(--line-2);padding-top:22px}}

/* ---------- thanh so sánh 1980 / 2026 ---------- */
.so-sanh{position:relative;border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:0 22px 40px -26px rgba(23,52,50,.55);--p:50%;touch-action:pan-y}
.so-sanh img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.so-sanh .tren{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p))}
.so-sanh .tren img{height:100%}
.so-sanh .tay{position:absolute;top:0;bottom:0;left:var(--p);width:3px;margin-left:-1.5px;background:var(--white);pointer-events:none}
.so-sanh .tay::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--white);box-shadow:0 4px 14px rgba(23,52,50,.35)}
.so-sanh .tay svg{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;color:var(--teal-d);z-index:1}
.so-sanh input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.so-sanh input[type=range]:focus-visible~.tay::after{outline:3px solid var(--coral);outline-offset:3px}
.so-sanh .nhan{position:absolute;bottom:14px;max-width:44%;background:var(--ink);color:var(--white);font-size:.95rem;font-weight:600;line-height:1.35;padding:8px 14px;border-radius:12px}
.so-sanh .nhan.trai{left:14px}.so-sanh .nhan.phai{right:14px;text-align:right}
.cau-hoi{margin-top:28px;font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.3;font-weight:500;max-width:30em}

/* ---------- hai mặt: hai cột, đường kẻ giữa mang chữ AI ---------- */
.hai-mat{display:grid;grid-template-columns:1fr 64px 1fr;gap:0 clamp(12px,3vw,40px);align-items:stretch}
.hai-mat h3{font-family:var(--sans);font-size:.95rem;letter-spacing:.06em;font-weight:700;margin-bottom:6px}
.hai-mat .tc h3{color:var(--teal-d)}.hai-mat .tl h3{color:var(--coral-d)}
.hai-mat ul{list-style:none}
.hai-mat li{padding:16px 0;border-top:1px solid var(--line-2);font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.3;transition:padding .3s var(--ease),color .2s}
.hai-mat li.chon{color:var(--teal-d);padding-left:10px}
.hai-mat .tl li.chon{color:var(--coral-d);padding-left:10px}
.hai-mat .giua{position:relative;display:flex;align-items:center;justify-content:center}
.hai-mat .giua::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-2)}
.hai-mat .giua span{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--white);font-family:var(--serif);font-weight:600;font-size:1.3rem}
@media (max-width:700px){.hai-mat{grid-template-columns:1fr 1fr;gap:0 18px}.hai-mat .giua{grid-column:1/-1;grid-row:1;height:56px;margin-bottom:6px}.hai-mat .giua::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}.hai-mat .tc{grid-row:2}.hai-mat .tl{grid-row:2}.hai-mat li{padding:12px 0;font-size:1.08rem}}

/* ---------- danh mục lĩnh vực: thuật ngữ | mô tả ---------- */
.dl{border-top:2px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(12px,4vw,56px);padding:22px 0;border-bottom:1px solid var(--line-2)}
.dl dt{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:600;color:var(--teal-d);line-height:1.2}
.dl dd{color:var(--ink-2);font-size:1.08rem}
@media (max-width:700px){.dl>div{grid-template-columns:1fr;gap:6px}}

/* ---------- ví dụ thực tế ---------- */
.vi-du{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);margin-top:clamp(40px,6vw,72px)}
.vi-du h3{margin:16px 0 6px}
.vi-du p{color:var(--ink-2)}
.vi-du img{aspect-ratio:3/2;object-fit:cover;width:100%;border-radius:20px;box-shadow:0 18px 34px -22px rgba(23,52,50,.5)}
@media (max-width:760px){.vi-du{grid-template-columns:1fr}}

/* ---------- tác động tiêu cực: hàng có thứ tự ---------- */
.hang{list-style:none;border-top:2px solid var(--ink);counter-reset:h}
.hang li{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,3vw,40px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-2);counter-increment:h}
.hang li::before{content:counter(h);font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1;color:var(--coral-d)}
.hang strong{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.55rem);font-weight:600;line-height:1.3}
.hang .he-qua{display:flex;align-items:baseline;gap:12px;color:var(--ink-2);font-size:1.06rem}
.hang .he-qua svg{width:20px;height:20px;flex:none;color:var(--coral-d);transform:translateY(4px)}
@media (max-width:760px){.hang li{grid-template-columns:44px 1fr}.hang .he-qua{grid-column:2}}
.nen-ink{background:var(--ink);color:var(--paper);border-bottom:0}
.nen-ink h2,.nen-ink h3{color:var(--white)}
.nen-ink p{color:#D4E3DE}
.dai-chot{margin-top:clamp(36px,5vw,60px);padding:clamp(28px,4vw,48px) clamp(22px,4vw,56px);background:var(--ink);color:var(--white);border-radius:24px;font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.6rem);line-height:1.3;font-weight:600;letter-spacing:-.01em}
.dai-chot span{color:var(--coral)}

/* ---------- biểu đồ + câu chốt ---------- */
.bieu-do{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,64px);align-items:center}
.bieu-do .hinh img{background:var(--white);border:1px solid var(--line);padding:clamp(10px,2vw,22px);border-radius:20px}
.bieu-do h3{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;margin-bottom:18px}
.bieu-do p{color:var(--ink-2)}
@media (max-width:860px){.bieu-do{grid-template-columns:1fr}}

/* ---------- tranh luận ---------- */
.vs-cau{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.3;font-weight:500;max-width:26em;margin-bottom:clamp(28px,4vw,44px)}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,4vw,48px);align-items:start}
.vs h3{font-family:var(--sans);font-size:.95rem;letter-spacing:.08em;font-weight:700;margin-bottom:10px}
.vs .co h3{color:var(--teal-d)}.vs .hi h3{color:var(--coral-d)}
.vs ul{list-style:none}
.vs li{padding:14px 0;border-top:1px solid var(--line-2);font-size:1.08rem}
.vs .giua{align-self:center;font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--ink-3)}
@media (max-width:700px){.vs{grid-template-columns:1fr}.vs .giua{justify-self:start}}
.luat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,64px);margin-top:clamp(40px,6vw,72px);padding-top:clamp(28px,4vw,44px);border-top:2px solid var(--ink)}
.luat h3{margin-bottom:12px}
.gio{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:6px}
.gio output{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,7vw,4.6rem);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:3.6ch}
.gio output.het{color:var(--coral-d)}
.gio .btn{min-height:44px;padding:8px 20px}
.buoc-lt{list-style:none;counter-reset:b;border-top:1px solid var(--line-2)}
.buoc-lt li{counter-increment:b;display:grid;grid-template-columns:40px 1fr;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:1.06rem}
.buoc-lt li::before{content:counter(b);font-family:var(--serif);font-weight:600;color:var(--coral-d);font-size:1.3rem;line-height:1.4}
.gk{margin-top:18px;color:var(--ink-2)}
@media (max-width:820px){.luat{grid-template-columns:1fr}}

/* ---------- thông điệp của bài ---------- */
.chot-luoi{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,80px);align-items:center}
.chot-luoi .hinh img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;width:100%;box-shadow:0 22px 40px -26px rgba(0,0,0,.6)}
.chot-luoi .hinh figcaption{color:#B8CFC9}
.thong-diep{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.1;font-weight:600;letter-spacing:-.015em;color:var(--white);max-width:12em}
.thong-diep-phu{margin-top:18px;font-size:1.15rem;color:#D4E3DE}
.trich{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.25);font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.4;color:var(--white);max-width:28em}
@media (max-width:860px){.chot-luoi{grid-template-columns:1fr}.chot-luoi .hinh img{aspect-ratio:4/3}}

/* ---------- phiếu học tập ---------- */
.phieu-bai{margin-top:clamp(30px,4vw,48px)}
.phieu-bai h3{margin-bottom:10px}
.phieu-bai>p{color:var(--ink-2)}
.bang{width:100%;border-collapse:collapse;margin-top:20px;background:var(--white)}
.bang th,.bang td{border:1px solid var(--line-2);padding:0;vertical-align:top;text-align:left}
.bang thead th{padding:12px 16px;font-size:.95rem;letter-spacing:.04em;font-weight:700;background:var(--paper-2)}
.bang thead th.tc{color:var(--teal-d)}.bang thead th.tl{color:var(--coral-d)}
.bang tbody th{padding:14px 16px;font-family:var(--serif);font-size:1.15rem;font-weight:600;width:22%;background:var(--paper-2)}
.bang textarea{display:block;width:100%;min-height:104px;border:0;padding:12px 16px;font:inherit;font-size:1rem;line-height:1.55;color:var(--ink);background:transparent;resize:vertical}
.bang textarea:focus-visible{outline:3px solid var(--teal-d);outline-offset:-3px;background:var(--mint)}
.bang-cuon{overflow-x:auto}
@media (min-width:701px){.bang-cuon .bang{min-width:640px}}
@media (max-width:700px){
  .bang,.bang tbody,.bang tr,.bang th,.bang td{display:block;width:100%}
  .bang thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bang tr{border:1px solid var(--line-2);margin-bottom:14px;background:var(--white)}
  .bang th,.bang td{border:0}
  .bang tbody th{width:100%;padding:12px 14px;border-bottom:1px solid var(--line-2)}
  .bang td{border-bottom:1px solid var(--line-2)}
  .bang td:last-child{border-bottom:0}
  .bang td[data-nhan]::before{content:attr(data-nhan);display:block;padding:10px 14px 0;font-size:.92rem;font-weight:700;letter-spacing:.04em}
  .bang td.tc::before{color:var(--teal-d)}
  .bang td.tl::before{color:var(--coral-d)}
  .bang textarea{min-height:96px}
}
.goi-y{margin:16px 0 0;list-style:none;border-top:1px solid var(--line-2)}
.goi-y li{padding:11px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.ghi-nho{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:16px}
.ghi-nho .btn{min-height:44px;padding:8px 20px}

/* ---------- bài tập về nhà + ô làm bài ---------- */
.ve-nha{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,80px);align-items:start}
.y-cau{list-style:none;margin-top:22px;border-top:1px solid var(--line-2)}
.y-cau li{display:grid;grid-template-columns:44px 1fr;padding:14px 0;border-bottom:1px solid var(--line-2);font-size:1.08rem}
.y-cau li::before{content:attr(data-n);font-family:var(--serif);font-weight:600;color:var(--coral-d);font-size:1.3rem;line-height:1.4}
.ct{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:22px;font-weight:600}
.ct span{padding:6px 14px;border:1.5px solid var(--teal);border-radius:999px;color:var(--teal-d)}
.ct svg{width:16px;height:16px;color:var(--ink-3)}
.vd-y-kien{margin-top:24px;padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:16px;color:var(--ink-2);font-size:1rem}
.vd-y-kien cite{display:block;margin-top:8px;font-size:.9rem;color:var(--ink-3);font-style:normal;font-weight:600}
.ws{background:var(--white);border:1px solid var(--line-2);border-radius:22px;padding:clamp(22px,3.4vw,38px);box-shadow:0 2px 0 var(--line)}
.ws h3{margin-bottom:6px}
.ai-rieng{font-size:.95rem;color:var(--ink-3);max-width:62ch}
.ws label{display:block;margin:22px 0 4px;font-weight:700;font-size:1rem;color:var(--ink)}
.ai-goi{display:block;font-weight:400;font-size:.95rem;color:var(--ink-3);margin-top:1px}
.ws select,.ws input[type=text],.ws textarea{width:100%;font:inherit;font-size:1.02rem;color:var(--ink);background:var(--paper);border:1.5px solid #6B807D;border-bottom-width:2px;border-radius:8px 8px 0 0;padding:12px 14px;transition:border-color .2s,background .2s}
.ws select{min-height:48px}
.ws textarea{min-height:104px;resize:vertical;line-height:1.6}
.ws select:focus-visible,.ws input[type=text]:focus-visible,.ws textarea:focus-visible{outline:3px solid var(--teal-d);outline-offset:1px;border-color:var(--teal-d);background:var(--mint)}
.ws textarea[readonly]{background:var(--paper-2);min-height:170px;font-size:1rem}
.ai-dem{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:22px 0 2px;font-weight:600;max-width:none}
.ai-dem strong{font-family:var(--sans);font-weight:700;font-size:1.6rem;font-variant-numeric:lining-nums tabular-nums}
.nw{white-space:nowrap}
.ai-dem[data-muc="trong"] #ai-nhan-xet{color:var(--ink-3)}
.ai-dem[data-muc="dat"] strong,.ai-dem[data-muc="dat"] #ai-nhan-xet{color:var(--teal-d)}
.ai-dem[data-muc="thieu"] #ai-nhan-xet,.ai-dem[data-muc="thua"] #ai-nhan-xet{color:var(--coral-d)}
.ai-soat{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 4px}
.ai-soat li{display:flex;align-items:center;gap:7px;font-size:.95rem;color:var(--ink-3);transition:color .3s}
.ai-soat li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none}
.ai-soat li[data-co="1"]{color:var(--teal-d);font-weight:700}
.ai-soat li[data-co="1"]::before{background:var(--teal);border-color:var(--teal)}
.ai-nut{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ai-bao{margin-top:12px;font-weight:600;color:var(--teal-d);min-height:1.5em;max-width:none}
.ai-bao[data-loai="nhac"]{color:var(--coral-d)}
@media (max-width:900px){.ve-nha{grid-template-columns:1fr}}
@media (max-width:480px){.ai-nut .btn{width:100%}}

/* ---------- nộp bài ---------- */
.buoc3{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);counter-reset:s;border-top:2px solid var(--ink)}
.buoc3 li{counter-increment:s;padding:24px clamp(16px,3vw,36px) 8px 0}
.buoc3 li+li{padding-left:clamp(16px,3vw,36px);border-left:1px solid var(--line-2)}
.buoc3 li::before{content:counter(s);display:block;font-family:var(--serif);font-weight:600;font-size:2.6rem;line-height:1;color:var(--coral-d);margin-bottom:12px}
.buoc3 h3{margin-bottom:8px}
.buoc3 p{color:var(--ink-2)}
@media (max-width:820px){.buoc3{grid-template-columns:1fr}.buoc3 li,.buoc3 li+li{padding:20px 0;border-left:0}.buoc3 li+li{border-top:1px solid var(--line-2)}}
.quy-tac{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,64px)}
.quy-tac ul{list-style:none;border-top:1px solid var(--line-2)}
.quy-tac li{padding:13px 0 13px 28px;border-bottom:1px solid var(--line-2);position:relative;color:var(--ink-2)}
.quy-tac li::before{content:"";position:absolute;left:2px;top:1.15em;width:12px;height:7px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);transform:rotate(-45deg)}
@media (max-width:820px){.quy-tac{grid-template-columns:1fr}}

/* ---------- bản đồ năm nhóm ---------- */
.ban-do{position:relative;max-width:820px;margin:0 auto}
.ai-nhom{list-style:none;display:grid;gap:0;border-top:2px solid var(--ink)}
.ai-nhom li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line-2)}
.ai-bt{width:48px;height:48px;border-radius:50%;background:var(--mint);color:var(--teal-d);display:flex;align-items:center;justify-content:center;transition:background .25s,color .25s,transform .4s var(--ease)}
.ai-bt svg{width:24px;height:24px}
.ai-nhom strong{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1.3}
.ai-nhom-mo{display:block;color:var(--ink-2);font-size:1.02rem}
.bd-loi,.bd-loi-svg{display:none}
@media (min-width:900px){
  .js .ban-do{aspect-ratio:1/.92}
  .js .ai-nhom{display:block;position:absolute;inset:0;border:0}
  .js .ai-nhom li{position:absolute;width:176px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0;border:0;cursor:pointer;z-index:3}
  .js .ai-nhom li:nth-child(1){left:50%;top:9%}
  .js .ai-nhom li:nth-child(2){left:90%;top:37%}
  .js .ai-nhom li:nth-child(3){left:75%;top:86%}
  .js .ai-nhom li:nth-child(4){left:25%;top:86%}
  .js .ai-nhom li:nth-child(5){left:10%;top:37%}
  .js .ai-bt{width:64px;height:64px;background:var(--white);border:1.5px solid var(--line-2)}
  .js .ai-nhom strong{font-size:1.02rem}
  .js .ai-nhom-mo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .js .ai-nhom li.on .ai-bt{background:var(--teal);border-color:var(--teal);color:var(--white);transform:scale(1.1)}
  .js .ai-nhom li.on strong{color:var(--teal-d)}
  .js .bd-loi-svg{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
  .bd-loi-svg polygon,.bd-loi-svg line{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:5 7;vector-effect:non-scaling-stroke}
  .js .bd-loi{display:flex;position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(350px,44%);min-height:230px;z-index:2;flex-direction:column;align-items:flex-start;justify-content:center;background:var(--ink);color:var(--white);border-radius:24px;padding:28px}
  .bd-loi .k{font-size:.92rem;color:var(--coral);font-weight:700}
  .bd-loi strong{font-family:var(--serif);font-size:1.45rem;margin:6px 0 8px;line-height:1.2}
  .bd-loi p{font-size:1rem;color:#D4E3DE;transition:opacity .3s}
}

/* ---------- ảnh minh hoạ trong tình huống ---------- */
.th{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center;padding:clamp(48px,7vw,96px) 0;border-bottom:1px solid var(--line)}
.th:last-of-type{border-bottom:0}
.th.dao .th-m{order:2}
.th-m .hinh img{aspect-ratio:16/10;object-fit:cover;box-shadow:0 18px 34px -22px rgba(23,52,50,.5)}
.th h3{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:10px 0 16px}
.th .so-tt{display:inline-block;margin-right:.7em;font-family:var(--sans);font-weight:700;color:var(--coral-d);font-size:.5em;letter-spacing:.02em;vertical-align:.35em}
.th p+p{margin-top:12px}
.th .hoi{margin-top:20px;padding:16px 0 0;border-top:2px solid var(--ink);font-size:1.08rem}
.th .hoi strong{color:var(--teal-d)}
.dl-ô{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);border-top:2px solid var(--ink)}
.dl-ô li{display:flex;align-items:center;gap:14px;padding:16px 8px 16px 0;border-bottom:1px solid var(--line-2);font-size:1.06rem}
.dl-ô svg{width:28px;height:28px;color:var(--teal-d);flex:none}
.chuoi{list-style:none}
.chuoi>li{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line-2);font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.5rem);font-weight:600;line-height:1.25}
.chuoi>li:last-child{border-bottom:1px solid var(--line-2);color:var(--coral-d)}
.chuoi svg{width:30px;height:30px;color:var(--teal-d);flex:none}
.chuoi>li:last-child svg{color:var(--coral-d)}
.chuoi .xuong{border:0;padding:0;margin-left:11px;height:26px;display:block}
.chuoi .xuong svg{width:18px;height:26px;color:var(--ink-3)}
@media (max-width:860px){.th{grid-template-columns:1fr}.th.dao .th-m{order:0}.dl-ô{grid-template-columns:1fr}}

/* ---------- Tiết 1: truyện tình huống, ba điều mang về ---------- */
.dai-chot .nhan{display:block;font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.02em;color:var(--coral);margin-bottom:10px}
.truyen{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.5;font-weight:500;max-width:36em;color:var(--ink)}
.truyen em{font-style:normal;color:var(--coral-d)}
.ba-dieu{list-style:none;counter-reset:d;border-top:1px solid rgba(255,255,255,.3)}
.ba-dieu li{counter-increment:d;display:grid;grid-template-columns:56px 1fr;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.3);font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.35;color:var(--white)}
.ba-dieu li::before{content:counter(d);font-weight:600;color:var(--coral);font-size:2rem;line-height:1}
.nen-ink .btn.line{color:var(--white);border-color:rgba(255,255,255,.6)}
.nen-ink .btn.line:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.nen-ink .tiep{margin-top:clamp(36px,5vw,56px)}
.nen-ink .tiep h3{margin-bottom:8px}
.nen-ink .tiep p+p{margin-top:24px}

/* ---------- chân trang ---------- */
.ai-ft{background:var(--ink);color:#C9DAD5;padding:48px 0 60px;font-size:.98rem}
.ai-ft strong{color:var(--white)}
.ai-ft p{max-width:60ch}
.ai-ft .small{font-size:.92rem;color:#A9C0BA}
.cam-on{font-family:var(--serif);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:600;line-height:1.1;color:var(--white);margin-bottom:8px}
.cam-on-phu{font-size:1.15rem;color:#D4E3DE;margin-bottom:28px}

/* ---------- chuyển động khi máy báo "giảm" : giữ nhẹ, không tắt ---------- */
@media (prefers-reduced-motion:reduce){
  .js .mo-dau .hinh img{animation-duration:.6s}
  .js .mo-dau h1,.js .mo-dau .lead,.js .mo-dau .phu{animation-duration:.5s}
}
@media (max-width:560px){
  body{font-size:1.03rem}
  .wrap{width:calc(100% - 32px)}
  .crumb{padding-top:20px}
}

/* ---------- bổ sung sau critique 17/10 ---------- */
[hidden]{display:none!important}
.mo-dau .nut{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.mo-dau .nut .btn{min-height:48px}
.luu-bao{display:block;margin-top:10px;min-height:1.5em;font-size:.95rem;color:var(--ink-3);max-width:none}
.luu-bao.loi{color:var(--coral-d);font-weight:600}
.ban-nop-khoi{margin-top:4px}
.tom-tat{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);color:var(--ink-2)}
.tom-tat strong{color:var(--ink)}
.tom-tat a{display:inline-block;margin-top:8px;padding:8px 0;font-weight:600}
.gio-het{display:block;min-height:1.4em;margin-top:8px;font-weight:700;color:var(--coral-d);max-width:none}
.ho-tro{margin-top:14px;font-size:.98rem;color:var(--ink-2)}

/* ---------- gọn cho điện thoại (17/10, Thầy: "làm trang ngắn lại") ---------- */
.buoc3 .btn{margin-top:6px;min-height:44px;padding:8px 18px;font-size:.95rem}
@media (max-width:700px){
  .muc{padding:32px 0}
  .muc-dau{margin-bottom:20px;gap:8px}
  .mo-dau{padding-bottom:32px}
  .mo-dau .hinh.doc img,.chot-luoi .hinh img{aspect-ratio:16/10}
  .cot3{gap:16px}.cot3>div+div{padding-top:16px}
  .dl>div{padding:14px 0}
  .hang li{padding:14px 0}
  .vs{grid-template-columns:1fr 1fr;gap:0 16px}
  .vs .giua{grid-column:1/-1;grid-row:1;justify-self:center;font-size:1.3rem;margin-bottom:6px}
  .vs .co,.vs .hi{grid-row:2}
  .vs li{padding:10px 0;font-size:1rem}
  .luat{margin-top:28px;padding-top:22px}
  .vi-du{margin-top:24px;gap:22px}
  .bang textarea{min-height:68px}
  .bang td[data-nhan]::before{padding:8px 14px 0}
  .bang tbody th{padding:10px 14px}
  .bang tr{margin-bottom:10px}
  .buoc3 li::before{font-size:2rem;margin-bottom:8px}
  .buoc3 li,.buoc3 li+li{padding:14px 0}
  .quy-tac{margin-top:24px}
  .ws{padding:20px 16px}
  .ws label{margin-top:16px}
  #ai-thu-hoach{min-height:150px!important}
}

/* ---------- sau đánh giá lần 2 (17/10) ---------- */
.xem-lai{margin-top:6px;font-size:.98rem;color:var(--ink-2)}
.xem-lai a{padding:6px 0;display:inline-block}
.phieu-bai>.luu-bao{margin:8px 0 4px;min-height:1.5em}
.bd-svg svg{width:100%;max-width:560px;height:auto;display:block;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:4px}
.bd-svg text{font-family:var(--sans);font-size:15px;fill:var(--ink-2)}
.bd-svg .bd-tt{font-weight:700;fill:var(--ink)}
.bd-svg .bd-luoi line{stroke:var(--line-2);stroke-width:1}
.bd-svg .bd-so{fill:none;stroke:var(--teal);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.bd-svg .bd-lap{fill:none;stroke:var(--coral-d);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.bd-svg .bd-so-d circle{fill:var(--teal)}
.bd-svg .bd-lap-d circle{fill:var(--coral-d)}
.bd-svg .bd-cs{fill:var(--teal)}
.bd-svg .bd-cl{fill:var(--coral-d)}
.bd-svg .bd-gt{font-weight:700}
.bd-svg .bd-gt-so{fill:var(--teal-d)}
.bd-svg .bd-gt-lap{fill:var(--coral-d)}
@media (min-width:900px){.ve-nha>div:first-child{position:sticky;top:90px;align-self:start}}
@media (max-width:700px){.so-sanh .nhan{font-size:.88rem;max-width:47%;padding:6px 10px}}