:root{
  --bg:#0B1735; --panel:#11224E; --line:#22366A; --line-2:#3A4E82; --rule:#1D2E5C;
  --ink:#F2F4FA; --soft:#D3D9E8; --body:#C2CADD; --quiet:#A9B3CC;
  --orange:#F77B1B; --orange-soft:#F99A4E;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Be Vietnam Pro',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--orange-soft)} a:hover{color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.logo{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--ink);text-decoration:none}
.logo b{color:var(--orange)} .logo span{color:var(--quiet)}
.nav nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:15px}
.nav nav a{color:var(--soft);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:8px;font:700 15px var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--orange);color:var(--bg)} .btn-primary:hover{background:var(--orange-soft);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)} .btn-ghost:hover{border-color:var(--orange);color:var(--ink)}
.nav nav .btn{color:var(--bg)}
.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* hero */
.hero{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:80px;padding-bottom:64px}
.hero-text{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.chip{align-self:flex-start;font:13px var(--mono);color:var(--quiet);border:1px solid var(--line);border-radius:6px;padding:6px 12px}
h1{margin:0;font-size:clamp(34px,5.4vw,64px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
h1 em{font-style:normal;color:var(--orange)}
.lead{margin:0;font-size:18px;line-height:1.65;color:var(--body);max-width:580px}
.search{display:flex;align-items:center;gap:12px;background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:6px 6px 6px 16px;max-width:580px}
.search:focus-within{border-color:var(--orange)}
.search>span{font-family:var(--mono);color:var(--orange);font-weight:700}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:16px var(--mono);padding:12px 0}
.search input:focus{outline:none}
.search input::placeholder{color:#8590AD}
.search{position:relative}
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.45);padding:6px;max-height:min(420px,60vh);overflow-y:auto;text-align:left}
.suggest[hidden]{display:none}
.sg-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.sg-item:hover,.sg-item[aria-selected="true"]{background:rgba(255,255,255,.06)}
.sg-title{font-weight:600;font-size:15px}
.sg-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--quiet)}
.sg-tag{color:#7EE2B0}
.sg-tag.mem{color:var(--orange-soft)}
.sg-foot{display:block;width:100%;margin-top:4px;padding:10px 12px;border:0;border-top:1px solid var(--line);border-radius:0 0 8px 8px;background:transparent;color:var(--orange-soft);font:600 13px inherit;font-family:inherit;text-align:left;cursor:pointer}
.sg-foot:hover{color:#fff}
.tries{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--quiet)}
.tries button{font:13px var(--mono);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:6px;padding:6px 12px;min-height:36px;cursor:pointer}
.tries button:hover{border-color:var(--orange)}

.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;padding-top:20px;padding-bottom:20px;font-size:14px;color:var(--quiet)}
.strip strong{font:400 14px var(--mono);color:var(--ink)}

/* sections */
section{padding-top:72px;padding-bottom:40px}
h2{margin:0;font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.02em}
.sub{margin:10px 0 28px;font-size:17px;color:var(--body)}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.count{font:13px var(--mono);color:var(--quiet)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{font:14px var(--mono);background:transparent;color:var(--soft);border:1px solid var(--line);border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--orange);color:var(--bg);border-color:var(--orange);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px}
.card:hover{border-color:var(--line-2)}
.card h3{margin:0;font:700 17px var(--mono)}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card .by{font-size:12px;color:var(--quiet);white-space:nowrap}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card p{margin:0;font-size:15px;line-height:1.6;color:var(--body);flex:1}
.meta{display:flex;justify-content:space-between;gap:12px;font:13px var(--mono)}
.meta .cat{color:var(--orange-soft)} .meta .out{color:var(--quiet)}
.card .dl{position:relative;z-index:1;font:700 14px var(--mono);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;padding:11px;text-decoration:none;min-height:44px}
.card .dl:hover{border-color:var(--orange)}
.empty{margin:24px 0 0;padding:28px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--quiet)}
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:28px}
.box{border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.box .n{font:13px var(--mono);color:var(--orange)}
.box h3{margin:0;font-size:20px;font-weight:700}
.box p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:32px}
.band section{padding-bottom:72px}
.stack{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:14px}
.stack h3{margin:0;font-size:20px;font-weight:700}
.stack p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.stack ol{margin:0;padding:14px;list-style:none;background:var(--panel);border-radius:8px;font:13px/1.9 var(--mono);color:var(--soft)}
.stack ol b{color:var(--orange)}
.stack ol a{color:var(--soft);text-decoration:none} .stack ol a:hover{color:#fff}
.stack ol .soon{color:var(--quiet)}
.addie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.addie .box{padding:20px;gap:8px}
.addie .k{display:flex;justify-content:space-between;align-items:baseline}
.addie .k b{font:700 22px var(--mono);color:var(--orange)}
.addie .k span{font-size:12px;color:var(--quiet)}
.addie h3{font-size:17px}
.addie p{font-size:14px}
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-size:17px;font-weight:600;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--orange)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 20px;font-size:15px;line-height:1.7;color:var(--body)}
.cta{border:1px solid var(--orange);border-radius:16px;padding:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:var(--panel)}
.cta h2{font-size:clamp(24px,3vw,30px)}
.cta p{margin:10px 0 0;color:var(--body);max-width:620px}
footer{border-top:1px solid var(--rule);margin-top:64px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;padding-bottom:24px;font-size:14px;color:var(--quiet)}
footer nav{display:flex;gap:16px}
footer nav a{color:var(--quiet)}

