@charset "utf-8";
/* thuatlab.css — dung chung ca 5 trang. So do: 3-design.md; khong go co chu hay ma
 mau ngoai bang do. Luat mau: focus-visible luon co outline-offset:2px | nen moi
 phai them cap vao tinh-tuong-phan.py | khong lam mo chu bang opacity. */

/* 1. bien — 3 lop, hai khoi toi y het nhau */
:root{
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
--giay:#f5f4ef;--the:#fffefa;--the-chim:#eceae2;
--vien:#858176;--vien-dam:#65625a;
--muc:#18170f;--muc-nhat:#4f4c45;--muc-mo:#65625a;
--luc:#0d6b4a;--luc-nen:#dceee4;--luc-chu:#ffffff;
--dat:#a8481c;--dat-nen:#f6e6dc;--nen-mo:rgba(24,23,15,.55);
--bong:0 1px 2px rgba(24,23,15,.05);
--bong-noi:0 12px 34px -14px rgba(13,107,74,.34)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--giay:#111110;--the:#1a1916;--the-chim:#222018;
--vien:#757165;--vien-dam:#9a968a;
--muc:#f1efe6;--muc-nhat:#aba79a;--muc-mo:#8f8b82;
--luc:#4fd3a0;--luc-nen:#12362a;--luc-chu:#08201a;
--dat:#f0925c;--dat-nen:#3a2317;--nen-mo:rgba(0,0,0,.66);
--bong:0 1px 2px rgba(0,0,0,.4);
--bong-noi:0 12px 34px -14px rgba(79,211,160,.28)}}
:root[data-theme="dark"]{
--giay:#111110;--the:#1a1916;--the-chim:#222018;
--vien:#757165;--vien-dam:#9a968a;
--muc:#f1efe6;--muc-nhat:#aba79a;--muc-mo:#8f8b82;
--luc:#4fd3a0;--luc-nen:#12362a;--luc-chu:#08201a;
--dat:#f0925c;--dat-nen:#3a2317;--nen-mo:rgba(0,0,0,.66);
--bong:0 1px 2px rgba(0,0,0,.4);
--bong-noi:0 12px 34px -14px rgba(79,211,160,.28)}

