/*
Theme Name: DeThiHSK Codex Theme
Theme URI: https://dethihsk.net
Author: FoxHSK Team
Description: Giao diện kho đề thi HSK chuẩn Hanban & BLCUP (Codex UI + Full SSR SEO + Cloudflare Turnstile Comments).
Version: 2.0.0
Text Domain: dethihsk
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Serif+SC:wght@600;800&display=swap');
:root{--bg:#14161e;--panel:#1d202b;--text:#f6f6f8;--muted:#9396a7;--line:#ffffff12;--gold:#ffd875}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{color:inherit}header{height:90px;display:flex;align-items:center;gap:35px;padding:0 3.5%;position:absolute;top:0;z-index:5;width:100%;background:linear-gradient(#11131de8,#11131d30);border-bottom:1px solid #ffffff08}.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;font-size:23px;font-weight:800;letter-spacing:-1px}.brand b{color:var(--gold)}.brand small{display:block;font-size:9px;color:#b9bbc5;font-weight:400;letter-spacing:.2px;margin-top:5px}.brand-icon{font-family:serif;border:2px solid var(--gold);color:var(--gold);border-radius:12px 3px 12px 3px;font-size:30px;width:45px;height:45px;display:grid;place-items:center;transform:rotate(-5deg)}.search{display:flex;align-items:center;gap:11px;background:#ffffff0c;border:1px solid #ffffff0b;border-radius:9px;padding:12px 14px;max-width:295px;flex:1}.search svg{width:18px;fill:none;stroke:#aaaebc;stroke-width:1.5}.search input{width:100%;background:none;border:0;color:white;outline:0;font-size:12px}.search:focus-within{border-color:var(--gold)}kbd{font-size:12px;color:#999;border:1px solid #ffffff25;padding:1px 5px;border-radius:3px}nav{display:flex;gap:25px;align-items:center;font-size:12px;white-space:nowrap}nav a{color:#d9dae2}nav a:hover,nav a.active{color:var(--gold)}#saved-count{font-size:9px;border-radius:4px;background:#ffffff12;padding:3px 5px;margin-left:4px}.fox-link{margin-left:auto;font-size:12px;background:#ffffffed;color:#24242d;border-radius:7px;padding:12px 16px;font-weight:600;white-space:nowrap}.fox-link span{margin-left:10px}.icon-button{border:1px solid #ffffff30;background:#ffffff10;border-radius:8px;padding:10px}#menu{display:none}.hero{height:665px;position:relative;overflow:hidden;background:#19252b}.hero-art{position:absolute;inset:0;background:url('assets/great-wall.jpg') center 51%/cover;filter:saturate(.65)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#13161ef7 0%,#15171edb 28%,#15171e42 65%,#15171e30),linear-gradient(0deg,var(--bg) 0%,transparent 38%,#11141e30)}.hero-content{position:relative;padding:146px 5% 0;max-width:900px}.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;font-weight:600}.eyebrow>span{width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 12px #ffd87588}.eyebrow i{font-style:normal;color:#777}.hero-chinese{font-family:'Noto Serif SC',serif;font-size:19px;letter-spacing:7px;color:var(--gold);margin:28px 0 13px}h1{font-size:clamp(32px,3.4vw,53px);line-height:1.22;letter-spacing:-2px;margin:0;font-weight:800}h1 em{font-style:normal;color:var(--gold)}.hero-description{color:#b9bdc9;line-height:1.9;font-size:13px;margin:22px 0}.hero-tags{display:flex;gap:8px;align-items:center;font-size:10px}.hero-tags>*{padding:6px 9px;border:1px solid #ffffff35;border-radius:4px}.hero-tags b{background:var(--gold);color:#332714;border-color:var(--gold)}.hero-actions{display:flex;gap:12px;margin-top:27px}.button{border:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:8px;padding:15px 21px;font-size:12px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--gold);color:#241e11;box-shadow:0 4px 24px #ffd8750b}.primary:hover{background:#ffe5a4}.glass{background:#ffffff0a;border:1px solid #ffffff30}.hero-note{margin-top:25px;display:flex;align-items:center;gap:5px;font-size:10px;color:#8e93a3}.hero-note a{color:#d3d5df}.tiny-line{height:1px;background:#737986;width:20px;margin-right:6px}.hero-right{position:absolute;right:7%;top:150px;display:flex;align-items:center;flex-direction:column;gap:19px;color:#fff8e5b3}.hero-right>span{font-size:8px;letter-spacing:4px;writing-mode:vertical-rl;position:absolute;right:-28px;top:15px}.hero-right strong{font-family:'Noto Serif SC',serif;font-size:48px;line-height:1.45;font-weight:600;text-shadow:0 2px 15px #111}.hero-right small{font-size:7px;letter-spacing:3px}.hero-bottom{position:absolute;bottom:36px;left:5%;right:5%;display:flex;align-items:center;gap:20px;color:#747c8c;font-size:11px}.hero-bottom b{color:white;font-size:18px;margin-right:6px}.slides{display:flex;gap:6px}.slides button{border:0;width:20px;height:3px;background:#ffffff30;padding:0}.slides button.selected{background:var(--gold);width:38px}.hero-bottom p{margin-left:auto;font-size:8px;letter-spacing:2px;color:#bac0c9}.page-content{padding:0 5%;max-width:1800px;margin:auto}.levels{display:flex;gap:35px;padding:25px 0 36px;border-bottom:1px solid var(--line);align-items:center}.level-intro{width:180px;flex-shrink:0}.level-intro small{font-size:8px;letter-spacing:1.7px;color:var(--muted)}.level-intro h2{font-size:18px;line-height:1.5;font-weight:600;margin:10px 0}.level-intro h2 span{color:var(--gold);margin-left:8px}.level-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;flex:1}.level-card{position:relative;overflow:hidden;border:1px solid #ffffff0a;border-radius:9px;min-height:91px;text-align:left;padding:17px;background:linear-gradient(120deg,var(--tint),#202431);transition:.2s}.level-card:hover,.level-card.chosen{border-color:var(--color);transform:translateY(-3px)}.level-card b{display:block;font-size:18px;color:var(--color);position:relative;z-index:1}.level-card small{display:block;font-size:9px;color:#c2c6d1;margin-top:7px;position:relative}.level-card>span{position:absolute;font-size:65px;font-weight:900;right:5px;bottom:-14px;color:var(--color);opacity:.09}.library{padding-top:44px}.section-heading{display:flex;justify-content:space-between;align-items:center}.gold{color:var(--gold);font-size:8px;letter-spacing:1.8px}.section-heading h2{font-size:28px;letter-spacing:-.8px;margin:10px 0 12px}.dot{color:var(--gold)}.section-heading p{font-size:11px;color:var(--muted);margin:0}.text-link{font-size:10px;color:#c9ccd6}.text-link:hover{color:var(--gold)}.filter-bar{display:flex;justify-content:space-between;gap:15px;margin-top:27px;padding:15px 0;border-bottom:1px solid var(--line)}.tabs{display:flex;gap:7px;align-items:center}.tabs button{border:1px solid transparent;background:none;color:#a2a5b4;font-size:10px;border-radius:6px;padding:9px 14px;white-space:nowrap}.tabs button.active{background:var(--gold);color:#292212;font-weight:700}.tabs button:hover{border-color:#ffffff30}.filter-selects{display:flex;gap:8px}select{border:1px solid #ffffff15;background:#1e212c;color:#c5c8d4;border-radius:6px;padding:8px 10px;font-size:10px;max-width:145px}.results-line{display:flex;justify-content:space-between;color:#8e93a4;font-size:9px;margin:18px 0}.available{display:flex;align-items:center;gap:6px}.available i{width:5px;height:5px;border-radius:50%;background:#9bc7ab}.exam-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:25px 18px}.exam-card{min-width:0;animation:appear .35s ease both}.poster-link{position:relative;display:block;width:100%;border:0;padding:0;background:none;border-radius:9px;overflow:hidden;text-align:left;aspect-ratio:3/4;transition:transform .25s}.poster-link:hover{transform:translateY(-5px)}.poster{height:100%;background:linear-gradient(150deg,var(--p1),var(--p2));position:relative;overflow:hidden;padding:19px;color:#fff8e8}.poster:before{content:'';position:absolute;inset:0;background-image:url('assets/great-wall.jpg');background-size:auto 110%;background-position:var(--pos,50%);mix-blend-mode:soft-light;opacity:.55}.poster.palace:before{background-image:url('assets/palace.jpg')}.poster:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111722c9,transparent 60%)}.poster-top{position:relative;display:flex;justify-content:space-between;z-index:1;font-size:6px;letter-spacing:1px;color:#ffffffaa}.poster-symbol{position:absolute;top:21%;right:12%;font-family:'Noto Serif SC',serif;font-size:88px;opacity:.16}.poster-title{position:absolute;left:19px;top:25%;z-index:1}.poster-title small{font-size:8px;letter-spacing:3px;display:block}.poster-title strong{font-size:38px;letter-spacing:-2px;line-height:1.3;display:block}.poster-title strong span{font-size:52px;font-weight:400}.poster-title em{font-size:9px;letter-spacing:4px;font-family:'Noto Serif SC',serif;font-style:normal}.poster-bottom{position:absolute;bottom:20px;left:19px;right:19px;z-index:2;border-top:1px solid #ffffff35;padding-top:11px}.poster-bottom b{display:block;font-size:13px;letter-spacing:2px}.poster-bottom small{display:block;color:#ddd9cd;font-size:6px;letter-spacing:1.5px;margin-top:6px}.poster-badge{position:absolute;bottom:0;right:0;padding:6px 10px;background:var(--gold);font-size:8px;font-weight:600;color:#292519;z-index:3;border-radius:7px 0 0 0}.poster-hover{position:absolute;inset:0;background:#080c1770;display:flex;align-items:center;justify-content:center;opacity:0;z-index:4;transition:opacity .2s}.poster-hover span{border:1px solid #ffffff70;border-radius:100%;width:46px;height:46px;display:grid;place-items:center;background:#ffffff20;backdrop-filter:blur(5px);font-size:20px}.poster-link:hover .poster-hover{opacity:1}.card-title-row{display:flex;align-items:flex-start;gap:5px;margin-top:12px}.exam-card h3{font-size:11px;font-weight:600;line-height:1.6;margin:0;flex:1}.exam-card h3 a:hover{color:var(--gold)}.save{border:0;background:none;padding:0 0 5px 5px;font-size:17px;color:#72798c;line-height:1.2}.save.saved{color:var(--gold)}.card-subtitle{color:#717a90;font-size:9px;margin:4px 0 9px}.card-meta{display:flex;align-items:center;gap:6px;font-size:8px;color:#a8aebf}.card-meta .tag{color:var(--gold);background:#ffd8750c;border-radius:3px;padding:3px 5px}.card-meta i{font-style:normal;color:#525968}.more-row{display:flex;align-items:center;flex-direction:column;margin:34px 0 42px}.outline{background:none;border:1px solid #ffffff26;font-size:10px;padding:12px 20px}.more-row p{font-size:8px;color:#666e83;margin-top:13px}.fox-banner{display:flex;align-items:center;gap:25px;padding:33px 38px;background:radial-gradient(ellipse at 90% 100%,#ffd8750c,transparent 60%),#1b1e28;border:1px solid #ffd87518;border-radius:12px}.fox-symbol{font-family:serif;font-size:45px;color:var(--gold);width:75px;height:75px;display:grid;place-items:center;border-radius:50%;background:#ffd8750b}.fox-banner h2{font-size:24px;font-weight:600;letter-spacing:-.6px;margin:10px 0}.fox-banner p{font-size:10px;color:#979dae;margin:0}.fox-banner .button{margin-left:auto;white-space:nowrap}.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;padding:55px 0}.faq h2{font-size:25px;letter-spacing:-.6px}.faq p{font-size:11px;color:var(--muted);line-height:1.9}.faq-items details{border-bottom:1px solid var(--line);padding:16px 0}.faq-items summary{cursor:pointer;list-style:none;font-size:11px;display:flex;justify-content:space-between;gap:20px}.faq-items summary::-webkit-details-marker{display:none}.faq-items summary span{color:var(--gold)}footer{padding:32px 5%;border-top:1px solid var(--line);display:flex;align-items:center;gap:35px;color:#7f8799;font-size:9px}footer .brand{color:white;font-size:19px}footer .brand-icon{font-size:25px;width:38px;height:38px}footer p{line-height:1.9}footer p a{color:#c3c7d1}footer>span{margin-left:auto;white-space:nowrap}footer>a{white-space:nowrap}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,30px);opacity:0;background:var(--gold);color:#242015;padding:14px 25px;border-radius:9px;font-size:12px;pointer-events:none;z-index:30;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}.empty{text-align:center;padding:65px 0;color:var(--muted)}.empty h3{color:white}.empty .button{margin-top:15px}#detail{padding-top:110px;background:radial-gradient(ellipse at 80% 0%,#66794d20,transparent 45%);min-height:80vh}.detail-wrap{max-width:1200px;margin:auto;padding:15px 5% 60px}.breadcrumbs{font-size:10px;color:#8d96a8;margin-bottom:35px;display:flex;gap:12px}.breadcrumbs a:hover{color:var(--gold)}.detail-hero{display:grid;grid-template-columns:220px 1fr;gap:42px}.detail-poster{aspect-ratio:3/4;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px #0004}.detail-info h1{font-size:35px;margin:16px 0 20px;letter-spacing:-1px}.detail-info>p{color:#9da5b8;line-height:1.9;font-size:12px;max-width:620px}.detail-stats{display:flex;gap:30px;margin:22px 0}.detail-stats b{font-size:23px;display:block;font-weight:600}.detail-stats span{font-size:9px;color:#8f98aa;display:block;margin-top:7px}.detail-actions{display:flex;gap:10px;flex-wrap:wrap}.external-note{font-size:9px!important;color:#767f93!important}.detail-columns{display:grid;grid-template-columns:1fr 300px;gap:35px;margin-top:45px}.detail-panel{padding:26px;border:1px solid var(--line);border-radius:10px;background:#1b1e27}.detail-panel h2{font-size:18px;margin:0 0 20px}.detail-panel p{font-size:12px;line-height:1.9;color:#9ba4b8}.structure-row{display:flex;align-items:center;gap:15px;padding:20px 0;border-top:1px solid var(--line)}.structure-icon{width:38px;height:38px;border-radius:9px;background:#ffd87510;display:grid;place-items:center;color:var(--gold);font-size:18px}.structure-row b{font-size:12px}.structure-row small{display:block;color:#9098aa;font-size:10px;margin-top:7px}.structure-row>span:last-child{margin-left:auto;color:var(--gold);font-size:11px}.download-link{display:flex;align-items:center;gap:12px;padding:17px 0;border-top:1px solid var(--line)}.download-link span{font-size:20px;color:var(--gold)}.download-link b{font-size:11px;font-weight:500}.download-link small{display:block;margin-top:5px;font-size:9px;color:#8d96ab}.download-link i{font-style:normal;margin-left:auto;color:#999}.related{margin-top:40px}.related h2{font-size:22px;margin-bottom:23px}.detail-tabs{display:flex;gap:25px;border-bottom:1px solid var(--line);margin:30px 0 25px}.detail-tabs button{border:0;border-bottom:2px solid transparent;padding:15px 0;background:none;color:#969eb0;font-size:12px}.detail-tabs button.active{color:var(--gold);border-color:var(--gold)}.question{border:1px solid var(--line);border-radius:8px;padding:20px;margin:15px 0}.question h3{font-size:13px;font-weight:500}.question .chinese{font-family:'Noto Serif SC',serif;font-size:25px;color:white}.question summary{font-size:11px;color:var(--gold);cursor:pointer}.question p{font-size:11px;color:#a5acbd;line-height:1.9}.preview-note{background:#ffd87509;border:1px solid #ffd87520;padding:15px;border-radius:8px;font-size:11px;line-height:1.9;color:#c1b48f}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){header{gap:45px}.hero{height:740px}.hero-content{padding-top:170px}.hero-right{top:200px}.hero-right strong{font-size:58px}.hero-description{font-size:15px}.poster-title strong{font-size:48px}.poster-title strong span{font-size:65px}.poster-symbol{font-size:110px}}
@media(max-width:1150px){header{gap:20px}.brand{font-size:20px}.brand small{font-size:8px}nav{gap:15px}.fox-link{font-size:10px;padding:12px}.search{max-width:230px}.level-intro{width:145px}.levels{gap:20px}.level-card{padding:14px 10px}.level-card b{font-size:16px}.filter-bar{flex-wrap:wrap}.poster{padding:12px}.poster-title,.poster-bottom{left:12px}.poster-title strong{font-size:30px}.poster-title strong span{font-size:44px}.poster-top{font-size:5px}.card-meta{gap:4px;font-size:7px}.fox-banner{padding:25px}.fox-banner h2{font-size:21px}footer{gap:20px}}
@media(max-width:900px){header{height:78px}.search{margin-left:auto}.fox-link{display:none}nav{font-size:11px}.hero{height:620px}.hero-content{padding-top:132px}.hero-right{right:9%;top:175px;opacity:.7}.hero-right strong{font-size:36px}.levels{display:block}.level-intro{width:auto;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.level-intro h2{font-size:15px}.exam-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.poster-title strong{font-size:36px}.poster-title strong span{font-size:50px}.poster-top{font-size:6px}.fox-banner{gap:15px;flex-wrap:wrap}.fox-banner .button{margin-left:auto}.fox-symbol{display:none}.faq{gap:30px}.detail-columns{grid-template-columns:1fr 260px;gap:20px}.detail-hero{gap:25px;grid-template-columns:190px 1fr}.detail-info h1{font-size:29px}.detail-info>p{font-size:11px}footer{flex-wrap:wrap}footer>span{margin-left:0}}
@media(max-width:600px){header{height:75px;padding:0 5%;gap:12px}.brand{font-size:19px}.brand-icon{width:36px;height:36px;font-size:24px}.brand small{font-size:6px}.search{background:none;padding:8px;max-width:150px;border:0}.search input{font-size:10px}.search kbd{display:none}nav{display:none;position:absolute;top:75px;left:0;right:0;padding:22px;background:#191d29;box-shadow:0 20px 20px #0004}nav.open{display:flex}#menu{display:block;padding:7px;border:0;background:none;font-size:20px}.hero{height:610px}.hero-content{padding-top:130px}.hero-art{background-position:66% 50%;opacity:.7}.hero-shade{background:linear-gradient(90deg,#14161eea,#14161e55),linear-gradient(0deg,#14161e,transparent 70%)}.hero-right{display:none}h1{font-size:34px;letter-spacing:-1.4px}.hero-chinese{font-size:15px;letter-spacing:4px;margin-top:25px}.hero-description{font-size:11px}.hero-tags{font-size:8px;gap:6px}.hero-tags>*{padding:5px 7px}.hero-actions .button{padding:13px 15px;font-size:10px}.hero-note{font-size:8px;flex-wrap:wrap}.hero-bottom{bottom:25px}.hero-bottom p{font-size:6px;letter-spacing:1px}.eyebrow{font-size:8px;letter-spacing:1.2px}.level-intro small{font-size:7px}.level-intro h2{font-size:14px}.levels{padding:12px 0 24px}.level-cards{grid-template-columns:repeat(3,1fr);gap:8px}.level-card{min-height:72px;padding:12px}.level-card b{font-size:16px}.level-card small{font-size:8px}.level-card>span{font-size:50px}.library{padding-top:30px}.section-heading h2{font-size:25px}.section-heading p{font-size:10px;line-height:1.7}.section-heading .text-link{display:none}.filter-bar{margin-top:18px;gap:12px}.tabs{gap:2px;width:100%;overflow:auto}.tabs button{padding:8px 10px;font-size:9px}.filter-selects{width:100%}.filter-selects select{max-width:none;flex:1}.results-line{font-size:8px}.available{font-size:7px}.exam-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 13px}.poster-title strong{font-size:35px}.poster-title strong span{font-size:47px}.poster-top{font-size:5px}.poster-bottom b{font-size:12px}.poster-bottom small{font-size:5px}.poster-symbol{font-size:75px}.poster-title{top:24%}.exam-card h3{font-size:11px}.card-meta{font-size:8px}.card-subtitle{font-size:8px}.poster-badge{font-size:7px;padding:5px 8px}.fox-banner{padding:24px;display:block}.fox-banner h2{font-size:21px;line-height:1.4}.fox-banner p{font-size:10px;line-height:1.8}.fox-banner .button{margin-top:20px;width:100%;font-size:10px}.faq{display:block;padding:35px 0}.faq h2{font-size:22px;margin:12px 0}.faq>div>p{font-size:10px}.faq-items{margin-top:20px}.faq-items summary{font-size:10px;line-height:1.6}footer{padding:26px 5%;gap:15px}footer p{width:100%;margin:0;font-size:9px}footer>span{font-size:8px}footer>a{margin-left:auto}#detail{padding-top:95px}.breadcrumbs{margin-bottom:25px;font-size:8px}.detail-hero{grid-template-columns:105px 1fr;gap:18px;align-items:start}.detail-poster .poster-title strong{font-size:22px}.detail-poster .poster-title strong span{font-size:30px}.detail-poster .poster-title small{font-size:5px}.detail-poster .poster-title em{font-size:6px}.detail-poster .poster-symbol{font-size:50px}.detail-poster .poster-top{font-size:3px}.detail-poster .poster-bottom{bottom:14px;right:10px;padding-top:6px}.detail-poster .poster-bottom b{font-size:9px}.detail-poster .poster-bottom small{font-size:3px}.detail-info h1{font-size:22px;margin:9px 0 12px;line-height:1.3}.detail-info .eyebrow{font-size:6px}.detail-info>p{font-size:10px}.detail-stats{gap:20px;margin:15px 0}.detail-stats b{font-size:18px}.detail-stats span{font-size:8px}.detail-actions{grid-column:1/-1}.detail-actions .button{padding:12px;font-size:9px}.detail-columns{display:flex;flex-direction:column-reverse;margin-top:25px}.detail-panel{padding:20px}.detail-panel h2{font-size:16px}.detail-panel p{font-size:11px}.detail-tabs{gap:22px}.detail-tabs button{font-size:10px}.structure-row>span:last-child{font-size:9px}.related h2{font-size:20px}}