/* detail */
.crumbs{font:13px var(--mono);color:var(--quiet);margin:32px 0 28px}
.crumbs a{color:var(--quiet)}
.detail{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;padding-bottom:40px}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:40px}
.side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
@media(min-width:960px){.side{position:sticky;top:24px}}
.tags{display:flex;flex-wrap:wrap;gap:8px;font:13px var(--mono)}
.tags span{color:var(--soft);border:1px solid var(--line);padding:4px 10px;border-radius:6px}
.tags .hot{color:var(--bg);background:var(--orange);border-color:var(--orange);font-weight:700}
.detail h1{font-family:var(--mono);font-size:clamp(26px,4.2vw,44px);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{font:15px var(--sans);color:var(--quiet);background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 16px;min-height:44px;cursor:pointer}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:700;border-bottom-color:var(--orange)}
.panel{padding-top:32px;display:flex;flex-direction:column;gap:44px}
.panel[hidden]{display:none}
.panel h2{font-size:24px}
.panel section{padding:0;display:flex;flex-direction:column;gap:14px}
.panel p{margin:0;font-size:16px;line-height:1.65;color:var(--body)}
.timeline{margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 18px 28px;font-size:16px}
.timeline li::before{content:"";position:absolute;left:-9px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--orange)}
.timeline li.sub{padding-left:48px;font-size:14px;color:var(--body)}
.timeline li.sub::before{left:-6px;width:6px;height:6px;top:9px;border-width:2px;border-color:var(--line-2)}
.prompt{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 20px;display:flex;gap:16px;align-items:flex-start}
.prompt>span{font-family:var(--mono);color:var(--orange);font-weight:700;padding-top:2px}
.prompt p{flex:1;color:var(--ink);font-size:15px}
.prompt button{font:13px var(--mono);color:var(--ink);background:transparent;border:1px solid var(--line-2);border-radius:6px;padding:8px 12px;min-height:40px;cursor:pointer;white-space:nowrap}
.files{font:13px var(--mono);color:var(--quiet)}
pre.src{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;font:13px/1.75 var(--mono);color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere;max-height:720px;overflow:auto}
.sidebox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px}
.sidebox.plain{background:transparent}
.sidebox h2{font-size:17px;font-weight:700;letter-spacing:0}
.sidebox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px}
.sidebox dt{color:var(--quiet)} .sidebox dd{margin:0;text-align:right}
.sidebox ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55;color:var(--body)}
.next{text-decoration:none;color:var(--ink);border:1px solid var(--line-2);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px}
.next:hover{border-color:var(--orange);color:var(--ink)}
.next b{font:700 14px var(--mono)} .next span{font-size:13px;color:var(--quiet)}

/* submit */
.submit-head{max-width:720px;padding:56px 0 40px;display:flex;flex-direction:column;gap:14px}
.submit-head h1{font-size:clamp(30px,4.6vw,48px);line-height:1.1}
.checklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.55;color:var(--body)}
.checklist li{display:flex;gap:10px}
.checklist li::before{content:"→";color:var(--orange);font-family:var(--mono)}
.fields{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px;display:flex;flex-direction:column;gap:18px}
.fields table{border-collapse:collapse;width:100%;font-size:15px}
.fields td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fields td:first-child{font-weight:600;padding-right:16px}
.fields td:last-child{color:var(--quiet);text-align:right;font-size:14px}
.note{font-size:14px;color:var(--quiet);margin:0}

/* tải 2 định dạng + tab cài đặt */
.dls{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:8px}
.dls .dl{font-size:12.5px;white-space:nowrap;text-align:center;display:flex;align-items:center;justify-content:center;padding:10px 8px}
.tabs.small button{font-size:14px;padding:10px 14px}
.ipanel{padding-top:16px}
.ipanel[hidden]{display:none}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6;color:var(--body)}
.steps em{color:var(--ink);font-style:normal;font-family:var(--mono);font-size:13px}
.sidebox .btn{width:100%}
@media(max-width:480px){.dls{grid-template-columns:1fr}}
.draft{font:12px var(--mono);color:var(--orange-soft);border:1px dashed var(--orange-soft);border-radius:6px;padding:2px 8px}
.tags .draft{padding:4px 10px}
.card[hidden]{display:none}