/* 2. nen tang */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--giay);color:var(--muc);font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.65;overflow-wrap:break-word}
img,svg{max-width:100%;height:auto}
.khung{width:100%;max-width:1080px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
a:focus-visible,button:focus-visible{outline:2px solid var(--luc);outline-offset:2px;border-radius:6px}

/* nhom dung chung */
.hieu,.nut,.luoi-4 a,.menu-ngang a,.menu-panel a,.chan nav a,.bo-qua{text-decoration:none}
.bo-qua,.nut,.chip-mo,.nut-che-do,.nut-dong,.menu-ngang a:not(.nut),.chan .ban-quyen,.chan nav a,.vun a{display:inline-flex;align-items:center}
.bo-qua,.menu-ngang a:not(.nut),.chan .ban-quyen,.chan nav a,.vun a,.dong-trang-thai{min-height:44px}
.cong-khai a,.noi a,.vun a{color:var(--luc);text-decoration:underline;text-underline-offset:3px}
.cong-khai a,.noi a{text-decoration-thickness:1px}
.dau-muc p,.the p,.dang p,.the ul,.dang ul,.luoi-4 span:not(.chip-mo),.ba-cau-hoi dd{font-size:16px;line-height:1.6;color:var(--muc-nhat)}
.vun,.cap-nhat{font-family:var(--mono);font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.06em;color:var(--muc-mo)}

/* 3. link bo qua */
.bo-qua{position:absolute;left:-9999px;top:0;z-index:90;padding:11px 18px;font-size:16px;font-weight:600;line-height:1.35;background:var(--the);color:var(--muc);border:1px solid var(--vien-dam);border-radius:0 0 10px 0}
.bo-qua:focus{left:0}

/* 4. nut, chip */
.nut{justify-content:center;gap:7px;min-height:46px;padding:12px 22px;border-radius:9px;font-size:16px;font-weight:600;line-height:1.35;border:1px solid transparent;cursor:pointer}
.nut-dac{background:var(--luc);color:var(--luc-chu)}
.nut-dac:hover{filter:brightness(1.08)}
.nut-vien{background:var(--the);color:var(--muc);border-color:var(--vien-dam)}
.nut-vien:hover{border-color:var(--luc);color:var(--luc)}
.hang-nut{display:flex;gap:12px;flex-wrap:wrap}
.chip-mo{align-self:flex-start;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1.35;text-transform:uppercase;white-space:nowrap;padding:5px 10px;border-radius:99px;background:var(--luc-nen);color:var(--luc)}

/* 5. thanh dau + menu dien thoai (thuan CSS) */
header.thanh{position:sticky;top:0;z-index:40;background:var(--giay);border-bottom:1px solid var(--vien);padding-top:env(safe-area-inset-top)}
.thanh .khung{display:flex;align-items:center;gap:12px;min-height:64px}
.hieu{font-size:20px;font-weight:800;line-height:1.2;letter-spacing:-.5px;color:var(--muc);white-space:nowrap}
.hieu i{font-style:normal;color:var(--luc)}
/* an khoi mat nhung VAN trong thu tu Tab — khong dung display:none */
.cong-tac-menu{position:absolute;left:-9999px;width:1px;height:1px;margin:0;opacity:0}
.nut-ba-gach,.nut-che-do{width:44px;height:44px;flex:0 0 auto;background:var(--the);border:1px solid var(--vien-dam);border-radius:10px;color:var(--muc);cursor:pointer}
.nut-ba-gach{order:2;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nut-ba-gach span{width:19px;height:2px;border-radius:2px;background:var(--muc);transition:transform .22s ease,opacity .22s ease}
.cong-tac-menu:focus-visible+.nut-ba-gach{outline:2px solid var(--luc);outline-offset:2px;border-radius:10px}
.nut-che-do{justify-content:center}
.nut-che-do svg{width:20px;height:20px;display:block}
.menu-ngang{display:flex;align-items:center;gap:8px;margin-left:auto}
.menu-ngang a:not(.nut){padding:0 10px;font-size:15px;font-weight:600;line-height:1.4;color:var(--muc-nhat);white-space:nowrap;border-radius:8px}
.menu-ngang a:not(.nut):hover{color:var(--muc);background:var(--the-chim)}
.menu-ngang .nut{padding:12px 18px}
.menu-nen{position:fixed;inset:0;z-index:50;margin:0;border:0;background:var(--nen-mo);opacity:0;pointer-events:none;transition:opacity .22s ease}
.menu-panel{position:fixed;inset-block:0;left:0;z-index:60;width:min(78vw,320px);background:var(--the);border-right:1px solid var(--vien);display:flex;flex-direction:column;gap:4px;padding:calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow-y:auto;overscroll-behavior:contain;transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
.menu-panel a:not(.nut){display:flex;align-items:center;width:100%;min-height:48px;padding:0 16px;font-size:16px;font-weight:600;line-height:1.4;color:var(--muc);border-radius:8px}
.menu-panel a:not(.nut):hover{background:var(--the-chim)}
.menu-panel .nut{width:100%;min-height:48px;margin-top:12px}
.nut-dong{width:44px;height:44px;flex:0 0 auto;align-self:flex-end;margin-bottom:6px;justify-content:center;position:relative;cursor:pointer}
.nut-dong span{position:absolute;width:18px;height:2px;border-radius:2px;background:var(--muc)}
.nut-dong span:first-child{transform:rotate(45deg)}
.nut-dong span:last-child{transform:rotate(-45deg)}
.cong-tac-menu:checked~.menu-panel{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
.cong-tac-menu:checked~.menu-nen{opacity:1;pointer-events:auto}
.cong-tac-menu:checked+.nut-ba-gach span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.cong-tac-menu:checked+.nut-ba-gach span:nth-child(2){opacity:0}
.cong-tac-menu:checked+.nut-ba-gach span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
html:has(.cong-tac-menu:checked){overflow:hidden}

/* 6. mo dau */
.mo-dau{padding-block:64px 36px}
.mo-dau h1{font-size:clamp(30px,5.2vw,50px);font-weight:800;line-height:1.08;letter-spacing:-1.4px;margin:0 0 18px;max-width:24ch;text-wrap:balance}
.mo-dau h1 em{font-style:normal;color:var(--luc)}
.dan{font-size:18px;line-height:1.6;color:var(--muc-nhat);max-width:58ch;margin:0 0 28px}

/* 7. luoi */
.luoi{display:grid;gap:16px}
.luoi>*{min-width:0}
.luoi-4{grid-template-columns:repeat(4,1fr)}
.luoi-3{grid-template-columns:repeat(3,1fr)}
.luoi-2{grid-template-columns:repeat(2,1fr)}
nav.luoi-4{padding-bottom:18px}
.the,.dang,.luoi-4 a{background:var(--the);border:1px solid var(--vien);border-radius:14px;box-shadow:var(--bong);display:flex;flex-direction:column;min-width:0}
.luoi-4 a{gap:6px;min-height:96px;padding:18px;color:inherit;transition:border-color .15s ease}
.luoi-4 a:hover{border-color:var(--luc)}
.luoi-4 b{font-size:18px;font-weight:600;line-height:1.34;letter-spacing:-.3px}

/* 8. muc */
section.muc{padding-block:52px;scroll-margin-top:72px}
.dau-muc{margin-bottom:18px}
.dau-muc h2{font-size:clamp(23px,3vw,30px);font-weight:800;line-height:1.2;letter-spacing:-.7px;margin:0 0 6px;max-width:30ch}
.dau-muc p{margin:0;max-width:60ch}
.cong-khai{font-size:15px;line-height:1.65;color:var(--muc-nhat);max-width:68ch;margin:0 0 16px}
.dong-trang-thai{display:flex;align-items:flex-start;gap:10px;background:var(--the-chim);border:1px solid var(--vien);border-radius:10px;padding:11px 14px;margin:0 0 20px}
.dong-trang-thai::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:99px;background:var(--dat);margin-top:7px}
.dong-trang-thai p{margin:0;font-size:14px;line-height:1.55;color:var(--muc-nhat);max-width:68ch}

/* 9. the + chip chu de */
.the,.dang{padding:22px;gap:10px}
.the h3,.dang h3{margin:0;font-size:18px;font-weight:600;line-height:1.34;letter-spacing:-.3px}
.the p,.dang p{margin:0;max-width:46ch}
.the ul,.dang ul{margin:0;padding-left:20px;display:grid;gap:6px;max-width:46ch}
.chu-de{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chu-de li{font-size:14px;line-height:1.4;padding:6px 12px;border-radius:99px;border:1px solid var(--vien-dam);background:var(--the);color:var(--muc-nhat)}

/* 10. khoi dich vu + 3 cau hoi */
.khoi-dich-vu{background:var(--the);border:1px solid var(--luc);border-radius:18px;overflow:hidden;box-shadow:var(--bong-noi)}
.khoi-dich-vu .loi{padding:32px}
.khoi-dich-vu h3{font-size:clamp(25px,3.4vw,33px);font-weight:800;line-height:1.18;letter-spacing:-.9px;margin:0 0 12px;max-width:18ch}
.khoi-dich-vu .loi>p:not(.gia){font-size:16px;line-height:1.6;color:var(--muc-nhat);max-width:56ch;margin:0 0 20px}
.gia{display:flex;align-items:baseline;gap:9px;margin:0 0 22px;flex-wrap:wrap;max-width:none}
.gia b{font-family:var(--mono);font-size:clamp(24px,3vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--muc)}
.gia span{font-size:14px;line-height:1.5;color:var(--muc-mo);max-width:40ch}
.ba-cau-hoi{margin:0;background:var(--the-chim);border-top:1px solid var(--vien);padding:24px;display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.cau{display:flex;flex-direction:column;gap:6px;min-width:0}
.cau::before{content:"";width:26px;height:3px;border-radius:99px;background:var(--luc);margin-bottom:6px}
.ba-cau-hoi dt{font-size:16px;font-weight:600;line-height:1.4;color:var(--muc);max-width:26ch}
.ba-cau-hoi dd{margin:0;max-width:40ch}

/* 11. chan trang */
footer.chan{border-top:1px solid var(--vien);margin-top:24px;padding-block:30px calc(40px + env(safe-area-inset-bottom))}
.chan .khung{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}
.chan .ban-quyen,.chan nav a{font-size:15px;line-height:1.6;color:var(--muc-nhat)}
.chan .ban-quyen{margin:0}
.chan nav{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.chan nav a{padding:0 10px;border-radius:8px}
.chan nav a:hover{color:var(--luc)}

/* 12. trang phu */
.trang-phu{padding-block:34px 56px}
.vun{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.vun a{padding:0 6px;margin-left:-6px}
.trang-phu h1{font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.15;letter-spacing:-1px;margin:0 0 8px;max-width:30ch}
.cap-nhat{margin:0 0 24px}
.hop-luu-y{background:var(--dat-nen);border-left:3px solid var(--dat);border-radius:0 10px 10px 0;padding:14px 16px;margin:0 0 28px;color:var(--muc);max-width:64ch}
.hop-luu-y p{margin:0 0 8px;font-size:15px;line-height:1.6;max-width:100%}
.hop-luu-y p:last-child{margin:0}
.noi{max-width:68ch}
.noi h2{font-size:22px;font-weight:800;line-height:1.3;letter-spacing:-.4px;margin:32px 0 10px;max-width:60ch}
.noi h2:first-child{margin-top:0}
.noi p{margin:0 0 14px;font-size:16px;line-height:1.7;max-width:68ch}
.noi ul{margin:0 0 14px;padding-left:20px;display:grid;gap:6px;font-size:16px;line-height:1.6}
/* .o-trong = dau CHO TRONG. Nen --dat-nen da co trong bang do tuong phan */
.o-trong{display:inline-block;font-weight:600;background:var(--dat-nen);color:var(--muc);border:1px dashed var(--dat);border-radius:6px;padding:1px 8px}

/* 13. bon moc 1024/820/620/400 — khong them moc khac */
@media (min-width:821px){.cong-tac-menu,.nut-ba-gach,.menu-nen,.menu-panel{display:none}}
@media (max-width:1024px){
.khung{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.luoi{gap:14px}.ba-cau-hoi{gap:16px}}
@media (max-width:820px){
.menu-ngang{display:none}
.nut-che-do{order:1;margin-left:auto}
.luoi-4,.luoi-3{grid-template-columns:repeat(2,1fr)}
.ba-cau-hoi{grid-template-columns:repeat(2,1fr);padding:20px}
.khoi-dich-vu .loi{padding:24px}
.mo-dau{padding-block:52px 32px}
section.muc{padding-block:46px}}
@media (max-width:620px){
.luoi-3,.luoi-2,.ba-cau-hoi{grid-template-columns:1fr}
.the,.dang{padding:18px}
.thanh .khung{min-height:60px}
.mo-dau{padding-block:44px 28px}
section.muc{padding-block:40px}
.dau-muc{margin-bottom:16px}
.dong-trang-thai{margin-bottom:18px}
.chan .khung{flex-direction:column;gap:6px}}
@media (max-width:400px){
.khung{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.thanh .khung{gap:8px}
.luoi-4{grid-template-columns:1fr}
.hang-nut .nut{width:100%}
.ba-cau-hoi{padding:18px 16px;gap:16px}
.khoi-dich-vu .loi{padding:20px}
.mo-dau{padding-block:36px 24px}
section.muc{padding-block:34px}}

/* 14. giam chuyen dong (K27) */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.menu-panel,.menu-nen,.nut-ba-gach span{transition:none}
*{transition:none !important}}