/* ==========================================================================
           1. CẤU HÌNH BIẾN MÀU (TỐI ƯU TỪ BẢN RENDER)
           ========================================================================== */
        :root {
            --primary-color: #087F9C;       /* Xanh chủ đạo */
            --primary-hover: #06647c;       /* Xanh đậm khi hover */
            --text-dark: #1A2238;           /* Chữ tiêu đề đậm */
            --text-muted: #536471;          /* Chữ mô tả xám */
            --bg-light: #F8FAFC;            /* Nền xám nhẹ cho Card */
            --white: #FFFFFF;
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            --shadow-md: 0 10px 15px -3px rgba(8, 127, 156, 0.08), 0 4px 6px -2px rgba(8, 127, 156, 0.04);
        }

        /* RESET CƠ BẢN */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--white);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* CONTAINER CHUẨN */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* ==========================================================================
           2. HEADER & NAVIGATION
           ========================================================================== */
        header {
            background-color: var(--white);
            padding: 15px 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .brand-logo img {
            height: 40px;
        }

        /* Nút đăng nhập dạng Outline tinh chỉnh theo UX */
        .btn-login {
            border: 2px solid var(--primary-color);
            background: transparent;
            color: var(--primary-color);
            padding: 8px 24px;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            background-color: var(--primary-color);
            color: var(--white);
        }

        /* ==========================================================================
           3. HERO SECTION (PHẦN ĐẦU TRANG)
           ========================================================================== */
        .hero-section {
            padding: 80px 0;
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 40px;
            align-items: center;
        }

        .hero-tag {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
        }

        .hero-content h1 {
            font-size: 3rem;
            color: var(--text-dark);
            line-height: 1.2;
            margin-bottom: 20px;
            font-weight: 800;
        }

        .hero-content h1 span {
            color: var(--primary-color);
        }

        .hero-content p {
            color: var(--text-muted);
            font-size: 1.1rem;
            margin-bottom: 35px;
            max-width: 500px;
        }

        /* NHÓM NÚT BẤM HERO */
        .hero-buttons {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: var(--white);
            border: none;
            padding: 14px 28px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: var(--shadow-md);
            transition: background 0.3s;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-dark);
            border: 1px solid #E2E8F0;
            padding: 14px 28px;
            border-radius: 8px;
            font-weight: bold;
            font-size: 1rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s;
        }

        .btn-secondary:hover {
            background-color: #F8FAFC;
            border-color: #CBD5E1;
        }

        /* HÌNH ẢNH BANNER (BÊN PHẢI) */
        .hero-image-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .main-avatar {
            width: 100%;
            max-width: 420px;
            z-index: 2;
        }

        /* ==========================================================================
           4. COURSE SECTION (DANH SÁCH KHÓA HỌC)
           ========================================================================== */
        .courses-section {
            padding: 60px 0 100px 0;
        }

        .section-title {
            margin-bottom: 40px;
        }

        .section-title h2 {
            font-size: 2.2rem;
            color: var(--text-dark);
            margin-bottom: 5px;
        }

        .section-title p {
            color: var(--text-muted);
        }

        /* LƯỚI CARD KHÓA HỌC */
        .course-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .course-card {
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #E2E8F0;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-md);
            border-color: rgba(8, 127, 156, 0.3);
        }

        .course-thumb {
            width: 100%;
            height: 200px;
            object-fit: cover;
            background-color: var(--bg-light); /* Fallback khi chưa có hình */
        }

        .course-body {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .course-body h3 {
            font-size: 1.25rem;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .course-body p {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .course-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.95rem;
        }

        .course-link:hover {
            color: var(--primary-hover);
        }

        /* RESPONSIVE CHO THIẾT BỊ DI ĐỘNG */
        @media (max-width: 992px) {
            .hero-section {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 40px 0;
            }
            .hero-content p {
                margin: 0 auto 35px auto;
            }
            .hero-buttons {
                justify-content: center;
            }
            .course-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .course-grid {
                grid-template-columns: 1fr;
            }
            .hero-content h1 {
                font-size: 2.2rem;
            }
            .hero-buttons {
                flex-direction: column;
                width: 100%;
            }
            .btn-primary, .btn-secondary {
                width: 100%;
                justify-content: center;
            }
        }
    
@font-face{font-family:FA;src:url('icons.woff2')} .icon{font-family:FA;font-style:normal}.arrow:before{content:'\f061'}.chevron-left:before{content:'\f053'}.chevron-right:before{content:'\f054'}.close:before{content:'\f00d'}
html{scroll-behavior:smooth;scroll-padding-top:100px}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px}.brand-mark{font-size:32px;letter-spacing:-4px;color:var(--primary-color);padding-right:4px}.btn-login{display:inline-flex;align-items:center;min-height:44px}.hero-buttons{gap:12px;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:14px 20px;min-height:48px}.main-avatar{height:auto;max-width:480px}.hero-section>*{min-width:0}
.carousel{position:relative;margin:0 24px}.course-window{overflow:hidden;touch-action:pan-y;padding:6px 0 20px}.course-track{display:flex;gap:30px;align-items:stretch}.course-card{flex:0 0 calc((100% - 60px)/3);min-width:0}.course-card>img{width:100%;height:auto;aspect-ratio:2.06;object-fit:cover}.course-body{padding:22px}.course-link{border:0;background:none;min-height:44px;text-align:left}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#739ba4;width:44px;height:44px;z-index:2;border-radius:50%}.carousel-arrow:hover{background:#eff8fb;color:var(--primary-color)}.prev{left:-44px}.next{right:-44px}.dots{display:flex;justify-content:center;gap:0}.dot{width:44px;height:44px;border:0;background:transparent;display:grid;place-items:center}.dot:after{content:'';width:9px;height:9px;border-radius:50%;background:#cad5d9}.dot[aria-current=true]:after{background:var(--primary-color)}.sr-only,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;clip-path:none;width:auto;height:auto;top:10px;left:10px;padding:10px;background:white;z-index:200}
footer{border-top:1px solid #e2e8f0;color:var(--text-muted);font-size:12px}.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:20px;gap:16px}footer a{min-height:44px;display:flex;align-items:center}dialog{margin:auto;border:0;border-radius:16px;width:min(570px,calc(100% - 32px));max-height:90dvh;box-shadow:var(--shadow-md);color:var(--text-dark)}dialog::backdrop{background:#1a223899}#dialog-image{width:100%;height:auto;aspect-ratio:2.06;object-fit:cover}.dialog-close{position:absolute;right:12px;top:12px;width:44px;height:44px;background:white;border:1px solid #e2e8f0;border-radius:50%}.dialog-body{padding:25px}.dialog-body h2{margin:12px 0}.dialog-body p{margin-bottom:20px}.modal-open{overflow:hidden}
@media(max-width:767px){.course-card{flex-basis:100%}.hero-section{gap:24px;padding:32px 0}.main-avatar{max-width:380px}.courses-section{padding:30px 0 45px}.section-title{margin-bottom:20px}.section-title h2{font-size:1.8rem}.course-body{padding:20px}.course-body h3{font-size:1.15rem}.footer-inner{flex-direction:column;text-align:center}.header-box{gap:12px}.brand-logo{font-size:1rem}.btn-login{padding:8px 15px}.hero-content p{font-size:1rem;margin-bottom:25px}.hero-buttons{gap:10px}.hero-content h1{font-size:clamp(1.8rem,7.5vw,2.8rem)}.hero-image-wrapper{overflow:hidden}.dialog-body .btn-primary{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}