/*
 * Trang chủ v17 (16/10/2026) - CSS nguyên bản từ file thiết kế
 * congvienchuc-homepage-redesign-v17.zip (index.html), chỉ đổi đường dẫn ảnh.
 * Chỉ nạp ở trang chủ (inc/home-v17.php). Phần BỔ SUNG ở cuối file:
 * khóa học ôn thi (khung chờ), tin tuyển dụng theo tỉnh, liên kết trợ lý AI.
 */
:root{
  --navy:#0a1d33;--navy2:#123456;--blue:#204f7c;--blue-soft:#eaf1f7;--orange:#f08a24;--orange-deep:#d96813;--teal:#168b88;
  --gold:#f08a24;--gold-soft:#fff0df;--ink:#14263b;--muted:#232d3a;
  --paper:#fbfaf7;--white:#fff;--line:#e4e8ec;--green:#23765a;--green-ink:#1e644d;
  --shadow:0 18px 50px rgba(16,40,70,.09);--radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Times New Roman",Times,serif;font-size:18px;line-height:1.55}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent}
.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}
.topline{background:var(--navy);color:#e8eef5;font-size:15px}
.topline .inner{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:38px}
.topline a{color:#f4d9a5;font-weight:bold}
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,250,247,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(228,232,236,.9)}
.nav{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand-mark{width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,#193e64,#0b2039);display:grid;place-items:center;color:#f0cf91;box-shadow:0 8px 20px #10284625}
.brand-name{font-size:22px;font-weight:bold;line-height:1.05;color:var(--navy);letter-spacing:.2px}
.brand-sub{font-size:13px;color:var(--muted);margin-top:4px}
.nav-links{display:flex;align-items:center;gap:24px;font-size:17px;color:#202a35}
.nav-links a:hover{color:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:12px;padding:12px 18px;font-weight:bold;line-height:1.2;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 18px #10284620}
.btn-primary:hover{background:#1b426a;box-shadow:0 12px 24px #1028462b}
.btn-gold{background:linear-gradient(135deg,#ffb45f 0%,#f07819 58%,#e56c12 100%);color:#172839;box-shadow:0 8px 18px #c79b512b}
.btn-gold:hover{background:#d5ad68}
.btn-outline{border-color:#cbd5df;background:transparent;color:var(--navy)}
.btn-light{background:#fff;color:var(--navy)}
.btn-small{padding:9px 13px;font-size:16px}
.icon{width:21px;height:21px;display:inline-block;flex:none}
.menu-toggle{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;color:var(--navy)}
.hero{padding:52px 0 30px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#8b460e;background:var(--gold-soft);border:1px solid #ead8b7;border-radius:99px;padding:7px 13px;font-weight:bold;font-size:15px;letter-spacing:.3px}
.eyebrow .dot{width:7px;height:7px;background:var(--gold);border-radius:50%}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(40px,5vw,62px);line-height:1.02;letter-spacing:-.8px;color:var(--navy);margin:22px 0 20px;font-weight:700}
h1 em{font-style:normal;color:#8c460f}
.hero-copy{font-size:21px;line-height:1.55;color:#1c2734;max-width:580px;margin-bottom:25px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.trust-row{display:flex;flex-wrap:wrap;gap:15px 22px;color:#1c2734;font-size:16px}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row svg{color:var(--green-ink)}
.hero-visual{position:relative;min-height:490px;border-radius:28px;background:linear-gradient(145deg,#193c61,#0c2037);padding:22px;box-shadow:0 28px 65px #1028462b;overflow:hidden}
.hero-visual:before{content:"";position:absolute;width:350px;height:350px;border-radius:50%;border:1px solid #ffffff18;right:-90px;top:-90px;box-shadow:0 0 0 34px #ffffff08,0 0 0 68px #ffffff05}
.visual-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,40,70,.94) 0%,rgba(16,40,70,.78) 38%,rgba(16,40,70,.16) 100%),url("../images/home-v17/lo-trinh-cong-vien-chuc.webp") 58% center/cover no-repeat;opacity:1}
.visual-content{position:relative;z-index:1;height:100%;min-height:446px;display:flex;flex-direction:column;justify-content:space-between}
.visual-kicker{color:#f0d9ad;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;font-weight:bold}
.visual-title{color:#fff;font-size:36px;line-height:1.1;max-width:340px;margin:12px 0}
.visual-sub{color:#e0e8f0;max-width:320px}
.progress-card{background:#fff;border:1px solid #ffffff60;border-radius:18px;padding:18px;color:var(--ink);width:min(340px,100%);box-shadow:0 16px 35px #06152835}
.progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.progress-head strong{font-size:20px;color:var(--navy)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#e5f5f1;color:#11635e;padding:5px 9px;border-radius:99px;font-size:13px;font-weight:bold}
.progress-track{height:8px;background:#e8edf1;border-radius:99px;overflow:hidden;margin:10px 0}
.progress-track span{display:block;width:68%;height:100%;background:linear-gradient(90deg,#f07819,#ffbf69);border-radius:99px}
.progress-foot{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}
.floating-note{position:absolute;z-index:2;right:18px;bottom:28px;background:#fff;border-radius:14px;padding:13px 16px;box-shadow:var(--shadow);display:flex;gap:11px;align-items:center;max-width:230px}
.floating-note .mini-icon{width:40px;height:40px;background:var(--gold-soft);color:#8d450e;border-radius:12px;display:grid;place-items:center}
.floating-note strong{display:block;color:var(--navy);font-size:17px}
.floating-note small{display:block;color:var(--muted);font-size:14px}
.stats-wrap{margin-top:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px #10284608;overflow:hidden}
.stat{padding:20px 22px;display:flex;align-items:center;gap:13px;border-right:1px solid var(--line)}
.stat:last-child{border:0}
.stat-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:var(--blue-soft);color:var(--blue)}
.stat strong{display:block;color:var(--navy);font-size:25px;line-height:1.1}
.stat small{color:var(--muted);font-size:15px}
section{padding:68px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section-label{font-size:15px;text-transform:uppercase;letter-spacing:1.3px;color:#8c460f;font-weight:bold;margin-bottom:8px}
h2{font-size:clamp(30px,3.4vw,42px);line-height:1.12;color:var(--navy);margin-bottom:10px;letter-spacing:-.3px}
.section-head p{color:var(--muted);max-width:620px;margin:0;font-size:19px}
.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:bold;white-space:nowrap}
.text-link:hover{color:#8c460f}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.quick-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;min-height:200px;transition:.2s;display:flex;flex-direction:column}
.quick-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#c7d5e3}
.quick-icon{width:52px;height:52px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);border-radius:16px;margin-bottom:18px}
.quick-card:nth-child(2) .quick-icon,.quick-card:nth-child(4) .quick-icon{background:var(--gold-soft);color:#8d450e}
.quick-card h3{font-size:22px;color:var(--navy);margin-bottom:7px}
.quick-card p{font-size:16px;color:var(--muted);margin-bottom:16px}
.quick-card .text-link{margin-top:auto}
.feature-band{background:#f1f4f6;border-top:1px solid #e6ebef;border-bottom:1px solid #e6ebef}
.exam-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:26px;align-items:stretch}
.exam-pitch{background:var(--navy);color:#fff;border-radius:24px;padding:32px;position:relative;overflow:hidden}
.exam-pitch:after{content:"";position:absolute;right:-60px;bottom:-90px;width:240px;height:240px;border:1px solid #ffffff22;border-radius:50%;box-shadow:0 0 0 28px #ffffff08,0 0 0 56px #ffffff05}
.exam-pitch .section-label{color:#e7c78f}
.exam-pitch h2{color:#fff;font-size:36px}
.exam-pitch p{color:#d6e0ea;font-size:18px}
.check-list{list-style:none;padding:0;margin:24px 0;display:grid;gap:13px}
.check-list li{display:flex;align-items:flex-start;gap:10px;color:#f2f5f8}
.check-list svg{color:#e4c58a;margin-top:3px}
.exam-pitch .btn{position:relative;z-index:1}
.exam-list{display:grid;gap:13px}
.exam-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:.2s}
.exam-item:hover{border-color:#c2d2e1;box-shadow:0 10px 25px #1028460a}
.doc-icon{width:48px;height:52px;border-radius:12px;background:#edf3f8;color:var(--blue);display:grid;place-items:center;flex:none}
.exam-info{min-width:0;flex:1}
.exam-info h3{font-size:19px;color:var(--navy);line-height:1.25;margin:0 0 6px}
.meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:15px}
.meta span{display:inline-flex;align-items:center;gap:5px}
.exam-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.free-tag{background:#e5f5f1;color:#11635e;border-radius:99px;padding:4px 9px;font-size:14px;font-weight:bold;white-space:nowrap}
.arrow-btn{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--blue)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;overflow:hidden}
.value-card.featured{background:linear-gradient(145deg,#fffaf0,#fff);border-color:#e6d3ad}
.value-card .quick-icon{margin-bottom:20px}
.value-card h3{font-size:24px;color:var(--navy);margin-bottom:9px}
.value-card p{color:var(--muted);font-size:17px;margin-bottom:18px}
.value-card .micro{font-size:15px;color:#8d450e;font-weight:bold;margin-bottom:10px}
.value-card .btn{width:100%}
.materials{background:#f3f5f6}
.material-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.material-art{background:linear-gradient(145deg,#e8edf1,#f9f7f0);border-radius:24px;min-height:365px;position:relative;overflow:hidden;padding:30px;display:flex;align-items:center;justify-content:center}
.paper-stack{position:relative;width:260px;height:280px;transform:rotate(-5deg)}
.paper{position:absolute;inset:0;background:#fff;border:1px solid #d7dee5;border-radius:12px;box-shadow:0 18px 35px #10284618;padding:25px}
.paper.back{transform:translate(28px,15px) rotate(9deg);background:#e8eef4}
.paper h3{font-size:23px;color:var(--navy);margin:10px 0 6px}
.paper .rule{height:7px;background:#e6ebef;border-radius:10px;margin:12px 0;width:90%}
.paper .rule.short{width:58%}
.paper .stamp{display:inline-block;background:var(--gold-soft);color:#8b460e;border-radius:7px;padding:6px 9px;font-weight:bold;font-size:13px}
.material-bubble{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow);font-size:16px}
.material-bubble.one{left:18px;top:28px}.material-bubble.two{right:18px;bottom:28px}
.material-bubble strong{color:var(--navy)}
.material-copy h2{font-size:40px}
.material-copy p{font-size:19px;color:var(--muted)}
.benefit-list{display:grid;gap:13px;margin:22px 0 27px}
.benefit{display:flex;gap:12px;align-items:flex-start}
.benefit .check{width:26px;height:26px;border-radius:50%;background:#e6f4ec;color:var(--green-ink);display:grid;place-items:center;flex:none}
.benefit strong{display:block;color:var(--navy);font-size:18px}
.benefit small{display:block;color:var(--muted);font-size:16px}
.career-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.career-card{border:1px solid var(--line);border-radius:18px;padding:21px;background:#fff;position:relative;overflow:hidden}
.career-number{font-size:14px;font-weight:bold;color:#8c460f;letter-spacing:1px}
.career-card h3{font-size:21px;color:var(--navy);margin:12px 0 7px}
.career-card p{font-size:16px;color:var(--muted);min-height:50px}
.career-card a{font-size:16px;color:var(--blue);font-weight:bold;display:inline-flex;gap:6px;align-items:center}
.career-card:before{content:"";position:absolute;width:90px;height:90px;border:1px solid #d7e1ea;border-radius:50%;right:-40px;top:-40px}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tool-card{display:flex;gap:16px;align-items:flex-start;padding:23px;background:#fff;border:1px solid var(--line);border-radius:18px}
.tool-card .quick-icon{margin:0;flex:none;width:48px;height:48px}
.tool-card h3{font-size:21px;color:var(--navy);margin:0 0 6px}
.tool-card p{font-size:16px;color:var(--muted);margin:0 0 12px}
.cta-panel{background:linear-gradient(120deg,#102846,#1d466d);border-radius:26px;padding:38px 42px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;overflow:hidden}
.cta-panel:after{content:"";position:absolute;width:250px;height:250px;border:1px solid #ffffff20;border-radius:50%;right:15%;top:-170px;box-shadow:0 0 0 28px #ffffff08,0 0 0 56px #ffffff05}
.cta-panel h2{color:#fff;font-size:36px;margin-bottom:9px}
.cta-panel p{color:#d9e3ed;margin:0;max-width:620px;font-size:18px}
.cta-panel .section-label{color:#f3b16f}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1;flex:none}
.jobs-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.job-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:21px}
.job-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.job-org{font-size:14px;color:var(--blue);font-weight:bold;text-transform:uppercase;letter-spacing:.5px}
.deadline{font-size:14px;background:#fff3e6;color:#824c18;padding:5px 8px;border-radius:7px;white-space:nowrap}
.job-card h3{font-size:20px;color:var(--navy);line-height:1.28;margin-bottom:10px}
.job-card p{font-size:16px;color:var(--muted);margin-bottom:15px}
.footer{background:#0b1f35;color:#dbe4ed;padding:44px 0 24px;margin-top:70px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;padding-bottom:30px}
.footer .brand-name{color:#fff}.footer .brand-sub{color:#d0dae5}
.footer p{color:#d0dae5;font-size:16px;max-width:330px;margin-top:15px}
.footer h3{font-size:19px;color:#fff;margin-bottom:12px}
.footer-links{display:grid;gap:9px;color:#dbe4ed;font-size:16px}
.footer-links a:hover{color:#f0cf91}
.footer-bottom{border-top:1px solid #ffffff20;padding-top:18px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:#c2cedb;font-size:14px}
.mobile-cta{display:none}
.search-box{display:flex;gap:9px;max-width:610px;padding:7px;background:#fff;border:1px solid #dce3e9;border-radius:15px;box-shadow:0 10px 28px #1028460a;margin:22px 0 17px}
.search-box .search-icon{display:grid;place-items:center;width:44px;color:#2f3a47}
.search-box input{min-width:0;flex:1;border:0;outline:0;color:var(--ink);background:transparent;padding:8px 0}
.search-box .btn{white-space:nowrap}
.hot-search{font-size:15px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.hot-search a{padding:5px 9px;border:1px solid var(--line);border-radius:99px;background:#fff;color:#1c2734}
.hot-search a:hover{border-color:#c8a568;color:#8b460e}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:99;background:#102846;color:#fff;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);transition:.25s;font-size:16px}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Motion language: purposeful, subtle and reduced-motion friendly */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(240,138,36,.22)}70%{box-shadow:0 0 0 12px rgba(240,138,36,0)}100%{box-shadow:0 0 0 0 rgba(240,138,36,0)}}
@keyframes shine{0%{background-position:150% 0}100%{background-position:-150% 0}}
.hero-copy,.hero-actions,.search-box,.stats,.quick-card,.exam-item,.value-card,.career-card,.tool-card,.job-card{animation:riseIn .65s both}
.quick-card:nth-child(2),.value-card:nth-child(2){animation-delay:.07s}
.quick-card:nth-child(3),.value-card:nth-child(3){animation-delay:.14s}
.quick-card:nth-child(4){animation-delay:.21s}
.brand-mark{animation:floatSoft 5s ease-in-out infinite}
.btn-gold{background-size:180% 100%;animation:shine 5s ease-in-out infinite}
.quick-card,.value-card,.career-card,.tool-card,.job-card,.exam-item{transform:translateZ(0);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.quick-card:hover,.value-card:hover,.career-card:hover,.tool-card:hover,.job-card:hover,.exam-item:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(16,40,70,.12)}
.hero-visual{animation:riseIn .8s .1s both}
.hero-visual:before{animation:floatSoft 9s ease-in-out infinite}
.eyebrow .dot{animation:pulseRing 2.4s infinite}
.section-label{transition:letter-spacing .25s}
section:hover .section-label{letter-spacing:1.6px}
.layout-with-sidebar{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}
.context-sidebar{position:sticky;top:100px;display:grid;gap:14px}
.side-panel{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(16,40,70,.06)}
.side-head{padding:17px 18px;background:linear-gradient(135deg,#102846,#1d466d);color:#fff}
.side-head h3{font-size:21px;margin:0 0 5px;color:#fff}
.side-head p{font-size:14px;color:#d9e3ed;margin:0}
.side-content{padding:14px}
.location-chip{display:flex;align-items:center;gap:8px;padding:10px 11px;background:#fff0df;border:1px solid #f7d4ad;border-radius:12px;color:#90430a;font-size:15px;font-weight:bold}
.location-chip .location-dot{width:8px;height:8px;background:#f07819;border-radius:50%;box-shadow:0 0 0 4px #f0781920}
.side-job{padding:13px 0;border-bottom:1px solid var(--line)}
.side-job:last-child{border-bottom:0;padding-bottom:2px}
.side-job .tag{font-size:12px;letter-spacing:.3px;text-transform:uppercase;font-weight:bold;color:#8d450e}
.side-job h4{font-size:17px;line-height:1.25;color:var(--navy);margin:5px 0}
.side-job p{font-size:14px;line-height:1.4;color:var(--muted);margin:0 0 7px}
.side-job a{font-size:15px;color:var(--blue);font-weight:bold}
.side-mini-links{display:grid;gap:8px}
.side-mini-links a{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;font-weight:bold;color:var(--navy);font-size:16px;transition:.2s}
.side-mini-links a:hover{border-color:#f4b06e;background:#fff9f2;transform:translateX(3px)}
.side-mini-links .mini{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--blue-soft);color:var(--blue)}
.side-mini-links a:nth-child(2) .mini{background:#fff0df;color:#8d450e}
.side-mini-links a:nth-child(3) .mini{background:#e5f5f1;color:#11635e}
.side-footnote{font-size:13px;line-height:1.4;color:var(--muted);margin:10px 2px 0}
.side-cta{background:linear-gradient(135deg,#fff0df,#fffaf4);border:1px solid #f7d4ad;border-radius:18px;padding:18px}
.side-cta h3{font-size:20px;color:var(--navy);margin:8px 0 6px}
.side-cta p{font-size:15px;color:var(--muted);margin:0 0 13px}
.side-cta .btn{width:100%;font-size:16px}
.location-select{width:100%;border:1px solid #d9e1e8;border-radius:10px;background:#fff;color:var(--ink);padding:9px;font-family:inherit;font-size:15px;margin-top:10px}
.location-status{font-size:13px;color:var(--muted);margin-top:8px;min-height:18px}
@media(max-width:1050px){.layout-with-sidebar{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.side-content{padding:12px}.side-head{padding:15px}}
@media(max-width:850px){.layout-with-sidebar{grid-template-columns:1fr}.context-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.side-cta{grid-column:1/-1}.context-sidebar .side-panel:first-child{grid-row:span 2}}
@media(max-width:600px){.context-sidebar{grid-template-columns:1fr}.context-sidebar .side-panel:first-child{grid-row:auto}.side-cta{grid-column:auto}.side-panel{border-radius:15px}}
@media(prefers-reduced-motion:reduce){.hero-copy,.hero-actions,.search-box,.stats,.quick-card,.exam-item,.value-card,.career-card,.tool-card,.job-card,.hero-visual,.brand-mark,.btn-gold{animation:none!important}}


/* V3 premium motion + editorial layout refinement */
:root{--orange:#f07819;--orange-deep:#d45e0b;--teal:#168b88;--glass:rgba(255,255,255,.78)}
body{background:linear-gradient(180deg,#fbfaf7 0%,#f8f8f6 55%,#fbfaf7 100%)}
::selection{background:#ffdfb5;color:#102846}
.site-header{box-shadow:0 4px 22px rgba(16,40,70,.035);transition:box-shadow .25s}
.site-header:after{content:"";height:2px;display:block;background:linear-gradient(90deg,transparent,#f07819 30%,#f8c16f 55%,#168b88 78%,transparent);opacity:.65}
.brand-mark{position:relative;overflow:hidden}
.brand-mark:after{content:"";position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 35%,#ffffff55 48%,transparent 60%);transform:translateX(-80%) rotate(10deg);animation:logoShimmer 7s ease-in-out infinite}
@keyframes logoShimmer{0%,65%{transform:translateX(-80%) rotate(10deg)}85%,100%{transform:translateX(80%) rotate(10deg)}}
.hero{padding-top:58px}
.hero-grid{gap:52px}
.hero-visual{isolation:isolate;border:1px solid #ffffff30;box-shadow:0 30px 75px rgba(16,40,70,.22)}
.hero-visual:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(130deg,transparent 15%,#ffffff0c 40%,transparent 65%);background-size:220% 220%;animation:ambientSweep 12s ease-in-out infinite}
@keyframes ambientSweep{0%,100%{background-position:100% 0}50%{background-position:0 100%}}
.visual-photo{transform:scale(1.04) translateX(1.2%);animation:photoDrift 28s ease-in-out infinite}@keyframes photoDrift{from{transform:scale(1.08) translateX(1.5%)}to{transform:scale(1.04) translateX(-1.2%)}}
.progress-card{border:1px solid #ffffffa8;backdrop-filter:blur(14px)}
.progress-track span{position:relative;overflow:hidden}
.progress-track span:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff88,transparent);transform:translateX(-100%);animation:progressShine 3.5s ease-in-out infinite}
@keyframes progressShine{to{transform:translateX(120%)}}
.floating-note{animation:floatSoft 6s ease-in-out infinite}
.stats{box-shadow:0 15px 38px rgba(16,40,70,.055);border-color:#e2e7eb}
.stat-icon{transition:transform .25s,background .25s}
.stat:hover .stat-icon{transform:rotate(-6deg) scale(1.07);background:#fff0df;color:#8d450e}
.section-head{margin-bottom:30px}
.quick-grid{gap:18px}
.quick-card{position:relative;isolation:isolate;overflow:hidden;min-height:212px}
.quick-card:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 100% 0%,#f0781910,transparent 44%);opacity:0;transition:opacity .35s}
.quick-card:hover:after{opacity:1}
.quick-icon{transition:transform .28s cubic-bezier(.2,.8,.2,1),border-radius .28s}
.quick-card:hover .quick-icon,.tool-card:hover .quick-icon{transform:translateY(-3px) rotate(-4deg);border-radius:18px}
.btn{position:relative;overflow:hidden}
.btn:after{content:"";position:absolute;top:-80%;left:-45%;width:35%;height:260%;transform:rotate(25deg);background:#ffffff3d;transition:left .55s}
.btn:hover:after{left:130%}
.btn-gold{box-shadow:0 10px 24px rgba(240,120,25,.2)}
.btn-gold:hover{box-shadow:0 14px 30px rgba(240,120,25,.28)}
.exam-pitch{box-shadow:0 18px 42px rgba(16,40,70,.12)}
.exam-pitch:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,#f0781924,transparent 42%);pointer-events:none}
.exam-item{position:relative}
.exam-item:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:#f07819;transform:scaleY(0);transition:transform .25s}
.exam-item:hover:before{transform:scaleY(1)}
.value-card{min-height:330px;display:flex;flex-direction:column;align-items:flex-start}
.value-card .btn{margin-top:auto}
.value-card:after{content:"";position:absolute;right:-60px;top:-70px;width:160px;height:160px;border:1px solid #dfe7ee;border-radius:50%;box-shadow:0 0 0 18px #eaf1f71c;transition:transform .4s}
.value-card:hover:after{transform:scale(1.18)}
.material-art{box-shadow:inset 0 0 0 1px #ffffffaa}
.paper-stack{filter:drop-shadow(0 14px 16px #1028460d);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.material-art:hover .paper-stack{transform:rotate(-2deg) translateY(-5px)}
.paper.back{transition:transform .4s}
.material-art:hover .paper.back{transform:translate(36px,18px) rotate(13deg)}
.career-card{transition:transform .25s,box-shadow .25s,border-color .25s}
.career-card:hover{border-color:#f2c08d}
.career-card:before{transition:transform .35s,border-color .35s}
.career-card:hover:before{transform:scale(1.3);border-color:#f0b46e}
.tool-card{min-height:154px}
.cta-panel{box-shadow:0 24px 55px rgba(16,40,70,.17)}
.cta-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 15%,#ffffff09 45%,transparent 70%);background-size:220% 100%;animation:ambientSweep 14s ease-in-out infinite}
.cta-panel>*{position:relative;z-index:1}
.side-panel{box-shadow:0 12px 32px rgba(16,40,70,.055);transition:transform .25s,box-shadow .25s}
.side-panel:hover{box-shadow:0 17px 40px rgba(16,40,70,.09)}
.side-head{background:linear-gradient(120deg,#102846 0%,#1a456c 70%,#23617a 100%);position:relative;overflow:hidden}
.side-head:after{content:"";position:absolute;right:-25px;top:-45px;width:110px;height:110px;border:1px solid #ffffff25;border-radius:50%;box-shadow:0 0 0 15px #ffffff08}
.location-chip{box-shadow:inset 0 0 0 1px #ffffff80}
.side-job{transition:padding-left .2s}
.side-job:hover{padding-left:5px}
.side-job a{display:inline-flex;align-items:center;gap:5px}
.side-job a:hover{color:#8d450e}
.side-cta{position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(240,120,25,.08)}
.side-cta:after{content:"";position:absolute;right:-35px;bottom:-60px;width:120px;height:120px;border:1px solid #f3c18d;border-radius:50%;pointer-events:none}
.hot-search a{transition:transform .2s,border-color .2s,color .2s}
.hot-search a:hover{transform:translateY(-2px)}
.footer{background:radial-gradient(circle at 80% 0%,#173b5d 0%,transparent 38%),#0b1f35}
.footer .brand-mark{box-shadow:0 8px 24px #0002}
.toast{border:1px solid #ffffff20}
@media(min-width:1100px){
 .layout-with-sidebar{grid-template-columns:minmax(0,1fr) 306px;gap:28px}
 .context-sidebar{gap:16px}
 .quick-card{padding:24px}
}
@media(max-width:760px){
 .hero{padding-top:38px}
 .hero-grid{gap:28px}
 .value-card{min-height:0}
 .tool-card{min-height:0}
}
@media(prefers-reduced-motion:reduce){
 .brand-mark:after,.visual-photo,.hero-visual:after,.progress-track span:after,.floating-note,.cta-panel:before{animation:none!important}
}


/* Document-format showcase fills the editorial gap and adds visual utility */
.format-showcase{margin-top:25px;padding:23px;border:1px solid #e2e7eb;border-radius:22px;background:linear-gradient(145deg,#fff 0%,#fbfcfd 65%,#fff7ee 100%);box-shadow:0 16px 42px rgba(16,40,70,.055);position:relative;overflow:hidden}
.format-showcase:before{content:"";position:absolute;right:-95px;top:-125px;width:240px;height:240px;border:1px solid #f2d7ba;border-radius:50%;box-shadow:0 0 0 24px #f0781905,0 0 0 48px #168b8804;pointer-events:none}
.format-heading{display:flex;justify-content:space-between;align-items:end;gap:18px;position:relative;z-index:1;margin-bottom:19px}
.format-heading .section-label{font-size:12px;margin-bottom:5px}
.format-heading h3{font-size:24px;line-height:1.15;color:var(--navy);margin:0 0 7px}
.format-heading p{font-size:15px;color:var(--muted);margin:0;max-width:480px}
.format-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative;z-index:1}
.format-card{min-width:0;padding:15px 13px 13px;border:1px solid var(--line);border-radius:15px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.format-card:after{content:"";position:absolute;left:0;right:0;top:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.format-card:hover{transform:translateY(-5px);box-shadow:0 15px 28px #10284613}
.format-card:hover:after{transform:scaleX(1)}
.format-file{height:68px;width:62px;position:relative;display:grid;place-items:center;margin-bottom:11px}
.format-file svg{width:48px;height:56px}
.format-file b{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:12px;color:#fff;letter-spacing:-.3px}
.format-name{font-weight:bold;color:var(--navy);font-size:18px}
.format-desc{font-size:14px;color:var(--muted);line-height:1.3;margin-top:3px;min-height:36px}
.format-action{font-size:14px;font-weight:bold;color:var(--blue);margin-top:11px;display:flex;gap:5px;align-items:center}
.format-card.word{color:#23589f}.format-card.word:after{background:#2864b4}.format-card.word .format-file b{background:#2864b4;padding:2px 5px;border-radius:3px}
.format-card.pdf{color:#a62b23}.format-card.pdf:after{background:#d84c43}.format-card.pdf .format-file b{background:#d84c43;padding:2px 4px;border-radius:3px;font-size:9px}
.format-card.excel{color:#116548}.format-card.excel:after{background:#16815c}.format-card.excel .format-file b{background:#16815c;padding:2px 5px;border-radius:3px}
.format-card.ppt{color:#8e440c}.format-card.ppt:after{background:#d96813}.format-card.ppt .format-file b{background:#d96813;padding:2px 5px;border-radius:3px}
.showcase-bottom{display:flex;align-items:center;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);position:relative;z-index:1}
.showcase-stat{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.showcase-stat-icon{width:31px;height:31px;border-radius:10px;background:#fff0df;color:#8d450e;display:grid;place-items:center;font-weight:bold;flex:none}
.showcase-stat-icon.teal{background:#e5f5f1;color:#11635e}
.showcase-stat strong,.showcase-stat small{display:block}
.showcase-stat strong{font-size:15px;color:var(--navy)}
.showcase-stat small{font-size:13px;color:var(--muted)}
.showcase-bottom .btn{font-size:15px;white-space:nowrap;padding:11px 13px}

/* V5: high-contrast typography and two editorial marquees */
:root{--navy:#0a1d33;--navy2:#123456;--ink:#14263b;--muted:#232d3a;--orange:#f07819;--orange-deep:#c95108}
body{color:#14263b}
p{color:#232d3a}
h1,h2,h3,h4,strong{font-weight:700}
.hero-copy,.section-head p,.material-copy p{color:#1c2734}
.source-marquee{background:#0a1d33;color:#fff;overflow:hidden;position:relative;border-block:1px solid #29435e}
.source-marquee:before,.source-marquee:after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:70px;pointer-events:none}
.source-marquee:before{left:0;background:linear-gradient(90deg,#0a1d33,transparent)}
.source-marquee:after{right:0;background:linear-gradient(270deg,#0a1d33,transparent)}
.marquee-topline{display:flex;align-items:center;gap:13px;padding:11px 0 8px;font-size:13px;letter-spacing:1.1px;text-transform:uppercase;font-weight:bold;color:#ffb45f}
.marquee-topline .live-dot{width:8px;height:8px;border-radius:50%;background:#ff9a36;box-shadow:0 0 0 4px #f0781927;display:inline-block}
.marquee-window{overflow:hidden;position:relative;padding:0 0 13px}
.marquee-track{display:flex;align-items:center;gap:14px;width:max-content;animation:marqueeLeft 44s linear infinite}
.source-marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.source-pill{display:flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid #ffffff28;background:#ffffff0b;border-radius:12px;min-width:220px;color:#fff}
.source-pill .seal{width:35px;height:35px;display:grid;place-items:center;flex:none;border-radius:11px;background:linear-gradient(145deg,#f5bd72,#e7771a);color:#102846}
.source-pill strong{display:block;font-size:16px;line-height:1.15;color:#fff}
.source-pill small{display:block;color:#c7d5e4;font-size:12px;margin-top:3px}
.marquee-caption{font-size:12px;color:#c7d5e4;padding:0 0 10px;position:relative;z-index:3}
.marquee-caption strong{color:#ffbd73}
.marquee-secondary{background:linear-gradient(110deg,#fff3e5,#fffaf3 50%,#eaf5f4);border-block:1px solid #f0d5b8;color:#0a1d33;overflow:hidden;position:relative}
.marquee-secondary:before,.marquee-secondary:after{content:"";position:absolute;top:0;bottom:0;width:55px;z-index:2;pointer-events:none}
.marquee-secondary:before{left:0;background:linear-gradient(90deg,#fff3e5,transparent)}
.marquee-secondary:after{right:0;background:linear-gradient(270deg,#eaf5f4,transparent)}
.marquee-secondary .marquee-topline{color:#963e08;padding-top:13px}
.marquee-secondary .marquee-track{animation-duration:36s;padding-bottom:14px}
.marquee-secondary:hover .marquee-track{animation-play-state:paused}
.marquee-secondary .source-pill{min-width:245px;background:#fff;border-color:#e4d8c9;color:#102846;box-shadow:0 5px 15px #10284608}
.marquee-secondary .source-pill strong{color:#102846}
.marquee-secondary .source-pill small{color:#232d3a}
.marquee-secondary .source-pill .seal{background:#102846;color:#ffbd73}
.marquee-secondary .source-pill:nth-child(3n) .seal{background:#14756e;color:#fff}
.marquee-secondary .source-pill:nth-child(3n+2) .seal{background:#f07819;color:#102846}
.marquee-secondary .marquee-caption{color:#232d3a}
.marquee-secondary .marquee-caption strong{color:#963e08}
@media(max-width:600px){
 .source-marquee:before,.source-marquee:after,.marquee-secondary:before,.marquee-secondary:after{width:28px}
 .source-pill{min-width:195px;padding:9px 11px}
 .source-pill strong{font-size:15px}
 .marquee-topline{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none!important;transform:none!important;flex-wrap:wrap;width:auto}.marquee-window{overflow:visible}.source-marquee:before,.source-marquee:after,.marquee-secondary:before,.marquee-secondary:after{display:none}}


/* Persistent two-line news ticker directly under the main menu */
.site-header{top:0}
.sticky-news-ticker{position:sticky;top:82px;z-index:19;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:stretch;background:#08192c;color:#fff;border-bottom:1px solid #29435e;box-shadow:0 7px 20px rgba(8,25,44,.16);min-height:76px}
.ticker-label{display:flex;align-items:center;justify-content:center;gap:7px;background:#f07819;color:#102846;font-size:12px;font-weight:bold;letter-spacing:.6px}
.ticker-live{width:7px;height:7px;background:#102846;border-radius:50%;box-shadow:0 0 0 4px #10284618;animation:pulseRing 2s infinite}
.ticker-lanes{display:grid;grid-template-rows:1fr 1fr;min-width:0}
.ticker-lane{display:grid;grid-template-columns:185px minmax(0,1fr);align-items:center;min-width:0;height:38px;border-bottom:1px solid #ffffff14}
.ticker-lane:last-child{border-bottom:0}
.ticker-category{height:100%;display:flex;align-items:center;gap:8px;padding:0 12px;color:#ffbd73;font-size:12px;font-weight:bold;letter-spacing:.3px;white-space:nowrap;border-right:1px solid #ffffff18}
.ticker-category .icon{width:17px;height:17px}
.law-lane .ticker-category{color:#a8d8d1}
.ticker-window{overflow:hidden;white-space:nowrap;min-width:0;position:relative}
.ticker-track{width:max-content;display:flex;align-items:center;gap:17px;animation:topTickerLeft 52s linear infinite;padding-left:16px}
.ticker-track.reverse{animation-direction:reverse;animation-duration:58s}
.ticker-lane:hover .ticker-track{animation-play-state:paused}
.ticker-track a{color:#f5f7fa;font-size:14px;text-decoration:none}
.ticker-track a:hover{color:#ffbd73}
.ticker-track b{color:#ffbd73;margin-left:4px}
.ticker-track i{font-style:normal;color:#f07819;font-size:16px}
@keyframes topTickerLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){
 .sticky-news-ticker{top:70px;grid-template-columns:78px minmax(0,1fr);min-height:72px}
 .ticker-label{font-size:10px;gap:5px;flex-direction:column}
 .ticker-lane{grid-template-columns:124px minmax(0,1fr);height:36px}
 .ticker-category{font-size:10px;padding:0 7px;gap:5px}
 .ticker-category .icon{width:14px;height:14px}
 .ticker-track{gap:12px;padding-left:11px}
 .ticker-track a{font-size:12px}
}
@media(max-width:390px){
 .sticky-news-ticker{grid-template-columns:65px minmax(0,1fr)}
 .ticker-lane{grid-template-columns:103px minmax(0,1fr)}
 .ticker-category{font-size:9px;padding:0 5px}
}
@media(prefers-reduced-motion:reduce){.ticker-live,.ticker-track{animation:none!important}.ticker-window{overflow-x:auto}}


/* V7: one-line ticker with real content titles from the three core sections */
.sticky-news-ticker{position:sticky;top:82px;z-index:19;display:grid;grid-template-columns:94px minmax(0,1fr);align-items:center;height:42px;min-height:42px;background:#08192c;color:#fff;border-bottom:1px solid #29435e;box-shadow:0 6px 16px rgba(8,25,44,.15);overflow:hidden}
.ticker-label{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:7px;background:#f07819;color:#102846;font-size:11px;font-weight:bold;letter-spacing:.5px}
.ticker-live{width:7px;height:7px;background:#102846;border-radius:50%;box-shadow:0 0 0 4px #10284618;animation:pulseRing 2s infinite;flex:none}
.single-ticker-window{min-width:0;overflow:hidden;white-space:nowrap}
.single-ticker-track{width:max-content;display:flex;align-items:center;gap:17px;animation:singleTickerLeft 85s linear infinite;padding-left:18px}
.single-ticker-window:hover .single-ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:9px;color:#f5f7fa;text-decoration:none;white-space:nowrap}
.ticker-item strong{font-size:13px;font-weight:600;color:#f5f7fa}
.ticker-item b{font-size:14px;color:#ffbd73}
.ticker-kind{font-size:10px;font-weight:bold;letter-spacing:.35px;padding:4px 6px;border-radius:5px;background:#ffffff14;color:#ffbd73}
.ticker-item.law .ticker-kind{color:#a8d8d1;background:#168b8824}
.ticker-item.exam .ticker-kind{color:#b9d7ff;background:#2d5b862e}
.ticker-item:hover strong{color:#ffbd73}
.ticker-separator{font-size:9px;color:#f07819}
@keyframes singleTickerLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:760px){
 .sticky-news-ticker{top:70px;grid-template-columns:70px minmax(0,1fr);height:38px;min-height:38px}
 .ticker-label{font-size:9px;gap:4px}
 .ticker-item strong{font-size:12px}
 .ticker-kind{font-size:9px;padding:3px 5px}
 .single-ticker-track{gap:12px;padding-left:12px;animation-duration:75s}
}
@media(max-width:390px){.sticky-news-ticker{grid-template-columns:58px minmax(0,1fr)}.ticker-label{font-size:8px}.ticker-live{width:6px;height:6px}}
@media(prefers-reduced-motion:reduce){.single-ticker-track,.ticker-live{animation:none!important}.single-ticker-window{overflow-x:auto}}

@media(max-width:1000px){.format-heading{align-items:flex-start;flex-direction:column}.format-heading .text-link{font-size:15px}.showcase-bottom{flex-wrap:wrap}.showcase-stat{flex:1 1 40%}.showcase-bottom .btn{width:100%}}
@media(max-width:600px){.format-showcase{padding:17px;margin-top:17px}.format-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.format-card{padding:13px}.format-heading h3{font-size:22px}.showcase-bottom{gap:12px}.showcase-stat{flex-basis:100%}.showcase-bottom .btn{width:100%}}

@media(max-width:1000px){
 .nav-links{gap:14px}.brand{min-width:190px}.nav-actions .btn-outline{display:none}
 .hero-grid{gap:25px}.hero-visual{min-height:430px}.visual-content{min-height:386px}
 .stat{padding:16px 13px}.quick-grid{grid-template-columns:repeat(2,1fr)}
 .exam-layout{grid-template-columns:1fr}.exam-pitch{padding:28px}
 .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media(max-width:760px){
 body{font-size:17px}.container{width:min(100% - 28px,600px)}
 .topline .inner{justify-content:center;text-align:center;min-height:36px}.topline .secondary{display:none}
 .nav{min-height:70px}.brand-mark{width:41px;height:41px}.brand-name{font-size:20px}
 .menu-toggle{display:grid;place-items:center}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:18px 22px 22px;border-bottom:1px solid var(--line);box-shadow:0 16px 24px #10284610;flex-direction:column;align-items:stretch;gap:0}
 .nav-links.open{display:flex}.nav-links a{padding:11px 0;border-bottom:1px solid var(--line)}
 .nav-actions .btn-primary{display:none}
 .hero{padding:34px 0 18px}.hero-grid{grid-template-columns:1fr;gap:24px}
 h1{font-size:43px;max-width:600px}.hero-copy{font-size:19px}
 .hero-visual{min-height:410px;border-radius:22px;padding:19px}.visual-content{min-height:372px}.visual-title{font-size:31px}
 .floating-note{right:12px;bottom:15px;max-width:205px}
 .stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .stat strong{font-size:23px}
 section{padding:48px 0}.section-head{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:22px}
 h2{font-size:32px}.section-head p{font-size:18px}
 .quick-grid{gap:12px}.quick-card{padding:17px;min-height:190px}.quick-card h3{font-size:20px}
 .value-grid,.career-grid,.tools-grid,.jobs-list{grid-template-columns:1fr}
 .exam-item{padding:14px;gap:11px}.exam-info h3{font-size:18px}.meta{font-size:14px}.exam-side .free-tag{font-size:12px}
 .material-layout{grid-template-columns:1fr;gap:25px}.material-art{min-height:325px;padding:20px}.material-copy h2{font-size:33px}
 .career-card p{min-height:0}.tool-card{padding:18px}
 .cta-panel{padding:28px 22px;align-items:flex-start;flex-direction:column;gap:20px}.cta-panel h2{font-size:30px}.cta-actions{width:100%}.cta-actions .btn{flex:1}
 .footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-grid>div:first-child{grid-column:1/-1}
 .mobile-cta{display:flex;position:fixed;z-index:25;bottom:0;left:0;right:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fffefbf2;backdrop-filter:blur(12px);border-top:1px solid var(--line);gap:9px;box-shadow:0 -8px 22px #1028460c}
 .mobile-cta .btn{flex:1;padding:12px 8px;font-size:16px}
 .footer{padding-bottom:90px}
}
@media(max-width:390px){h1{font-size:38px}.hero-actions .btn{width:100%}.quick-grid{grid-template-columns:1fr}.quick-card{min-height:auto}.hot-search{align-items:flex-start}.search-box{gap:4px}.search-box .btn{padding:11px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Premium navigation refinement */
.site-header{background:rgba(251,250,247,.96);border-bottom:1px solid #dfe5eb;box-shadow:0 5px 22px rgba(13,36,61,.045)}
.nav{gap:clamp(12px,2vw,28px)}
.brand{min-width:unset;flex-shrink:0;gap:13px}
.brand-mark{width:50px;height:50px;border-radius:17px;position:relative;isolation:isolate;box-shadow:0 9px 22px #1028462b, inset 0 1px 0 #ffffff30;transition:transform .25s,box-shadow .25s}
.brand-mark:after{content:"";position:absolute;inset:-4px;border:1px solid #d6b97880;border-radius:20px;z-index:-1;opacity:0;transform:scale(.88);transition:opacity .25s,transform .25s}
.brand:hover .brand-mark{transform:translateY(-2px);box-shadow:0 13px 28px #10284635,inset 0 1px 0 #ffffff30}
.brand:hover .brand-mark:after{opacity:1;transform:scale(1)}
.brand-name{display:block;font-size:clamp(19px,1.65vw,23px);letter-spacing:.35px;white-space:nowrap}
.brand-sub{display:block;font-size:13px;line-height:1.2;letter-spacing:.15px;white-space:nowrap;color:#3e4853;margin-top:5px}
.nav-links{gap:clamp(3px,.7vw,10px);padding:6px;border:1px solid #e5e9ed;border-radius:17px;background:linear-gradient(180deg,#fffefa,#f7f6f2);box-shadow:0 4px 13px #10284608}
.nav-links a{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 13px;border-radius:12px;color:#1c2734;font-size:16px;font-weight:bold;white-space:nowrap;transition:color .22s,background .22s,transform .22s,box-shadow .22s}
.nav-links a:before{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;border-radius:9px;background:linear-gradient(90deg,#d9b66e,#e77822);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover{color:#102b48;background:#eef3f7;transform:translateY(-1px);box-shadow:0 5px 12px #1028460d}
.nav-links a:hover:before{transform:scaleX(1)}
.nav-icon{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:9px;color:#824c17;background:linear-gradient(145deg,#fff1d6,#f7e4bd);box-shadow:inset 0 0 0 1px #e7d0a3}
.nav-icon svg{width:17px;height:17px}
.nav-links a>i,.nav-links a>b{display:none}
.nav-actions{gap:9px;flex-shrink:0}
.nav-actions .btn-outline{border-color:#d3dce5;background:#fffefa}
.nav-actions .btn-primary{background:linear-gradient(135deg,#183b60,#0b2038);box-shadow:0 7px 18px #10284624}
.menu-toggle{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#fff,#f4f6f8);border-color:#d9e1e9;box-shadow:0 5px 13px #10284610;transition:transform .2s,background .2s}
.menu-toggle:hover{transform:translateY(-1px);background:#f0f4f7}
@media(min-width:761px) and (max-width:1100px){.brand-sub{display:none}.nav-links a{padding:10px 8px;font-size:15px}.nav-icon{width:26px;height:26px}.nav-links{gap:2px}.nav-actions .btn-primary{padding:9px 10px;font-size:14px}}
@media(max-width:760px){
 .nav{min-height:72px;gap:10px}
 .brand{gap:10px;min-width:0;max-width:calc(100% - 58px)}
 .brand-mark{width:43px;height:43px;border-radius:14px}
 .brand-name{font-size:clamp(17px,4.6vw,20px);letter-spacing:.1px}
 .brand-sub{display:block;font-size:12px;white-space:normal;margin-top:4px}
 .nav-actions{margin-left:auto}
 .nav-actions .btn-outline,.nav-actions .btn-primary{display:none}
 .menu-toggle{display:grid;place-items:center;width:45px;height:45px;flex:none}
 .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:14px;right:14px;padding:10px;border:1px solid #dce4eb;border-radius:19px;background:rgba(255,254,250,.98);box-shadow:0 22px 50px rgba(9,31,53,.2);backdrop-filter:blur(18px);flex-direction:column;align-items:stretch;gap:5px;z-index:30;transform-origin:top center;animation:menuDrop .22s ease-out}
 .nav-links.open{display:flex}
 .nav-links a{justify-content:flex-start;gap:12px;padding:11px 12px;min-height:64px;border:1px solid transparent;border-radius:13px;white-space:normal}
 .nav-links a:before{display:none}
 .nav-links a:hover{background:#f0f5f8;border-color:#e1e9ef;transform:none;box-shadow:none}
 .nav-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#fff0d2,#f4dfb4);box-shadow:inset 0 0 0 1px #e6cea0;transition:transform .2s}
 .nav-links a:hover .nav-icon{transform:scale(1.05) rotate(-3deg)}
 .nav-icon svg{width:21px;height:21px}
 .nav-links a>span:nth-child(2){font-size:17px;color:#102b48;line-height:1.2}
 .nav-links a>i{display:block;font-style:normal;font-size:13px;font-weight:normal;color:#424b54;margin-top:4px}
 .nav-links a>b{display:grid;place-items:center;margin-left:auto;width:28px;height:28px;border-radius:9px;background:#f5ead5;color:#854a12;font-size:17px}
 .nav-links a:active{background:#eaf1f6}
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.nav-links{animation:none}.brand-mark,.nav-links a,.nav-icon{transition:none}}


/* Core value proposition band */
.benefit-band{position:relative;z-index:2;padding:18px 0 22px;background:linear-gradient(180deg,#f2f5f7 0%,#fbfaf7 100%);border-bottom:1px solid #e4e8ec}
.benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.benefit-card{position:relative;display:flex;align-items:center;gap:13px;min-width:0;padding:16px 15px;border:1px solid #e1e7ec;border-radius:17px;background:rgba(255,255,255,.92);box-shadow:0 7px 20px rgba(16,40,70,.045);overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s}
.benefit-card:after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,#f4bd62,#e97820);opacity:.85}
.benefit-card:hover{transform:translateY(-3px);border-color:#d4bd91;box-shadow:0 13px 28px rgba(16,40,70,.09)}
.benefit-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:#864912;background:linear-gradient(145deg,#fff2d8,#f5e1b7);box-shadow:inset 0 0 0 1px #ecd4a7}
.benefit-icon svg{width:23px;height:23px}
.benefit-copy{min-width:0}
.benefit-copy strong{display:block;color:#102846;font-size:18px;line-height:1.12;margin-bottom:5px}
.benefit-copy small{display:block;color:#3e4853;font-size:14px;line-height:1.25}
.benefit-card.ai .benefit-icon{background:linear-gradient(145deg,#e4f5f3,#cde9e6);color:#11635e;box-shadow:inset 0 0 0 1px #b8dfda}
.benefit-card.law .benefit-icon{background:linear-gradient(145deg,#eaf1fa,#d8e4f2);color:#285783;box-shadow:inset 0 0 0 1px #d1dfed}
.benefit-card.jobs .benefit-icon{background:linear-gradient(145deg,#fff0df,#f8ddc0);color:#8a4711;box-shadow:inset 0 0 0 1px #f0d0ad}
@media(max-width:900px){.benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.benefit-band{padding:14px 0 17px}}
@media(max-width:520px){.benefit-grid{gap:9px}.benefit-card{padding:12px 10px;gap:9px;border-radius:14px}.benefit-icon{width:38px;height:38px;border-radius:11px}.benefit-icon svg{width:20px;height:20px}.benefit-copy strong{font-size:16px}.benefit-copy small{font-size:12px}.benefit-band{padding:12px 0 14px}.brand-name{font-size:clamp(16px,4.2vw,19px)}.brand-sub{font-size:11px;white-space:normal;max-width:230px}}
@media(prefers-reduced-motion:reduce){.benefit-card{transition:none}}



/* V10: softer alternating section surfaces to reduce glare */
:root{--paper:#f6f5f1;--line:#dfe4e8;--surface-soft:#f0f1ee;--surface-warm:#f7f5ef}
body{background:var(--paper)}
/* Keep the hero and intentionally art-directed bands unchanged; gently separate content sections. */
section:nth-of-type(odd):not(.hero):not(.feature-band):not(.materials){background-color:#eff1ef}
section:nth-of-type(even):not(.hero):not(.feature-band):not(.materials){background-color:#f7f6f2}
.feature-band{background:linear-gradient(135deg,#e9eef1 0%,#f0f2f1 52%,#e9edf0 100%);border-top-color:#dce3e8;border-bottom-color:#dce3e8}
.materials{background:linear-gradient(135deg,#ecefed 0%,#f1f0ea 100%)}
.benefit-band{background:linear-gradient(180deg,#ecefed 0%,#f3f3ef 100%);border-bottom-color:#dce2e5}
.quick-card,.exam-item,.career-card,.tool-card,.job-card,.side-panel,.stats{border-color:#d9e0e5}
.quick-card,.exam-item,.career-card,.tool-card,.job-card,.side-panel{box-shadow:0 5px 18px rgba(16,40,70,.035)}
.quick-card:hover,.exam-item:hover,.career-card:hover,.tool-card:hover,.job-card:hover,.side-panel:hover{box-shadow:0 12px 28px rgba(16,40,70,.085)}
@media(max-width:600px){section{padding-top:48px;padding-bottom:48px}}


/* AI companion widget: chuyển sang assets/css/ai-coach.css (dùng chung mọi trang, 19/10/2026) */


/* Three clear starting paths: personalized-feeling utility without requiring login */
.start-paths{padding:35px 0 39px;background:linear-gradient(180deg,#e8eeec,#f4f3ef);border-top:1px solid #dbe3e1;border-bottom:1px solid #dbe3e1}
.start-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.start-path{display:flex;gap:14px;align-items:flex-start;padding:19px;border:1px solid #d7e0df;border-radius:17px;background:rgba(255,255,255,.82);text-decoration:none;box-shadow:0 6px 18px rgba(16,40,70,.04);transition:transform .2s,box-shadow .2s,border-color .2s}
.start-path:hover{transform:translateY(-3px);border-color:#a9c8c4;box-shadow:0 13px 28px rgba(16,40,70,.09)}
.start-path-num{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:#173d5e;color:#f5cb80;font-weight:bold;font-size:16px}
.start-path strong{display:block;color:#102846;font-size:17px;margin-bottom:5px}
.start-path small{display:block;color:#3c4752;font-size:14px;line-height:1.45}
.start-path .path-arrow{display:block;color:#824c17;font-size:13px;font-weight:bold;margin-top:9px}
@media(max-width:760px){.start-path-grid{grid-template-columns:1fr}.start-path{padding:15px}.start-path-num{width:36px;height:36px}}


/* V12 visual polish: calmer section rhythm, elevated statistics, scroll-triggered counters */
.stats-wrap{margin-top:20px}
.stats{
 background:linear-gradient(135deg,#e8eeeb 0%,#eef1ef 55%,#e6ece9 100%);
 border:1px solid #d2dcd9;
 box-shadow:0 12px 32px rgba(16,40,70,.075), inset 0 1px 0 rgba(255,255,255,.8);
}
.stat{
 position:relative;
 padding:23px 22px;
 border-right:1px solid #d1dbd8;
 transition:background .22s ease, transform .22s ease;
}
.stat:nth-child(odd){background:rgba(255,255,255,.42)}
.stat:nth-child(even){background:rgba(225,233,230,.36)}
.stat:hover{background:rgba(255,255,255,.78)}
.stat-icon{width:48px;height:48px;border-radius:16px;background:#dce7ed;color:#1d527d;transition:transform .22s ease,background .22s ease}
.stat:first-child .stat-icon{background:#ffead7;color:#8d450f}
.stat:hover .stat-icon{transform:translateY(-2px) rotate(-2deg);background:#fff0d8}
.stat strong{font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.stat-counter{display:inline-block;min-width:2ch}
section.section-soft{background:#ecefeb;border-top:1px solid #e0e5e0;border-bottom:1px solid #e0e5e0}
section.section-soft .section-head p{color:#283139}
section.feature-band{background:linear-gradient(135deg,#e8eeeb 0%,#f0f1ec 60%,#e4ebe8 100%);border-top:1px solid #dce3df;border-bottom:1px solid #dce3df}
section.materials{background:linear-gradient(135deg,#e8edeb 0%,#f0f2ee 100%);border-top:1px solid #dce3df;border-bottom:1px solid #dce3df}
section.start-paths{background:linear-gradient(135deg,#e5ebe8 0%,#eef0eb 52%,#e2e9e5 100%)}
@media(max-width:900px){
 .stat{padding:18px 15px;gap:10px}
 .stat-icon{width:42px;height:42px}
}
@media(max-width:600px){
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stat{padding:15px 12px;border-bottom:1px solid #d1dbd8}
 .stat:nth-child(2){border-right:0}
 .stat:nth-child(3),.stat:nth-child(4){border-bottom:0}
 .stat strong{font-size:24px}
 .stat small{font-size:13px;line-height:1.3;display:block;margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
 .stat,.stat-icon{transition:none!important}
}


/* V13 design system polish: consistent motion, section transitions, micro accents */
:root{
 --motion-fast:160ms;
 --motion-standard:220ms;
 --motion-ease:cubic-bezier(.2,.75,.25,1);
 --accent-line:#d5a35e;
 --surface-main:#f6f5f1;
 --surface-soft:#e9eeeb;
 --surface-soft-deep:#e2e9e5;
}
html{scroll-behavior:smooth;scroll-padding-top:112px}
body{background:var(--surface-main)}
/* Give each major section a clear but quiet visual beginning. */
section.section-soft,
section.feature-band,
section.materials,
section.start-paths{
 position:relative;
 isolation:isolate;
}
section.section-soft:before,
section.feature-band:before,
section.materials:before,
section.start-paths:before{
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:max(24px,calc((100% - 1160px)/2));
 width:clamp(56px,7vw,104px);
 height:3px;
 border-radius:0 0 4px 4px;
 background:linear-gradient(90deg,#d5a35e,#f0d8a9);
 opacity:.9;
}
section.section-soft,
section.feature-band,
section.materials,
section.start-paths{
 border-top:1px solid rgba(38,62,77,.07);
 border-bottom:1px solid rgba(38,62,77,.045);
}
.section-head h2{
 position:relative;
 letter-spacing:-.25px;
 text-wrap:balance;
}
.section-head h2:after{
 content:"";
 display:block;
 width:42px;
 height:2px;
 margin-top:12px;
 border-radius:2px;
 background:linear-gradient(90deg,#d5a35e,#ead8b5);
}
.section-head p{line-height:1.58}
.section-label{letter-spacing:1.15px}
.quick-card,.exam-item,.value-card,.career-card,.tool-card,.job-card,
.benefit-card,.start-path,.stat,.material-card,.resource-card{
 transition:
  transform var(--motion-standard) var(--motion-ease),
  box-shadow var(--motion-standard) var(--motion-ease),
  border-color var(--motion-standard) ease,
  background-color var(--motion-standard) ease;
}
.quick-card:hover,.exam-item:hover,.value-card:hover,.career-card:hover,
.tool-card:hover,.job-card:hover,.material-card:hover,.resource-card:hover{
 transform:translateY(-3px);
 border-color:#c4d2d4;
 box-shadow:0 12px 28px rgba(16,40,70,.085);
}
.benefit-card:hover,.start-path:hover{
 transform:translateY(-3px);
 box-shadow:0 13px 28px rgba(16,40,70,.09);
}
.quick-card:focus-visible,.exam-item:focus-visible,.value-card:focus-visible,
.career-card:focus-visible,.tool-card:focus-visible,.job-card:focus-visible,
.benefit-card:focus-visible,.start-path:focus-visible,.btn:focus-visible,
a:focus-visible,button:focus-visible{
 outline:3px solid rgba(35,113,143,.45);
 outline-offset:3px;
}
.btn{transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
/* Keep headings, icons and card edges optically aligned. */
.quick-card h3,.value-card h3,.career-card h3,.tool-card h3,.job-card h3{line-height:1.3;text-wrap:balance}
.quick-card p,.value-card p,.career-card p,.tool-card p,.job-card p{line-height:1.58}
.quick-card .icon,.value-card .icon,.career-card .icon,.tool-card .icon{flex:none}
/* Make the large CTA feel intentional rather than overly glossy. */
.cta-panel{box-shadow:0 16px 34px rgba(16,40,70,.12)}
.cta-panel .btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.14)}
/* Smooth section appearance only when supported; content remains visible without JS. */
@media(prefers-reduced-motion:no-preference){
 .section-head,.stats,.benefit-grid{animation:sectionSettle .45s var(--motion-ease) both}
}
@keyframes sectionSettle{from{opacity:.92;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 html{scroll-padding-top:88px}
 section.section-soft:before,section.feature-band:before,section.materials:before,section.start-paths:before{left:14px;width:54px}
 .section-head h2:after{margin-top:9px;width:34px}
 .quick-card:hover,.exam-item:hover,.value-card:hover,.career-card:hover,.tool-card:hover,.job-card:hover,.benefit-card:hover,.start-path:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .quick-card,.exam-item,.value-card,.career-card,.tool-card,.job-card,.benefit-card,.start-path,.stat,.material-card,.resource-card,.btn{transition:none!important}
 .section-head,.stats,.benefit-grid{animation:none!important}
}


/* V14: use the left-column whitespace for a useful daily action hub */
.daily-action-hub{
 margin-top:18px;
 padding:20px 22px 18px;
 border:1px solid #d9e1df;
 border-radius:20px;
 background:linear-gradient(135deg,#e8eeeb 0%,#f4f4ef 58%,#f8eee1 100%);
 box-shadow:0 10px 26px rgba(16,40,70,.045);
 position:relative;
 overflow:hidden;
}
.daily-action-hub:after{
 content:"";
 position:absolute;
 right:-46px;
 top:-64px;
 width:150px;
 height:150px;
 border:1px solid rgba(213,163,94,.38);
 border-radius:50%;
 box-shadow:0 0 0 17px rgba(213,163,94,.07),0 0 0 34px rgba(213,163,94,.045);
 pointer-events:none;
}
.daily-hub-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px;position:relative;z-index:1}
.daily-hub-kicker{display:flex;align-items:center;gap:7px;color:#8d450f;font-size:13px;font-weight:bold;letter-spacing:.8px;text-transform:uppercase;margin-bottom:4px}
.daily-hub-head h3{margin:0;color:#102846;font-size:23px;line-height:1.2}
.daily-hub-head p{margin:5px 0 0;color:#313c46;font-size:15px;line-height:1.4}
.daily-hub-badge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff9ef;border:1px solid #ecd8b7;color:#804d1d;font-size:12px;font-weight:bold;white-space:nowrap}
.daily-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;position:relative;z-index:1}
.daily-hub-item{display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;padding:13px 12px;border:1px solid #dce4e1;border-radius:14px;background:rgba(255,255,255,.8);transition:transform .2s,border-color .2s,box-shadow .2s}
.daily-hub-item:hover{transform:translateY(-2px);border-color:#c8d7d2;box-shadow:0 8px 18px rgba(16,40,70,.07)}
.daily-hub-icon{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:#e3efeb;color:#11635c}
.daily-hub-item:nth-child(2) .daily-hub-icon{background:#fff0df;color:#8d450f}
.daily-hub-item:nth-child(3) .daily-hub-icon{background:#e4edf5;color:#285783}
.daily-hub-item strong{font-size:16px;line-height:1.2;color:#102846}
.daily-hub-item small{font-size:13px;line-height:1.4;color:#37414a}
.daily-hub-item .hub-link{margin-top:auto;color:#8d450f;font-size:13px;font-weight:bold}
.daily-hub-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:12px;border-top:1px solid #d9e1dd;position:relative;z-index:1}
.daily-hub-bottom p{margin:0;color:#2f3a44;font-size:14px}
.daily-hub-bottom p strong{color:#102846}
.daily-hub-ai{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid #173d5e;background:#173d5e;color:#fff;padding:9px 13px;border-radius:11px;font-weight:bold;font-size:14px;transition:transform .18s,background .18s}
.daily-hub-ai:hover{background:#24557c;transform:translateY(-1px)}
@media(max-width:1050px){
 .daily-action-hub{padding:17px}
 .daily-hub-grid{gap:8px}
 .daily-hub-item{padding:11px 10px}
}
@media(max-width:760px){
 .daily-action-hub{margin-top:14px;padding:16px;border-radius:17px}
 .daily-hub-head{display:block}
 .daily-hub-badge{margin-top:10px}
 .daily-hub-grid{grid-template-columns:1fr;gap:8px}
 .daily-hub-item{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;column-gap:10px;padding:11px}
 .daily-hub-icon{grid-row:span 2}
 .daily-hub-item strong,.daily-hub-item small{grid-column:2}
 .daily-hub-item .hub-link{grid-column:2}
 .daily-hub-bottom{align-items:flex-start;flex-direction:column}
}


/* V17: wide photo framing; gentle background drift moves right-to-left */
.roadmap-hero{background-image:linear-gradient(145deg,#193c61,#0c2037)}
@media(max-width:760px){
 .visual-photo{background-position:62% center;background-size:cover;background-image:linear-gradient(90deg,rgba(16,40,70,.92),rgba(16,40,70,.38)),url("../images/home-v17/lo-trinh-cong-vien-chuc.webp")}
}

/* ================= BỔ SUNG (không có trong file thiết kế) ================= */
/* Khóa học ôn thi - khung hiển thị: khóa bán được hoặc khung "sắp ra mắt" */
.course-zone{padding-top:64px;padding-bottom:64px}
.course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.course-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.course-card:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(16,40,70,.12);border-color:#c2d2e1}
.course-card .micro{font-size:14px;color:#8d450e;font-weight:bold;letter-spacing:.4px;text-transform:uppercase}
.course-card h3{font-size:22px;line-height:1.28;color:var(--navy);margin:0}
.course-card p{font-size:16px;color:var(--muted);margin:0}
.course-card .course-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px;color:#232d3a}
.course-card .course-price{margin-top:auto;display:flex;align-items:baseline;gap:9px;padding-top:10px;border-top:1px solid var(--line)}
.course-card .course-price strong{font-size:22px;color:var(--navy)}
.course-card .course-price s{color:#424b56;font-size:15px}
.course-card .course-price .text-link{margin-left:auto}
.course-soon{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.course-soon-pitch{background:linear-gradient(145deg,#102846,#173d5e);color:#e8eef5;border-radius:24px;padding:32px;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(16,40,70,.18)}
.course-soon-pitch:after{content:"";position:absolute;right:-90px;bottom:-110px;width:280px;height:280px;border-radius:50%;border:44px solid rgba(255,255,255,.05)}
.course-soon-pitch .section-label{color:#ffb45e}
.course-soon-pitch h3{font-size:30px;line-height:1.2;color:#fff;margin:6px 0 10px}
.course-soon-pitch p{color:#c8d5e3;font-size:17px;margin:0 0 18px;max-width:520px}
.course-notify{display:flex;gap:8px;max-width:520px;position:relative;z-index:1}
.course-notify input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:12px 14px}
.course-notify input::placeholder{color:#aabbd0}
.course-soon-note{font-size:14px;color:#aabbd0;margin-top:10px;position:relative;z-index:1}
.course-soon-list{background:#fff;border:1px dashed #cbd5df;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:4px}
.course-soon-list h4{font-size:15px;letter-spacing:.4px;text-transform:uppercase;color:#8d450e;margin:0 0 6px}
.course-soon-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--navy);transition:padding-left .2s}
.course-soon-item:last-child{border-bottom:0}
.course-soon-item:hover{padding-left:5px;color:#8d450e}
.course-soon-item .free-tag{margin-left:auto;background:#fff3e6;color:#824c18}
.course-soon-item strong{font-size:17px;line-height:1.3}
@media(max-width:1000px){.course-grid{grid-template-columns:1fr 1fr}.course-soon{grid-template-columns:1fr}}
@media(max-width:600px){.course-grid{grid-template-columns:1fr}.course-zone{padding-top:44px;padding-bottom:44px}.course-soon-pitch{padding:24px}.course-soon-pitch h3{font-size:25px}.course-notify{flex-direction:column}}
/* Tin tuyển dụng theo tỉnh (dữ liệu thật) */
.side-job .side-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:#232d3a;margin:0 0 6px}
.side-job .side-meta b{color:#824c18}
.side-loading{font-size:14px;color:var(--muted);padding:10px 0}
/* Đếm tài liệu theo định dạng */
.format-count{display:block;font-size:13px;color:#232d3a;margin-top:2px}
/* Tin tuyển dụng: thẻ dữ liệu thật dùng chung kiểu .job-card */
.job-card h3 a{color:inherit}
.job-card .job-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:15px;color:#232d3a;margin:-4px 0 12px}


/* Menu "Ôn thi" có mục con - đồng nhất với header các trang (18/10/2026) */
.nav-group{position:relative;display:flex}
.nav-links .nav-caret{font-style:normal;font-size:12px;color:#8a97a5;margin-left:-2px;transition:transform .2s}
.nav-sub{display:none;position:absolute;top:100%;left:0;min-width:262px;padding:10px 6px 6px;z-index:45}
.nav-sub:before{content:"";position:absolute;inset:6px 0 0;border:1px solid #dce4eb;border-radius:14px;background:#fffefa;box-shadow:0 18px 40px rgba(9,31,53,.16);z-index:-1}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub,.nav-group.open .nav-sub{display:block}
.nav-group:hover .nav-caret,.nav-group.open .nav-caret{transform:rotate(180deg)}
.nav-links .nav-sub a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;margin:2px 4px;border-radius:10px;font-size:16px;font-weight:normal;color:#192836;white-space:nowrap;min-height:0}
.nav-links .nav-sub a:before{display:none}
.nav-links .nav-sub a:hover{background:#eef3f7;color:#102b48;transform:none;box-shadow:none}
.nav-badge{font-size:12px;padding:2px 7px;border:1px solid #c8d5e1;border-radius:6px;color:#3c5874;background:#fff}
@media(max-width:760px){
 .nav-group{display:block}
 .nav-links .nav-caret{display:none}
 .nav-sub{display:block;position:static;min-width:0;padding:0 0 4px 54px}
 .nav-sub:before{display:none}
 .nav-links .nav-sub a{min-height:0;padding:9px 10px;margin:0;font-size:15px;border:0;white-space:normal}
}