*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#17345f;background:#fff}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
.wrap{width:min(1280px,calc(100% - 40px));margin:auto}

/* HEADER */
.topbar{height:58px;background:#fff;border-bottom:1px solid #e4e8ed;position:sticky;top:0;z-index:100}
.nav{height:58px;display:flex;align-items:center;gap:25px}
.brand{display:flex;align-items:center;gap:9px;color:#0869d8;min-width:265px}
.logo{width:34px;height:34px;border-radius:9px;background:#0877ef;color:#fff;display:grid;place-items:center;font-weight:900;font-size:15px}
.brand-text b{font-size:14px}.brand small{display:block;font-size:9px;color:#6390c8;margin-top:2px}
.main-nav{display:flex;gap:27px;font-size:13px;flex:1;justify-content:center;white-space:nowrap}
.main-nav a:hover{color:#086cf0}
.phone{background:#f3f6fa;border-radius:20px;padding:9px 16px;font-size:12px;color:#31537d;white-space:nowrap}

/* THANH THÔNG BÁO */
.announcement{height:43px;background:#9da9aa;color:#fff}
.announcement-inner{height:43px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px}
.announcement-icon{font-size:18px}.announcement a{font-weight:800;margin-left:5px}

/* KHU BANNER GIỐNG BỐ CỤC ẢNH MẪU */
.home-banner-area{background:#f5fbff;padding:20px 0 28px}
.banner-layout{display:grid;grid-template-columns:245px minmax(0,1fr) 235px;gap:18px;align-items:stretch}

/* MENU TRÁI */
.course-menu{background:#fff;border-radius:6px;box-shadow:0 4px 15px rgba(22,61,99,.10);overflow:hidden;align-self:start}
.course-menu-title{height:47px;background:#f0f2f4;display:flex;align-items:center;gap:11px;padding:0 15px;color:#4a5359;font-size:16px}
.hamburger{font-size:20px;line-height:1}.course-menu-list{padding:8px 0 12px}
.course-menu-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:7px 14px;color:#555;font-size:14px;transition:.15s}
.course-menu-item:hover{background:#eef7ff;color:#0869d8;padding-left:18px}
.course-icon{width:20px;text-align:center;font-size:15px;opacity:.65}

/* SLIDER GIỮA */
.main-banner-box{position:relative;background:#dbeeff;border-radius:7px;overflow:hidden;box-shadow:0 5px 17px rgba(17,71,122,.12);min-width:0;aspect-ratio:2.18/1}
.main-slides{position:absolute;inset:0}.main-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease}
.main-slide.active{opacity:1;visibility:visible}.main-slide img{display:block;width:100%;height:100%;object-fit:cover}
.main-arrow{position:absolute;top:50%;transform:translateY(-50%);width:39px;height:55px;border:0;background:rgba(255,255,255,.82);color:#096bd9;font-size:35px;cursor:pointer;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.10)}
.main-prev{left:8px;border-radius:5px}.main-next{right:8px;border-radius:5px}
.main-dots{position:absolute;bottom:9px;left:0;right:0;display:flex;justify-content:center;gap:7px;z-index:6}
.main-dot{width:9px;height:9px;border-radius:50%;border:0;background:#fff;box-shadow:0 1px 4px #234;opacity:.75;padding:0;cursor:pointer}
.main-dot.active{background:#0875e8;width:25px;border-radius:7px;opacity:1}
.banner-empty{height:100%;display:grid;place-items:center;text-align:center;color:#52708f}.banner-empty b{font-size:25px}.banner-empty p{font-size:13px}

/* ẢNH NHỎ BÊN PHẢI */
.side-banner-list{display:flex;flex-direction:column;gap:13px}
.side-banner{display:block;background:#fff;border-radius:6px;padding:10px;box-shadow:0 4px 15px rgba(22,61,99,.11);overflow:hidden;transition:.2s}
.side-banner:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(22,61,99,.17)}
.side-banner img{width:100%;display:block;aspect-ratio:1/1.36;object-fit:cover;border-radius:4px}
.side-empty{background:#fff;border-radius:6px;padding:35px 18px;box-shadow:0 4px 15px rgba(22,61,99,.10);text-align:center;color:#58718e;min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.side-empty b{color:#096bd9;font-size:17px}.side-empty span{font-size:12px;line-height:1.5}

/* CÁC SECTION */
.section{padding:78px 0}.alt{background:#f4f8fc}.section-head{display:flex;gap:26px;align-items:flex-start}
.section-head>span{font-size:52px;color:#0872ee;font-weight:800;line-height:1}.eyebrow{font-size:13px;font-weight:800;color:#0871eb;letter-spacing:1.7px}
.section h2{font-size:38px;margin:8px 0 12px;color:#0a4fae}.section-head p{font-size:18px;line-height:1.7;color:#5e7493;max-width:850px}
.title-center{text-align:center;margin-bottom:38px}.title-center h2{margin:8px 0 10px;font-size:40px}.title-center p{color:#6a7f9c;line-height:1.6;margin:0 auto;max-width:800px}

/* CARDS */
.chapter-grid,.quiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.chapter-card,.quiz-card{background:#fff;border:1px solid #e1eaf5;border-radius:18px;padding:27px;box-shadow:0 8px 22px rgba(21,75,141,.05);transition:.2s}
.chapter-card:hover,.quiz-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px rgba(21,75,141,.10)}.chapter-icon{width:52px;height:52px;border-radius:14px;background:#e9f3ff;color:#086ff0;display:grid;place-items:center;font-weight:900;font-size:20px}
.chapter-card h3,.quiz-card h3{font-size:22px;margin:18px 0 8px}.chapter-card p,.quiz-card p{color:#607797;line-height:1.6;min-height:50px}.chapter-card strong{color:#086ff0}
.mini-label{font-size:11px;color:#0871eb;font-weight:800;letter-spacing:1px}.outline{display:inline-block;border:1px solid #0872ee;color:#0872ee;border-radius:9px;padding:10px 15px;font-weight:700}
.featured{background:linear-gradient(135deg,#0b52bd,#0a8ce5);color:#fff;border:none}.featured h3,.featured p,.featured .mini-label{color:#fff}.featured .btn{background:#fff;color:#0860c8}
.material-types{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.material-types>div{background:#fff;border:1px solid #dfe9f5;border-radius:18px;padding:27px;text-align:center;box-shadow:0 7px 20px rgba(21,75,141,.04)}.material-types span{display:block;font-size:40px}.material-types b,.material-types small{display:block}.material-types b{font-size:16px;margin-top:13px}.material-types small{font-size:13px;color:#6c809b;margin-top:5px}.center{text-align:center}
.guide-list{display:grid;gap:24px}.guide{border:1px solid #e1eaf5;border-radius:18px;padding:25px}.video{position:relative;padding-top:56.25%;overflow:hidden;border-radius:12px;background:#071b3b;margin:15px 0}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
footer{background:#082c6e;color:#dbe9ff;padding:48px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:25px}.footer-grid h3{color:#fff}.footer-grid a{color:#fff}
.content-page{padding:55px 0 100px}.content-page h1{font-size:44px;color:#0a4fae;margin:10px 0}.lead{font-size:19px;line-height:1.7;color:#607797}.article-cover{width:100%;max-height:520px;object-fit:cover;border-radius:22px;margin-bottom:30px}.content-page article{font-size:18px;line-height:1.8}.lesson-list{display:grid;gap:25px}.lesson{border:1px solid #e1eaf5;border-radius:18px;padding:25px}.lesson h2{color:#0a4fae}.material-list{display:grid;gap:12px}.material-row{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid #e1eaf5;border-radius:14px}.material-row small{display:block;color:#71849d;margin-top:5px}.file-icon{font-size:25px}

@media(max-width:1050px){
 .banner-layout{grid-template-columns:205px minmax(0,1fr) 190px;gap:12px}.main-nav{gap:15px;font-size:12px}.brand{min-width:225px}.course-menu-item{font-size:12px}.side-banner{padding:7px}
 .chapter-grid,.quiz-grid{grid-template-columns:1fr 1fr}.material-types{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
 .topbar,.nav{height:auto;min-height:58px}.nav{padding:8px 0;flex-wrap:wrap}.brand{min-width:0;flex:1}.main-nav{order:3;width:100%;overflow:auto;justify-content:flex-start;padding:4px 0 5px;gap:18px}.phone{font-size:11px;padding:8px 12px}
 .announcement{height:auto}.announcement-inner{height:auto;min-height:40px;padding:8px;font-size:11px;flex-wrap:wrap}.announcement a{display:none}
 .banner-layout{grid-template-columns:1fr}.course-menu{order:2}.course-menu-list{display:grid;grid-template-columns:1fr 1fr}.course-menu-item{min-height:38px}.main-banner-box{order:1;aspect-ratio:1.8/1}.side-banner-list{order:3;display:grid;grid-template-columns:repeat(2,1fr)}.side-banner img{aspect-ratio:1.5/1;object-fit:cover}
}
@media(max-width:560px){
 .wrap{width:calc(100% - 24px)}.phone{display:none}.main-nav{font-size:11px}.course-menu-list{grid-template-columns:1fr}.main-banner-box{aspect-ratio:1.45/1}.main-arrow{width:32px;height:45px;font-size:28px}.side-banner-list{grid-template-columns:1fr 1fr}.section{padding:55px 0}.section-head{gap:15px}.section-head>span{font-size:38px}.section h2,.title-center h2{font-size:29px}.section-head p{font-size:16px}.chapter-grid,.quiz-grid,.material-types,.footer-grid{grid-template-columns:1fr}
}