/* ===== nâng cấp cộng đồng ===== */
.skip{position:absolute;left:-9999px;top:8px;background:var(--orange);color:var(--bg);padding:8px 12px;border-radius:6px;z-index:10}
.skip:focus{left:8px}
.nav nav a[aria-current=page]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--orange)}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--orange);color:var(--bg);font:700 11px var(--mono);vertical-align:2px}
.pill{font:12px var(--mono);color:var(--quiet);border:1px solid var(--line);border-radius:9px;padding:0 6px;margin-left:4px}
.linkish{background:none;border:0;padding:6px 0;min-height:32px;color:var(--orange-soft);font:13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:#fff} .linkish.danger{color:#F3A3A3}
button:disabled{opacity:.6;cursor:wait}

/* số liệu */
.stats{display:flex;flex-wrap:wrap;gap:6px 14px;font:13px var(--mono);color:var(--soft);min-height:20px}
.stats:empty{display:none}
.st-star{color:#FFC46B} .st-new{color:var(--quiet)}
.stats.big{font-size:14px;min-height:22px}
.stats.big a{color:var(--orange-soft)}

/* trang chung */
.page-head{max-width:820px;padding:56px 0 24px;display:flex;flex-direction:column;gap:14px}
.page-head h1{font-size:clamp(30px,4.6vw,48px);line-height:1.12}
.kicker{font-size:13px;color:var(--orange-soft)}
section.tight{padding-top:32px;padding-bottom:16px}
section.tight>h2{margin-bottom:20px;font-size:clamp(22px,2.8vw,28px)}
.filters button:disabled{opacity:.4;cursor:not-allowed}

/* bài học */
.lcard .ltitle{margin:0;font:700 19px/1.35 var(--sans)}
.lcard .ltitle a{color:var(--ink);text-decoration:none}
.lcard .ltitle a::after{content:"";position:absolute;inset:0}
.ltype{font:12px var(--mono);color:var(--orange-soft)}
.t-case-study{color:#8FD3B6} .t-huong-dan{color:#9DB8FF}
.lcard[hidden]{display:none}
.atitle{font-size:clamp(28px,4vw,42px)!important;line-height:1.15;font-family:var(--sans)!important;font-weight:800!important}
.prose-wrap{gap:28px!important}
.prose{font-size:17px;line-height:1.75;color:var(--body);max-width:760px}
.prose h2{font-size:24px;color:var(--ink);margin:40px 0 12px}
.prose h3{font-size:19px;color:var(--ink);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.prose code{font:14px var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--orange-soft)}
.prose blockquote{margin:0 0 16px;border-left:3px solid var(--orange);padding:4px 0 4px 18px;color:var(--soft)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--ink);font-weight:700;border-bottom-color:var(--line-2)}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:12px}

/* workshop */
.events{display:flex;flex-direction:column;gap:12px}
.event{display:flex;gap:20px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.edate{flex:0 0 64px;height:64px;border:1px solid var(--orange);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--mono)}
.edate b{font-size:24px;line-height:1;color:var(--orange)} .edate span{font-size:12px;color:var(--quiet)}
.ebody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ebody h3{margin:0;font-size:18px}
.ebody p{margin:0;font-size:15px;color:var(--body)}
.emeta{font-size:13px!important;color:var(--quiet)!important}
.eskills a{font-size:13px;margin-right:10px}
.event.past{opacity:.6} .event.past .edate{border-color:var(--line-2)} .event.past .edate b{color:var(--quiet)} .event.past .elink{display:none}
@media(max-width:560px){.event{flex-wrap:wrap}.elink{width:100%}}

/* nhật ký */
.changelog{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.changelog li{border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.cl-head{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--quiet)}
.cl-head b{color:var(--orange);font-size:15px}
.feed{max-width:860px;padding-bottom:24px}
.fdate{font-size:15px!important;color:var(--orange-soft);letter-spacing:0;margin-bottom:12px!important}
.feed ul{margin:0;padding:0;list-style:none;border-left:2px solid var(--line)}
.feed li{display:flex;gap:16px;padding:0 0 18px 20px;align-items:flex-start}
.feed li p{margin:4px 0 0;font-size:15px;color:var(--body)}
.feed li a{color:var(--ink);font-weight:600}
.ftag{flex:0 0 auto;font:12px var(--mono);color:var(--bg);background:var(--orange);border-radius:5px;padding:3px 8px;margin-top:2px}
.ftag.alt{background:transparent;color:#9DB8FF;border:1px solid #3A4E82}
@media(max-width:560px){.feed li{flex-direction:column;gap:6px}}

/* vinh danh */
.honors .card h3{font-family:var(--sans)}
.hskills{font-size:13px!important;line-height:1.9!important}
.hskills a{color:var(--soft);margin-right:8px}

/* đánh giá & bình luận */
.community{padding:0;display:flex;flex-direction:column;gap:24px;border-top:1px solid var(--line);padding-top:40px}
.community h2{font-size:24px}
.rate-box{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.rate-left{display:flex;gap:24px;align-items:center;flex:1 1 300px}
.rate-sum{display:flex;flex-direction:column;align-items:center;min-width:96px}
.rate-sum b{font:700 44px/1 var(--mono);color:#FFC46B}
.rate-sum span{font-size:12px;color:var(--quiet);text-align:center;margin-top:6px;max-width:120px}
.rate-bars{flex:1;display:flex;flex-direction:column;gap:4px;font:12px var(--mono);color:var(--quiet)}
.rate-bars div{display:flex;gap:8px;align-items:center}
.rate-bars i{flex:1;height:6px;background:var(--line);border-radius:3px;overflow:hidden;display:block}
.rate-bars em{display:block;height:100%;background:#FFC46B}
.rate-pick{flex:1 1 260px;display:flex;flex-direction:column;gap:8px}
.stars{display:flex;gap:4px}
.stars button{background:none;border:0;font-size:34px;line-height:1;color:var(--line-2);cursor:pointer;padding:2px;min-width:44px;min-height:44px}
.stars button.on{color:#FFC46B}
.stars:hover button{color:#FFC46B} .stars button:hover~button{color:var(--line-2)}
.comments{display:flex;flex-direction:column;gap:16px}
.comments h3{margin:0;font-size:18px}
.cform{display:flex;flex-direction:column;gap:10px}
.cform textarea,.form input:not([type=checkbox]),.form select,.form textarea,.adm textarea,.adm input{width:100%;background:var(--bg);color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font:15px/1.5 var(--sans)}
.cform textarea:focus,.form input:focus,.form select:focus,.form textarea:focus,.adm textarea:focus,.adm input:focus{outline:none;border-color:var(--orange)}
.crow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.clist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.clist.sub{margin:12px 0 0 20px;padding-left:16px;border-left:2px solid var(--line)}
.c{border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.clist.sub .c{border:0;padding:4px 0}
.c.is-hidden{opacity:.55;border-style:dashed}
.chead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:14px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--line-2);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--mono)}
.when{font-size:12px;color:var(--quiet)}
.cbody{margin:8px 0 0!important;font-size:15px!important;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--soft)!important}
.cact{display:flex;gap:16px}
.form-msg{margin:0;font-size:14px;color:#8FD3B6;min-height:1em}
.form-msg.bad{color:#F3A3A3}
.save[aria-pressed=true]{border-color:var(--orange);color:var(--orange-soft)}

/* form chung */
.form{display:flex;flex-direction:column;gap:18px}
.form.narrow{max-width:520px;padding-bottom:40px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.form .hint{font-weight:400;font-size:13px;color:var(--quiet)}
.form label.check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--body)}
.form label.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--orange);flex:0 0 auto}
.form select{appearance:auto}
.form input[type=file]{padding:10px}
.form .btn{align-self:flex-start}

/* tài khoản */
.acc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:start}
.saved,.subs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.saved li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.saved li p{flex-basis:100%}
.fresh{font:700 12px var(--mono);color:var(--bg);background:var(--orange);border-radius:5px;padding:2px 8px}
.status{font:12px var(--mono);border-radius:5px;padding:2px 8px;border:1px solid var(--line-2);color:var(--soft)}
.st-approved{border-color:#8FD3B6;color:#8FD3B6} .st-rejected{border-color:#F3A3A3;color:#F3A3A3} .st-pending{border-color:var(--orange-soft);color:var(--orange-soft)}
.acc-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:24px 0}
.adm{gap:12px;margin-bottom:12px}
.adm .acc-foot{padding:4px 0}
.mdl{display:none;gap:8px}
@media(max-width:959px){.mdl{display:grid;grid-template-columns:1fr 1fr}.mdl .btn{font-size:13px;padding:10px 8px;height:100%;text-align:center}}

/* tiêu đề trang chủ: mỗi cụm giữ nguyên trên một dòng, cỡ chữ tự co theo bề ngang khối chữ */
.hero-text{container-type:inline-size}
.hero-title{font-size:clamp(28px,5vw,60px)}
@supports (font-size:1cqi){.hero-title{font-size:min(52px,calc(100cqi / 10.4))}}
.hero-title .nw{white-space:nowrap}

/* thanh điều hướng: vùng bấm đủ lớn; trên điện thoại menu thành một dải vuốt ngang */
.nav .wrap{flex-wrap:nowrap}
.nav nav{margin-left:auto}
.nav nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.nav nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--orange)}
.head-row a.mono,.sidebox.plain a.mono{display:inline-flex;align-items:center;min-height:40px}
@media(max-width:860px){
  .nav .wrap{flex-wrap:wrap;gap:4px 12px;padding-top:12px;padding-bottom:0}
  .nav .nav-cta{margin-left:auto;min-height:40px;padding:8px 14px;font-size:14px}
  .nav nav{order:3;flex:1 0 100%;margin:0 -24px;padding:0 24px;flex-wrap:nowrap;gap:22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .nav nav::-webkit-scrollbar{display:none}
}
.logo{display:inline-flex;align-items:center;min-height:44px}
.nav-acct{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--soft);text-decoration:none;white-space:nowrap}
.nav-acct[aria-current=page]{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--orange)}
.nav-acct:hover{color:#fff}
@media(min-width:861px){.nav nav{gap:8px 22px}.nav-acct{margin-left:6px}}
@media(max-width:860px){.nav-acct{margin-left:auto;font-size:14px}.nav-acct+.nav-cta{margin-left:0}}
@media(max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .nav nav{margin:0 -16px;padding:0 16px}
  .logo{font-size:16px}
  .nav .wrap{gap:4px 10px}
  .nav-acct{font-size:13.5px}
  .nav .nav-cta{padding:8px 12px;font-size:13.5px}
  .hero{padding-top:32px;padding-bottom:40px;gap:32px}
  .hero-text{gap:18px}
  .lead{font-size:16.5px}
  section{padding-top:48px;padding-bottom:24px}
  .page-head,.submit-head{padding-top:32px;padding-bottom:16px}
  .cta{padding:24px}
  .band section{padding-bottom:48px}
  .detail{gap:28px}
  .main{gap:28px}
  .fields{padding:20px}
  .sidebox{padding:18px}
  .rate-box{padding:18px}
}
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{white-space:nowrap;flex:0 0 auto}
@media(max-width:600px){.tabs button{padding:12px 12px;font-size:14px}.mdl .btn{font-size:12px;white-space:nowrap;padding:10px 6px}}

/* ===== thu email: đăng ký, bản tin, danh sách thành viên ===== */
.auth-tabs{margin-bottom:24px;max-width:520px}
.form label.consent span{font-size:14px;line-height:1.55}
.acc-nudge{border-color:var(--orange);margin-bottom:16px;flex-direction:row;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.mstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.mstat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.mstat b{font:700 30px/1.1 var(--mono);color:var(--orange)}
.mstat span{font-size:13px;color:var(--quiet)}
.mbreak{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:20px}
.mbreak>div{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.mbreak h3{margin:0 0 8px;font-size:14px;color:var(--soft)}
.mbreak ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.mbreak li{display:flex;justify-content:space-between;gap:12px;color:var(--body)}
.mbreak li b{font-family:var(--mono);color:var(--ink)}
.mbar{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:10px 16px!important;margin-bottom:12px}
.mbar select,.mbar input[type=search]{width:auto!important;min-width:180px;flex:1 1 180px}
.mbar .btn{align-self:auto!important}
.mtable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.mtable{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.mtable th,.mtable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.mtable th{background:var(--panel);color:var(--soft);font-weight:600;position:sticky;top:0}
.mtable tr:last-child td{border-bottom:0}

/* đăng nhập Google */
.gblock{max-width:520px;display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.gbtn{background:#fff;color:#1F1F1F;border:1px solid #DADCE0;font-weight:600;gap:12px;width:100%}
.gbtn:hover{background:#F1F3F4;color:#1F1F1F}
.gnote{border:1px dashed var(--line-2);border-radius:10px;padding:12px 14px}
.gor{display:flex;align-items:center;gap:12px;color:var(--quiet);font-size:13px;margin:8px 0 4px}
.gor::before,.gor::after{content:"";flex:1;border-top:1px solid var(--line)}
.onb{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;background:var(--panel);border:1px solid var(--orange);border-radius:12px;padding:12px 16px;font-size:15px}
.onb .btn{min-height:40px;padding:8px 16px}

/* trang tài khoản: 2 cột */
.acc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:-8px 0 24px}
.acc-actions{display:flex;flex-wrap:wrap;gap:10px}
.acc2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:20px;align-items:start;padding-bottom:40px}
.acc-main,.acc-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.acc-main .sidebox{min-height:0}
.acc-side .form.sidebox{gap:14px}
.acc-side .form .btn{align-self:stretch}
.acc-danger{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
@media(max-width:860px){.acc2{grid-template-columns:1fr}}

/* ===== giao diện v2: thẻ gọn, trang chủ căn giữa, trang chi tiết 2 cột ===== */
.ico{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}
/* trang chủ */
.hero-c{justify-content:center;text-align:center;padding-top:72px;padding-bottom:48px}
.hero-c .hero-text{flex:0 1 860px;align-items:center}
.hero-c .chip{align-self:center}
.hero-c .lead{margin:0 auto;max-width:680px}
.hero-c .search{width:100%;max-width:680px;margin:0 auto}
.hero-c .tries{justify-content:center}
.hero-c .hero-title{max-width:1040px}
.strip .wrap{justify-content:center}
/* thẻ skill gọn */
.sgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:14px}
.scard{padding:18px;gap:10px;transition:border-color .15s,transform .15s}
.scard:hover{transform:translateY(-2px);border-color:var(--orange)}
.sc-head{display:flex;gap:12px;align-items:flex-start}
.sc-name{min-width:0;display:flex;flex-direction:column;gap:2px}
.scard h3{font:700 16px/1.35 var(--sans)}
.scard h3 a{color:var(--ink)}
.sc-slug{font:12px var(--mono);color:var(--quiet);overflow-wrap:anywhere}
.sc-desc{font-size:14px!important;line-height:1.55!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.sc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;margin-top:auto}
.sc-cat{color:var(--soft);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.sc-foot .stats{font-size:12px;min-height:0}
.sbadge{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font:700 16px var(--mono);border:1px solid currentColor;background:rgba(255,255,255,.04)}
.sbadge.big{width:56px;height:56px;border-radius:14px;font-size:24px}
.sbadge.c0{color:#7FB2FF}.sbadge.c1{color:#F99A4E}.sbadge.c2{color:#8FD3B6}.sbadge.c3{color:#C9A6FF}.sbadge.c4{color:#FFC46B}.sbadge.c5{color:#FFD9A8}.sbadge.c6{color:#8FDCEB}
/* khung tác giả */
.aubox{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px}
.au-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px;box-shadow:0 20px 50px -20px rgba(247,123,27,.35)}
.au-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.au-body p{margin:0;font-size:15.5px;line-height:1.7;color:var(--body)}
.au-id{display:flex;align-items:center;gap:14px}
.au-avatar{border-radius:50%;border:2px solid var(--orange);object-fit:cover;flex:0 0 auto}
.au-id h2{font-size:clamp(22px,2.6vw,28px)}
.au-title{margin:4px 0 0!important;font:600 12.5px/1.5 var(--mono)!important;color:var(--orange-soft)!important;text-transform:uppercase;letter-spacing:.02em}
.au-quote{margin:0;border-left:3px solid var(--orange);padding:4px 0 4px 16px;font-size:17px;line-height:1.6;color:var(--ink);font-weight:600}
.au-focus{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.au-focus li{font-size:13px;color:var(--soft);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px}
.au-links{display:flex;flex-wrap:wrap;gap:8px}
.pillbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;background:rgba(255,255,255,.04)}
.pillbtn:hover{border-color:var(--orange);color:#fff}
.pillbtn.hl{border-color:var(--orange);color:var(--orange-soft)}
.pillbtn.sm{min-height:34px;padding:6px 12px;font-size:13px}
.au-mini .au-id b{display:block;font-size:15px}
.au-mini .au-avatar{border-width:1.5px}
@media(max-width:760px){.aubox{grid-template-columns:1fr;padding:16px;gap:20px}.au-photo img{max-height:420px}}
/* trang chi tiết */
.crumbs{font:13px var(--sans)}
.dhead{display:flex;flex-direction:column;gap:14px}
.dtitle{display:flex;gap:16px;align-items:center}
.detail .dtitle h1{font-family:var(--sans);font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em}
.dsub{margin:6px 0 0;font-size:14px;color:var(--quiet)}
.dsub .mono{font-size:13px;color:var(--soft)}
.dhead .lead{max-width:760px;font-size:17px}
.metarow{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--quiet);align-items:center}
.metarow>span{display:inline-flex;align-items:center;gap:6px}
.metarow b{color:var(--ink);font-weight:600}
.metarow .stats.big{font-size:14px}
.share{display:flex;align-items:center;gap:8px}
.iconbtn{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);background:transparent;color:var(--soft);cursor:pointer}
.iconbtn:hover{border-color:var(--orange);color:#fff}
.iconbtn .ico{width:18px;height:18px}
.usebox{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px}
.usebox h2{font-size:17px;letter-spacing:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:4px}
.seg button{min-height:38px;border:0;border-radius:7px;background:transparent;color:var(--soft);font:600 14px var(--sans);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--line);color:var(--ink);box-shadow:inset 0 -2px 0 var(--orange)}
.use-dl{width:100%}
.use-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.55;color:var(--body)}
.use-steps[hidden]{display:none}
.use-steps b{color:var(--ink)}
.use-steps em{font-style:normal;color:var(--ink);font-family:var(--mono);font-size:12.5px}
.usebox .save{width:100%}
.usebox .note a{color:var(--orange-soft)}
.use-m{display:none}
@media(max-width:959px){.use-m{display:flex}.use-d{display:none}}
.mini{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:var(--ink);padding:10px;margin:0 -10px;border-radius:10px}
.mini:hover{background:rgba(255,255,255,.04)}
.mini b{display:block;font-size:14.5px;line-height:1.35}
.mini small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.5;color:var(--quiet);margin-top:2px}
.side .sidebox.plain{gap:10px}
.panel p{max-width:72ch}
.mdl{display:none!important}
.scard .sc-desc{flex:0 0 auto;max-height:calc(1.55em * 3)}
.scard .sc-foot{margin-top:auto;padding-top:4px}
#noi-bat{padding-bottom:8px}
.timeline li{padding-bottom:12px}
.timeline li.sub{padding-bottom:8px}
/* khoảng cách giữa các mục (.wrap đang ghi đè padding của section) */
main > section.wrap{padding-top:64px;padding-bottom:16px}
main > section.wrap#noi-bat{padding-top:48px}
.band > section.wrap{padding-top:56px;padding-bottom:64px}
main > section.wrap#tac-gia{padding-top:72px}
@media(max-width:600px){main > section.wrap{padding-top:44px;padding-bottom:8px}.band > section.wrap{padding-top:40px;padding-bottom:44px}}
main > section.wrap#tac-gia{padding-top:48px}

/* mức truy cập: Miễn phí / Thành viên */
.acc-tag{display:inline-flex;align-items:center;gap:4px;font:600 12px var(--sans);border-radius:999px;padding:2px 9px;line-height:1.5;white-space:nowrap}
.acc-tag .ico{width:12px;height:12px}
.acc-tag.free{color:#7EE2B0;background:rgba(46,180,120,.12);border:1px solid rgba(126,226,176,.35)}
.acc-tag.mem{color:var(--orange-soft);background:rgba(247,123,27,.1);border:1px solid rgba(249,154,78,.45)}
.metarow .acc-tag{font-size:13px;padding:3px 11px}
.mem-note[hidden]{display:none}
.mem-note{display:flex;gap:8px;align-items:flex-start;margin:-4px 0 0;font-size:13.5px;color:var(--soft);line-height:1.5}
.mem-note .ico{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--orange-soft)}
.btn .ico{width:16px;height:16px}
.btn.pulse{box-shadow:0 0 0 4px rgba(247,123,27,.35)}
.dl-err{margin:6px 0 0}
/* hộp mời đăng ký */
.gate{position:fixed;inset:0;z-index:50;background:rgba(5,10,28,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.gate-box{position:relative;background:var(--panel);border:1px solid var(--line-2);border-radius:16px;max-width:440px;width:100%;padding:28px 24px 24px}
.gate-box h2{margin:4px 0 10px;font-size:21px;line-height:1.3}
.gate-box p{margin:0 0 18px;color:var(--body);font-size:15px}
.gate-k{font:600 12px var(--mono)!important;color:var(--orange-soft)!important;text-transform:uppercase;letter-spacing:.06em;margin:0!important}
.gate-act{display:flex;flex-wrap:wrap;gap:10px}
.gate-act .btn{flex:1 1 180px}
.gate-x{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:transparent;color:var(--quiet);font-size:26px;line-height:1;cursor:pointer;border-radius:8px}
.gate-x:hover{color:var(--ink)}


/* bài viết chuyên sâu: khối đặc biệt, mục lục, chuỗi bài */
.prose h2{scroll-margin-top:24px}
.ablock{margin:24px 0;border-radius:14px;padding:18px 20px 4px;border:1px solid var(--line);background:var(--panel)}
.ablock .ab-k{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--orange-soft)}
.ablock .ab-k .ico{width:16px;height:16px}
.ablock p,.ablock ul,.ablock ol{font-size:16px}
.ablock.tomtat{border-color:var(--line-2)}
.ablock.chiase{border-left:4px solid var(--orange);background:rgba(247,123,27,.06)}
.ablock.vidu{border-style:dashed;border-color:var(--line-2);background:transparent}
.ablock.vidu .ab-k{color:var(--quiet)}
.ablock.luuy{border-left:4px solid #E9C46A}
.ablock.luuy .ab-k{color:#E9C46A}
.ablock.skill{background:linear-gradient(180deg,rgba(247,123,27,.08),var(--panel));border-color:rgba(249,154,78,.35);padding-bottom:18px}
.askills{display:grid;gap:10px}
.askill{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-decoration:none;color:var(--ink)}
.askill:hover{border-color:var(--orange);color:var(--ink)}
.as-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.as-t b{font-size:15.5px;line-height:1.35}
.as-t small{font-size:13.5px;line-height:1.45;color:var(--quiet);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.askill .acc-tag{flex:0 0 auto}
.atoc{margin:8px 0 24px;border:1px solid var(--line);border-radius:14px;padding:14px 20px}
.atoc summary{cursor:pointer;font:600 13px var(--mono);color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.atoc ol{margin:12px 0 4px;padding-left:22px;font-size:15.5px;line-height:1.6}
.atoc li{margin-bottom:4px}
.atoc a{color:var(--soft);text-decoration:none} .atoc a:hover{color:var(--orange-soft)}
.anext{display:flex;flex-direction:column;gap:4px;max-width:760px;margin-top:8px;padding:18px 20px;border:1px solid var(--line-2);border-radius:14px;text-decoration:none}
.anext small{font:600 12px var(--mono);color:var(--quiet);text-transform:uppercase;letter-spacing:.04em}
.anext b{font-size:18px;color:var(--ink)} .anext:hover{border-color:var(--orange)}
.lseries{flex:0 0 auto!important;margin:-4px 0 0;font:600 12px var(--mono);color:var(--orange-soft)}
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.series{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--panel)}
.series h3{margin:0 0 12px;font-size:18px}
.series ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.series li{color:var(--quiet)}
.series li a{color:var(--ink);text-decoration:none;font-weight:600} .series li a:hover{color:var(--orange-soft)}
.series li span{display:block;font-size:12.5px;color:var(--quiet)}
.sr-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
.sr-list a{color:var(--soft);text-decoration:none} .sr-list a:hover{color:var(--orange-soft)}
.sr-list b{color:var(--orange-soft)}
@media (max-width:640px){.ablock{padding:16px 16px 2px}.askill{flex-wrap:wrap}.askill .acc-tag{margin-left:52px}}
/* chuỗi bài: mỗi chuỗi một dải ngang, bài là ô đánh số */
.track{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:20px 22px 22px;margin-bottom:16px}
.track-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.track-head h3{margin:0;font-size:19px}
.track-head p{margin:2px 0 0;font-size:13.5px;color:var(--quiet)}
.track-head .btn{min-height:40px;padding:8px 14px;font-size:14px}
.track-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.track-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-decoration:none;color:var(--ink);transition:border-color .15s}
.track-list a:hover{border-color:var(--orange)}
.track-list .tn{font:700 13px var(--mono);color:var(--orange-soft)}
.track-list .tt{font-weight:600;font-size:15px;line-height:1.4;flex:1}
.track-list .tm{font-size:12.5px;color:var(--quiet)}
@media (max-width:640px){.track{padding:16px}.track-list{grid-template-columns:1fr}.track-list a{flex-direction:row;align-items:baseline;gap:10px;padding:12px 14px}.track-list .tm{white-space:nowrap}}

/* Chân trang: dòng bản quyền */
footer nav{flex-wrap:wrap}
.foot-legal{flex-basis:100%;margin:0;font-size:13px;color:var(--quiet)}
.foot-legal a{color:var(--quiet);text-decoration:underline}

/* Mời Minh Thắng một ly cafe (dưới ô tải skill) */
.cafe{border-top:1px dashed var(--line);padding-top:12px}
.cafe summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--orange-soft);font-size:14px;font-weight:600;list-style:none}
.cafe summary::-webkit-details-marker{display:none}
.cafe summary .ico{width:18px;height:18px}
.cafe summary:hover{color:#fff}
.cafe-body{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.cafe-body img{width:220px;max-width:100%;height:auto;border-radius:12px;background:#fff;align-self:center}
.cafe-opts{display:flex;flex-wrap:wrap;gap:6px}
.cafe-opts button{font:600 13px inherit;font-family:inherit;color:var(--soft);background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;min-height:34px;cursor:pointer}
.cafe-opts button:hover{border-color:var(--orange)}
.cafe-opts button[aria-pressed="true"]{border-color:var(--orange);color:var(--orange-soft);background:rgba(255,255,255,.04)}
.cafe-qr{display:flex;flex-direction:column;align-items:center;gap:6px}
.cafe-qr[hidden]{display:none}
.cafe-qr img{border-radius:12px}
.cafe-amt{margin:0;font-size:13px;color:var(--soft);text-align:center}
.cafe-amt b{color:var(--ink);font-size:15px}
.cafe-acct{margin:0;font-size:13px;color:var(--soft);text-align:center;line-height:1.7}
.cafe-acct span{display:block;font-size:15px;color:var(--ink);letter-spacing:.02em}
/* Lời mời vào nhóm Zalo sau khi đăng ký, ô Zalo trong trang Tài khoản */
.onb-act{display:inline-flex;align-items:center;gap:14px}
.acc-zalo .btn{align-self:flex-start}