/* thts-style.css – Hệ sinh thái Giáo dục số (giao diện v3) cho theme Sapo "Udemy".
   Mọi quy tắc được giới hạn trong .thts / .hd / .ft để không phá các trang giỏ hàng, tài khoản của theme cũ. */
:root{--g:#0F5C4D;--g2:#0B5555;--g3:#2F8F7B;--gold:#E8A33D;--ink:#17302B;--mut:#4F625D;--bg:#FBF8F1;--line:#E2DCCB;--dark:#0E3B33}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,sans-serif}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--ink);padding:10px 14px;z-index:999;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}
/* Header */
.hd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 24px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;font-family:"Be Vietnam Pro",system-ui,sans-serif;box-sizing:border-box}
.hd *{box-sizing:border-box}
.hd .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--g);font-weight:700;font-size:15px;padding:4px 6px}
.hd .brand img{max-height:40px;width:auto}
.hd nav.mainnav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.hd a{color:var(--ink);text-decoration:none;padding:8px 10px;min-height:40px;display:flex;align-items:center;border-radius:8px;font-size:13.5px}
.hd a.on,.hd a[aria-current=page]{background:#E6F0EA;color:var(--g2);font-weight:600}
.hd a:hover{background:#F3F7F4;color:var(--g2);text-decoration:none}
.hd .acts{display:flex;gap:6px;align-items:center}
.hd .acts .bt{min-height:40px;padding:8px 16px;font-size:13.5px;color:#fff}
.hd .acts .bt:hover{background:var(--g2);color:#fff}
.hd .cartn{background:var(--gold);color:var(--ink);border-radius:99px;font-size:11px;padding:0 6px;margin-left:4px;font-weight:700}
.navtoggle{display:none;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:20px;height:2px;background:var(--g);position:relative;content:""}
.navtoggle span::before{position:absolute;top:-6px}.navtoggle span::after{position:absolute;top:6px}
@media(max-width:1020px){
 .navtoggle{display:flex}
 .hd nav.mainnav,.hd .acts{display:none;flex-basis:100%}
 .hd.open nav.mainnav{display:flex;flex-direction:column}
 .hd.open .acts{display:flex;flex-wrap:wrap}
 .hd a{font-size:15px;min-height:44px}
}
@media(min-width:1021px){.hd nav.mainnav a{padding:8px 8px;font-size:13px}}
/* Footer */
.ft{background:var(--dark);color:#CFE3DB;padding:40px 24px;font-family:"Be Vietnam Pro",system-ui,sans-serif}
.ft .in{max-width:1140px;margin:0 auto}
.ft a{color:#FBF8F1;text-decoration:none}.ft a:hover{text-decoration:underline;color:#fff}
.ft .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px;margin-bottom:28px}
.ft .cols p{margin-top:10px;font-size:13.5px;line-height:1.6;display:flex;flex-direction:column;gap:6px}
.ft b{color:#FBF8F1}
.ft .bottom{border-top:1px solid #1F4A42;padding-top:16px;font-size:12.5px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}
/* Page body (homepage, pages, contact) */
.thts{font-family:"Be Vietnam Pro",system-ui,sans-serif;color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55}
.thts *{box-sizing:border-box}
.thts h1{font-size:40px;line-height:1.15;margin:0;color:var(--g);font-weight:700}
.thts h2{font-size:26px;line-height:1.25;margin:0 0 14px;color:var(--g);font-weight:700}
.thts h3{font-size:17px;margin:0 0 6px;color:var(--g);font-weight:700}
.thts p{margin:0}
.thts .m{color:var(--mut)}
.thts .bt{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border-radius:11px;border:2px solid var(--g);background:var(--g);color:#fff;font:600 14.5px "Be Vietnam Pro",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.hd .bt{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;border:2px solid var(--g);background:var(--g);font-weight:600;text-decoration:none}
.thts .bt:hover{background:var(--g2);color:#fff;text-decoration:none}
.thts .bt.o{background:transparent;color:var(--g)}
.thts .bt.o:hover{background:#E6F0EA;color:var(--g2)}
.thts .bt.a{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.thts .sec{padding:48px 24px}
.thts .in{max-width:1140px;margin:0 auto}
.thts .gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.thts .cd{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.thts .cd a{color:var(--g2);font-weight:600;font-size:14px}
.thts .cd a.bt{color:#fff}.thts .cd a.bt.o{color:var(--g)}.thts .cd a.bt.a{color:var(--ink)}
.thts .ch{display:inline-block;background:#E6F0EA;color:var(--g2);border-radius:99px;padding:3px 11px;font-size:12.5px;font-weight:600}
.thts .dk{background:var(--dark);color:#CFE3DB}
.thts .dk h2,.thts .dk h3{color:#FBF8F1}
.thts .dk .cd h3{color:var(--g)}
.thts .dk .m{color:#A8C5BA}.thts .dk .cd .m{color:var(--mut)}
.thts .mod{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.thts .mod .cd{position:relative}
.thts .mod .num{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;background:#E6F0EA;color:var(--g);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.thts .rte h2{margin-top:22px}.thts .rte p{margin:0 0 12px}.thts .rte ul,.thts .rte ol{padding-left:20px;margin:0 0 12px}
.thts .rte img{max-width:100%;height:auto}
.thts .demo-note{background:#FBEFD5;color:#6B4400;border-radius:10px;padding:10px 14px;font-size:13px;margin:10px 0}
.thts .ph{background:#FBEFD5;color:#6B4400;border-radius:4px;padding:0 4px}
.thts .crumb{font-size:13px;color:var(--mut);margin-bottom:10px}.thts .crumb a{color:var(--g2)}
/* Forms */
.thts label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.thts input[type=text],.thts input[type=email],.thts input[type=tel],.thts textarea{font:400 15px "Be Vietnam Pro",system-ui,sans-serif;padding:11px 12px;border:1px solid #CFC8B5;border-radius:10px;background:#fff;width:100%}
.thts .msg{border-radius:10px;padding:10px 14px;font-size:14px;margin:8px 0}
.thts .msg.err{background:#FDECEC;color:#8A1F1F;border:1px solid #F3C2C2}
.thts .msg.ok{background:#E6F0EA;color:#0B5555;border:1px solid #BFD9CC}
.thts input.invalid,.thts textarea.invalid{border-color:#C0392B!important;background:#FFF8F8}
.thts .ferr{color:#B03A2E;font-size:12.5px;margin-top:2px;font-weight:400}
.thts .soon{background:#E6F0EA;border:1px dashed var(--g3);border-radius:14px;padding:40px 24px;text-align:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 18px;border-radius:12px;font:500 14px "Be Vietnam Pro",system-ui,sans-serif;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.2);max-width:90vw}
.thts a:focus-visible,.thts button:focus-visible,.thts input:focus-visible,.thts textarea:focus-visible,.hd a:focus-visible,.navtoggle:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:900px){.thts .mod{grid-template-columns:1fr 1fr}.thts h1{font-size:30px}.thts .sec{padding:36px 16px}.hd{padding:10px 14px}}
@media(max-width:560px){.thts .mod{grid-template-columns:1fr}}

/* v4: menu thả xuống (hover/focus trên máy tính, bấm ▾ trên điện thoại; Esc để đóng) */
.hd .dd{position:relative;display:flex;align-items:center}
.hd .ddt{background:none;border:0;width:24px;min-height:40px;cursor:pointer;padding:0;margin-left:-6px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.hd .ddt::after{content:"";width:7px;height:7px;border-right:2px solid var(--g);border-bottom:2px solid var(--g);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.hd .dd.open>.ddt::after{transform:rotate(-135deg)}
.hd .ddt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hd .ddm{display:none;position:absolute;top:100%;left:0;min-width:240px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,92,77,.12);padding:6px;z-index:60;flex-direction:column}
.hd .ddm a{white-space:nowrap}
@media(min-width:1021px){.hd .dd:hover>.ddm,.hd .dd:focus-within>.ddm,.hd .dd.open>.ddm{display:flex}}
@media(max-width:1020px){
 .hd .dd{flex-wrap:wrap}.hd .dd>a{flex:1}
 .hd .ddt{width:44px;min-height:44px;margin:0}
 .hd .ddm{position:static;box-shadow:none;border:0;border-left:2px solid #E6F0EA;border-radius:0;margin-left:12px;flex-basis:100%;min-width:0}
 .hd .dd.open>.ddm{display:flex}
 .hd .ddm a{white-space:normal}
}
.thts .tag{font-size:12px;font-weight:600;border-radius:99px;padding:2px 9px;align-self:flex-start}
.thts .tag.live{background:#E6F0EA;color:var(--g2)}.thts .tag.wip{background:#FBEFD5;color:#6B4400}