/* --- 1. SETUP & VARIABLES --- */
:root {
    --primary: #f97316;
    --primary-dark: #ea580c;
    --text-dark: #1e293b;
    --text-gray: #64748b;
    --bg-body: #f8fafc;
    --header-height: 90px;
    --menu-height: 55px;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-dark);
    /* Đẩy nội dung xuống để không bị Header che mất */
/*            padding-top: calc(var(--header-height) + var(--menu-height)); */
}

h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; }
a { text-decoration: none !important; transition: all 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- 2. TOP HEADER (Logo, Search, Login) --- */
.top-header {
    background: #fff;
    height: var(--header-height);
    display: flex; align-items: center;
    border-bottom: 1px solid #f1f5f9;
    position: sticky; top: 0; width: 100%; z-index: 1000;
}

.logo {
    font-size: 1.5rem; font-weight: 800; color: var(--primary);
    letter-spacing: -1px; display: flex; align-items: center;
}
.logo i { font-size: 1.8rem; margin-right: 8px; }

.logo img {
    max-height: 80px;
}

/* Search Bar */
.search-box { position: relative; width: 100%; max-width: 330px; }
.search-input {
    width: 100%; padding: 10px 20px 10px 45px;
    border-radius: 50px; border: 1px solid #e2e8f0;
    background: #f8fafc; transition: all 0.3s;
}
.search-input:focus {
    background: #fff; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); outline: none;
}
.search-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #94a3b8;
}

/* User Actions */
.btn-action { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.btn-action:hover { color: var(--primary); }
.btn-signup {
    background: var(--primary); color: #fff;
    padding: 8px 20px; border-radius: 50px;
    box-shadow: 0 4px 10px rgba(249, 115, 22, 0.3);
}
.btn-signup:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); }

/* --- 3. MAIN MENU (Menu Ngang) --- */
.main-menu {
    background: #fff;
    height: var(--menu-height);
    display: flex; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
/*            position: fixed; */
top: var(--header-height); width: 100%; z-index: 999;
position: relative;
    top: 0;
    margin-bottom: 5px;
}

.menu-list { display: flex; align-items: center; height: 100%; }
.menu-item { height: 100%; display: flex; align-items: center; margin-right: 30px; position: relative; }
.menu-link {
    color: var(--text-dark); font-weight: 600; font-size: 0.95rem;
    display: flex; align-items: center; height: 100%;
}
.menu-link:hover { color: var(--primary); }
.menu-link i { margin-right: 6px; font-size: 1.1rem; }

/* Nút Danh mục nổi bật */
.menu-cat-btn {
    background: #f1f5f9; padding: 0 15px; border-radius: 6px; height: 36px;
    color: var(--text-dark) !important;
}
.menu-cat-btn:hover { background: var(--text-dark); color: #fff !important; }

/* MEGA MENU (Dropdown lớn) */
.mega-dropdown {
    position: absolute; top: var(--menu-height); left: 0;
    width: 800px; background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 20px; border-radius: 0 0 8px 8px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all 0.3s;
}
.menu-item:hover .mega-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0); z-index: 9999;
}
.mega-col h6 {
    color: var(--primary); font-weight: 700; text-transform: uppercase;
    font-size: 0.85rem; margin-bottom: 12px; border-bottom: 1px solid #eee; padding-bottom: 5px;
}
.mega-link-item { display: block; padding: 5px 0; color: #64748b; font-size: 0.9rem; }
.mega-link-item:hover { color: var(--text-dark); padding-left: 5px; }

/* --- 4. FULL WIDTH BANNER SLIDER --- */
.hero-slider-section {
    width: 100%;
    overflow: hidden;
}
.carousel-item {
    background-size: cover; background-position: center;
    position: relative;
}

/* Overlay đen mờ trên banner để chữ dễ đọc */
.carousel-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
}

.carousel-caption {
    text-align: left; left: 10%; right: auto; top: 50%; transform: translateY(-50%);
    bottom: auto; /* Reset bottom */
}
.slide-title {
    font-size: 3.5rem; font-weight: 800; color: #fff; margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.slide-desc { font-size: 1.2rem; color: rgba(255,255,255,0.9); margin-bottom: 30px; max-width: 600px; }
.btn-slide {
    background: var(--primary); color: #fff; padding: 12px 35px;
    border-radius: 50px; font-weight: 700; text-transform: uppercase; border: none;
}
.btn-slide:hover { background: #fff; color: var(--primary); transform: scale(1.05); }

/* --- 5. COURSE CARD (Card Khóa học) --- */
.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 50px 0 30px; }
.section-title { font-size: 2rem; font-weight: 800; color: #0f172a; position: relative; padding-left: 15px; }
.section-title::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 5px;
    background: var(--primary); border-radius: 10px;
}

.course-card {
    background: #fff; border-radius: 12px; border: 1px solid #f1f5f9;
    transition: 0.3s; overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.card-thumb { position: relative; padding-top: 56.25%; overflow: hidden; }
.card-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: 0.5s;
}
.course-card:hover .card-img { transform: scale(1.1); }

.card-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
.course-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.4; color: #1e293b; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card:hover .course-title { color: var(--primary); }

.instructor img { width: 24px; height: 24px; border-radius: 50%; margin-right: 5px; }
.instructor span { font-size: 0.85rem; color: #64748b; }

.price-box { margin-top: auto; padding-top: 10px; border-top: 1px solid #f8fafc; display: flex; justify-content: space-between; align-items: center; }
.price-current { color: var(--primary); font-weight: 800; font-size: 1.1rem; }
.price-old { color: #94a3b8; text-decoration: line-through; font-size: 0.85rem; }




.header-scrolled {
    height: 50px !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}

/* 2. Logo thu nhỏ */
.header-scrolled .logo {
    font-size: 1.2rem; /* Giảm cỡ chữ logo */
}
.header-scrolled .logo img {
    height: 40px;
}

.header-scrolled .search-input {
    padding: 6px 20px 6px 45px; /* Giảm padding ô tìm kiếm */
    font-size: 0.9rem;
}

/* 4. Menu ngang (Main Menu) phải chạy lên theo */
/* Khi header thu nhỏ còn 50px, menu phải dính vào top: 50px */
.main-menu.menu-scrolled {
    top: 50px !important; 
}

/* 5. Hiệu ứng chuyển động mượt (Transition) */
/* Cần thêm transition vào các class gốc để khi đổi size nó mượt mà */
.top-header, 
.logo, 
.logo i,
.search-input,
.main-menu {
    transition: all 0.3s ease-in-out;
}

/* --- FOOTER HIỆN ĐẠI (Premium Style) --- */
.site-footer {
    background-color: #0f172a; /* Màu xanh đen sâu thẳm (Slate 900) */
    color: #94a3b8; /* Màu chữ xám sáng */
    font-size: 0.95rem;
    padding-top: 60px;
    margin-top: 50px;
    position: relative;
}

/* Kẻ viền trang trí màu cam trên cùng */
.site-footer::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f97316, #db2777);
}

/* Tiêu đề cột */
.footer-heading {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}
.footer-heading::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 40px; height: 3px;
    background-color: var(--primary); /* Gạch chân nhỏ màu cam */
    border-radius: 2px;
}

/* Liên kết (Links) */
.footer-links li {
    margin-bottom: 12px;
    display: block;
}
.footer-links a {
    color: #94a3b8;
    transition: all 0.3s ease;
    display: inline-block;
}
.footer-links a:hover {
    color: #fff;
    transform: translateX(5px); /* Hiệu ứng trượt sang phải */
    text-decoration: none !important;
}
.footer-links i { margin-right: 8px; font-size: 0.8rem; color: #64748b; }

/* Thông tin liên hệ */
.contact-info li {
    display: flex; margin-bottom: 15px;
}
.contact-info i {
    width: 25px; color: var(--primary); margin-top: 4px;
}

/* Social Buttons */
.social-btn {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.05);
    display: inline-flex; justify-content: center; align-items: center;
    border-radius: 50%; color: #fff; margin-right: 10px;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
}
.social-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Newsletter Box (Đăng ký nhận tin) */
.newsletter-box {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.footer-input {
    background: #1e293b;
    border: 1px solid #334155;
    color: #fff;
    border-radius: 6px;
    padding: 10px 15px;
    width: 100%;
    margin-bottom: 10px;
}
.footer-input:focus {
    background: #1e293b;
    border-color: var(--primary);
    color: #fff;
    box-shadow: none;
}
.btn-sub {
    width: 100%;
    background: var(--primary);
    color: white;
    font-weight: 700;
    border: none;
    padding: 10px;
    border-radius: 6px;
}
.btn-sub:hover { background: var(--primary-dark); }

/* Footer Bottom */
.footer-bottom {
    background-color: #020617; /* Màu đen nhất */
    padding: 20px 0;
    margin-top: 50px;
    border-top: 1px solid #1e293b;
    font-size: 0.9rem;
}

.modal {
  /* --- AUTH MODAL STYLES --- */
  /* --- MODERN AUTH MODAL --- */
  /* 1. Modal Radius & Shadow */
  /* 2. Tabs "Pill" Style */
  /* 3. INPUT GROUP (QUAN TRỌNG - Làm input đẹp ở đây) */
  /* Khi bấm vào input thì viền của cả cụm đổi màu */
  /* Icon bên trái */
  /* Ô nhập liệu */
  /* Đổi màu icon khi focus */
  /* Placeholder màu nhạt */
  /* 4. Button */ }
  .modal .modal-content {
    border-radius: 20px !important;
    /* Bo góc to hơn */
    border: none !important;
    overflow: hidden;
    /* Để header không bị lòi ra khỏi bo góc */ }
  .modal .nav-pills {
    background-color: #f8fafc;
    padding: 6px;
    border-radius: 12px;
    margin: 20px; }
  .modal .nav-pills .nav-link {
    border-radius: 10px;
    color: #000;
    font-weight: 600;
    padding: 10px 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease; }
  .modal .nav-pills .nav-link.active {
    background-color: #fff;
    color: #ea580c;
    /* Cam đậm */
    -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Bóng mờ tinh tế */ }
  .modal .modern-input-group {
    background-color: #f1f5f9;
    /* Nền xám nhạt hiện đại */
    border: 2px solid transparent;
    /* Viền trong suốt */
    border-radius: 12px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden; }
  .modal .modern-input-group:focus-within {
    background-color: #fff;
    border-color: #f97316;
    /* Viền cam hiện lên */ }
  .modal .modern-icon {
    background: transparent !important;
    border: none !important;
    color: #252525;
    padding-left: 20px;
    padding-right: 10px;
    font-size: 1.1rem; }
  .modal .modern-input {
    background: transparent !important;
    border: none !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    /* XÓA BÓNG FOCUS XẤU XÍ */
    height: 50px;
    /* Cao hơn cho dễ nhìn */
    padding-left: 5px;
    font-weight: 500;
    color: #334155;
    width: 100%;
    font-size: 14px; }
  .modal .modern-input-group:focus-within .modern-icon i {
    color: #f97316; }
  .modal .modern-input::-webkit-input-placeholder {
    color: #000;
    opacity: .6;
    font-weight: 400; }
  .modal .modern-input:-ms-input-placeholder {
    color: #000;
    opacity: .6;
    font-weight: 400; }
  .modal .modern-input::-ms-input-placeholder {
    color: #000;
    opacity: .6;
    font-weight: 400; }
  .modal .modern-input::placeholder {
    color: #000;
    opacity: .6;
    font-weight: 400; }
  .modal .btn-gradient {
    background: linear-gradient(135deg, #f97316 0%, #db2777 100%);
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    -webkit-transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    transition: -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    transition: transform 0.2s, box-shadow 0.2s;
    transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
    color: white; }
  .modal .btn-gradient:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    -webkit-box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.4);
            box-shadow: 0 10px 20px -5px rgba(249, 115, 22, 0.4);
    /* Bóng màu cam hồng */ }
  .modal .btn-gradient:active {
    -webkit-transform: scale(0.98);
            transform: scale(0.98); }
  .modal .small {
    font-size: 14px; }
  .modal label {
    font-weight: normal !important;
    font-size: 14px;
    color: #000 !important; }

/* RESPONSIVE */
@media (max-width: 991px) {
    .site-footer {
        margin-top: 30px;
    }
    .slide-title { font-size: 2rem; }
    .main-menu { display: none; } 
    body { padding-top: var(--header-height); }

    body {
        padding-top: 0;
    }
    .logo img {
        max-width: 155px;
    }
    .top-header {
        position: static;
    }
    :root {
        --primary: #f97316;
        --primary-dark: #ea580c;
        --text-dark: #1e293b;
        --text-gray: #64748b;
        --bg-body: #f8fafc;
        --header-height: 80px;
        --menu-height: 55px;
    }
}


:root {
    --primary: #f05123;           /* Cam đậm chuẩn Unica/Shopee */
    --primary-gradient: linear-gradient(90deg, #f05123 0%, #d93f0b 100%);
    --text-main: #2c3e50;         /* Đen xanh */
    --text-sub: #52616b;          /* Xám đậm */
    --bg-body: #f5f5f5;           /* Nền xám nhạt */
    --sidebar-left-w: 260px;
    --sidebar-right-w: 360px;
    --radius-std: 6px;            /* Bo góc chuẩn (không tròn vo) */
}

::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #eee; }
    ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

    .learning-wrapper { display: flex; width: 100%;  }

    /* --- 2. CỘT TRÁI (User) --- */
    .learn-sidebar-left {
        width: var(--sidebar-left-w);
        background: #fdf8f5;
/*        border-right: 1px solid #ddd;*/
        display: flex; flex-direction: column;
        flex-shrink: 0; z-index: 10;
        height: 100%;
    }

    .btn-buy-now:hover {
        background: linear-gradient(-135deg, #f97316 0%, #db2777 100%);
    }

    .user-box {
        padding: 25px 15px; text-align: center;
        border-bottom: 1px solid #eee;
    }
    .user-avatar {
        width: 80px; height: 80px; border-radius: 50%;
        object-fit: cover; border: 3px solid #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }
    .user-name { font-weight: 700; font-size: 15px; margin-bottom: 5px; color: #000; }
    
    /* BUTTON "HỌC NGAY" - STYLE GỐC */
    .btn-hoc-ngay {
        background: var(--primary-gradient);
        color: #fff; border: none;
        padding: 10px 0; width: 100%;
        font-weight: 700; text-transform: uppercase;
        border-radius: 4px; /* Bo nhẹ */
        font-size: 13px; cursor: pointer;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: 0.2s;
    }
    .btn-hoc-ngay:hover { transform: translateY(-1px); opacity: 0.95; }

    .learn-nav { padding: 10px 0;  }
    .learn-nav a {
        display: flex; align-items: center;
        padding: 12px 20px; color: #1e293b;
        font-weight: 600; text-decoration: none;
        font-size: 14px; border-left: 4px solid transparent;
    }
    .learn-nav a i { width: 25px; font-size: 16px; text-align: center; margin-right: 10px; }
    
    .learn-nav a:hover, .learn-nav a.active {
        background: #fff5f2; color: var(--primary);
        border-left-color: var(--primary);
    }

    /* --- 3. CỘT GIỮA (Video) --- */
    .learn-main-stage {
        flex-grow: 1; background: #fff;
/*        overflow-y: auto; */
        padding: 20px;
    }
    .btn-back {
        display: inline-block; background: #e74c3c; color: white;
        padding: 5px 12px; border-radius: 4px; font-size: 12px;
        font-weight: bold; text-decoration: none; margin-bottom: 15px;
    }
    .btn-back:hover {
        color: white;
        opacity: .8;
    }
    .video-container {
        background: #000; width: 100%; margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .lesson-title-main { font-size: 22px; font-weight: 700; color: #d35400; margin-bottom: 10px; text-transform: uppercase; }
    .lesson-desc-text { font-size: 14px; line-height: 1.6; color: #333; }

    /* --- 4. CỘT PHẢI (Playlist - Style màu kem) --- */
    .learn-sidebar-right {
        width: var(--sidebar-right-w);
        background: white; /* Nền kem nhạt giống ảnh */
        border-left: 1px solid #e0e0e0;
        display: flex; flex-direction: column;
        flex-shrink: 0;
    }

    .playlist-head {
        padding: 15px; background: #fff;
        border-bottom: 1px solid #ddd;
        display: flex; justify-content: space-between; align-items: center;
    }
    .playlist-head h6 { 
        color: #e74c3c; font-weight: 700; margin: 0; 
        font-size: 13px; text-transform: uppercase; 
    }


    .playlist-scroll { flex-grow: 1; overflow-y: auto; padding: 10px; }

    /* ITEM BÀI HỌC */
    .l-card {
        display: flex; background: #fff;
        padding: 10px; border-radius: 4px;
        margin-bottom: 8px; cursor: pointer;
        border: 1px solid #e5e5e5;
        transition: 0.2s;
    }
    .l-card:hover { border-color: #bbb; }

    .l-card img {
        width: 100px; height: 60px; object-fit: cover;
        border-radius: 2px; margin-right: 10px;
        border: 1px solid #eee;
    }

    .l-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .l-name {
        font-size: 13px; font-weight: 600; color: #333;
        line-height: 1.3; margin-bottom: 4px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    
    /* Badge PRO màu vàng đen */
    .badge-pro {
        background: #ffc107; color: #000;
        padding: 2px 6px; border-radius: 2px;
        font-weight: 800; font-size: 10px; text-transform: uppercase;
    }
    .l-meta { font-size: 11px; color: #777; display: flex; align-items: center; justify-content: space-between; }

    /* --- ACTIVE STATE (Màu đen giống ảnh) --- */
    .l-card.active {
        background: #222; /* Đen tuyền */
        border-color: #000;
    }
    .l-card.active .l-name { color: #fff; } /* Chữ trắng */
    .l-card.active .l-meta { color: #aaa; }
    .l-card.active img { opacity: 0.8; border-color: #444; }

    /* NÚT ZALO/PHONE TRÒN */
    .floating-btn {
        width: 45px; height: 45px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        transition: 0.3s;
    }
    .floating-btn:hover { transform: scale(1.1); text-decoration: none; color: white; }

    .lesson-desc-text p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 15px;
        text-align: justify;
     }
     .lesson-desc-text h2 {
        font-size: 20px;
        margin-bottom: 15px;

     }

     .lesson-desc-text h2 {
        font-size: 18px;
        margin-bottom: 15px;

     }
    /* Responsive */
    @media (max-width: 991px) {
        .learning-wrapper { height: auto; overflow: auto; }
        .learn-sidebar-left { display: none; } 
        .learn-sidebar-right { width: 100%; height: auto; 
        border-left: 0;
            flex-shrink: 1.5;
        }
        .learn-main-stage { padding: 15px;

                flex-shrink: 2;
         }
         .lesson-desc-text h2 {
            font-size: 18px;
         }

    }

@media (max-width: 767px) {
        .learning-wrapper {flex-direction: column-reverse;height: auto; overflow: auto; }
        .learn-sidebar-left { display: none; } 
        .learn-sidebar-right { width: 100%; height: auto; 
        border-left: 0;
            flex-shrink: 1.5;
        }
        .learn-main-stage { padding: 15px;

                flex-shrink: 2;
         }
    }


/* Nền tổng thể sáng sủa */
.settings-stage {
    flex-grow: 1;
    background: #fdfdfd; /* Trắng ngà cực nhẹ */
    overflow-y: auto;
    padding: 15px;
}

.page-title-clean {
    font-weight: 700; color: #333; font-size: 18px; margin: 0;
}

/* Thẻ Card: Bỏ viền đen, dùng bóng mờ, bo góc mềm */
.settings-card-clean {
    background: #fff;
    padding: 20px;
    border-radius: 12px; /* Bo góc mềm mại */
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* Bóng siêu nhẹ */
    border: 1px solid #f0f0f0;
}

/* Avatar: Tròn, viền mảnh */
.avatar-wrapper-clean {
    position: relative; width: 80px; height: 80px;
}
.avatar-wrapper-clean img {
    width: 100%; height: 100%; border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e5e5; /* Viền xám siêu mảnh */
    padding: 3px; /* Khoảng trắng giữa ảnh và viền */
}
.avatar-btn-clean {
    position: absolute; bottom: 0; right: -5px;
    width: 28px; height: 28px;
    background: #fff; color: #555;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    border: 1px solid #eee;
    transition: 0.2s;
}
.avatar-btn-clean:hover { color: var(--primary); border-color: var(--primary); }

/* Label: Chữ nhỏ, màu xám sang */
.label-clean {
    font-size: 13px; font-weight: 600; color: #64748b;
    margin-bottom: 6px;
}

/* Input: Bo tròn nhẹ, viền xám nhạt, thanh mảnh */
.input-clean {
    border-radius: 6px; /* Bo góc 6px nhìn mềm hơn vuông */
    border: 1px solid #e2e8f0;
    height: 38px; /* Giảm chiều cao xuống tí cho gọn */
    font-size: 13px; color: #333;
    background-color: #fff;
    transition: all 0.2s;
}
.input-clean:focus {
    border-color: #f97316; /* Màu cam khi focus */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); /* Glow nhẹ */
    background: #fff;
}
.input-clean.bg-locked {
    background-color: #f8fafc; color: #94a3b8; border-color: #f1f5f9;
}

/* Đường kẻ phân cách siêu mảnh */
.divider-clean {
    height: 1px; background: #f1f5f9; margin: 25px 0;
}

/* Nút bấm: Bo tròn (Pill), nhỏ gọn */
.btn-save-clean {
    background: #f97316; color: #fff; border: none;
    padding: 8px 25px;
    border-radius: 50px; /* Bo tròn viên thuốc */
    font-size: 13px; font-weight: 600;
    box-shadow: 0 3px 10px rgba(249, 115, 22, 0.2);
    transition: 0.2s;
}
.btn-save-clean:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
}

.btn-cancel-clean {
    background: transparent; color: #64748b; border: 1px solid transparent;
    padding: 8px 20px; border-radius: 50px;
    font-size: 13px; font-weight: 600;
}
.btn-cancel-clean:hover { background: #f1f5f9; color: #333; }

.btn-buy-now {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #f97316 0%, #db2777 100%);
    color: white;
    border: none;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: none !important;
}
.btn-buy-now:hover {
    color: white;
    cursor: pointer;
}

.affiliate-area {
    background: #f8f9fa;
    border: 1px dashed #ced4da; /* Viền đứt nét tạo cảm giác coupon/mã */
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Ô nhập liệu chứa link */
.aff-input {
    background-color: #fff !important;
    border: 1px solid #ddd;
    border-right: none;
    font-size: 13px;
    color: #555;
    height: 38px;
    font-family: monospace; /* Font kiểu code */
}
.aff-input:focus {
    box-shadow: none;
    border-color: #ddd;
}

/* Nút Copy đẹp */
.btn-copy-link {
    background: linear-gradient(90deg, #f05123 0%, #d93f0b 100%); /* Màu cam gốc */
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 13px;
    padding: 0 15px;
    height: 38px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: all 0.2s;
}

.btn-copy-link:hover {
    color: #fff;
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-copy-link:active {
    transform: translateY(0);
}

.btn-copy-link i { margin-right: 4px; }

/* Trạng thái khi đã copy xong (JS sẽ thêm class này) */
.btn-copy-link.copied {
    background: #27ae60; /* Chuyển sang màu xanh lá */
    cursor: default;
}

.payment-modal-content {
  border-radius: 16px !important;
  border: none;
  overflow: hidden; }

/* 2. Timer Badge */
.payment-timer-badge {
  display: inline-block;
  background-color: #eff6ff;
  /* Xanh dương rất nhạt */
  color: #1e3a8a;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500; }

/* 3. Cột QR Code */
.border-right-md {
  border-right: 1px solid #e2e8f0; }

@media (max-width: 768px) {
  .border-right-md {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 5px;
    margin-bottom: 5px; } }
.qr-container {
  background: #fff;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  display: inline-block; }

.qr-image {
  border-radius: 8px; }

/* 4. Info Rows (Bảng thông tin) */
.border-left-orange {
  border-left: 4px solid #f97316; }

.transfer-info-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px; }

.info-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 0;
  border-bottom: 1px dashed #e2e8f0; }

.info-row:last-child {
  border-bottom: none; }

.info-row.bg-highlight {
  /*    padding: 10px 0;*/
  border-radius: 8px;
  border-bottom: none; }

.info-label {
  color: #64748b;
  font-size: 0.9rem; }

.info-value {
  font-size: 14px;
  color: #334155; }

/* 5. Copy Button */
.btn-copy {
  background: #f1f5f9;
  border: none;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  color: #64748b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s; }
  .btn-copy i {
    font-size: 14px; }

.btn-copy:hover {
  background: #e2e8f0;
  color: #f97316; }

/* 6. Alert Warning Custom */
.alert-warning-custom {
  background-color: #fffbeb;
  /* Vàng kem */
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.85rem;
  border-radius: 8px;
  line-height: 1.5; }

.text-warning-dark {
  color: #b45309; }

/* 7. Text Colors Override */
.text-orange {
  color: #f97316 !important; }

.text-primary, .btn-outline-primary{
        color: var(--primary) !important;}

.btn-outline-primary {
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover,.btn-outline-primary:active {
    background: var(--primary) !important;
    color: white !important;
}
.btn-outline-primary:focus {
    box-shadow: none !important;
}
.payment-modal-content h4 {
  font-size: 18px; }
.payment-modal-content .text-muted {
  color: #3B3B44 !important; }

.instructor-banner-wrapper {
        /* Gradient cam pha chút đỏ nhẹ để đằm màu hơn, đỡ chói */
        background: linear-gradient(120deg, #ff8c42 0%, #f97316 100%);
        padding: 50px 0;
        color: #fff;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        margin: 40px 0 -50px;
        box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2); /* Bóng màu cam nhẹ */
        position: relative;
        overflow: hidden;
    }

    /* Trang trí nền (Hình tròn mờ) */
    .instructor-banner-wrapper::after {
        content: ''; position: absolute; top: -50px; right: -50px;
        width: 300px; height: 300px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%; pointer-events: none;
    }

    .badge-sub-title {
        background: rgba(255,255,255,0.2);
        color: #fff; font-size: 11px; font-weight: 700;
        padding: 5px 12px; border-radius: 20px;
        letter-spacing: 1px; display: inline-block; margin-bottom: 10px;
    }

    .instructor-banner-wrapper .banner-title {
        font-size: 2.2rem; font-weight: 800;
        margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .instructor-banner-wrapper .banner-desc {
        font-size: 1.05rem; opacity: 0.95; line-height: 1.6;
        margin-bottom: 30px; font-weight: 400;
    }

    /* NÚT PILL TRẮNG (Điểm nhấn) */
    .btn-register-pill {
        background: #fff;
        color: #f97316; /* Chữ cam */
        border: none;
        padding: 14px 35px;
        border-radius: 50px; /* Bo tròn viên thuốc */
        font-weight: 800; font-size: 14px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        cursor: pointer; display: inline-block;
    }
    
    .btn-register-pill:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        color: #ea580c;
    }

    .hotline-text {
        margin-top: 15px; font-size: 14px; opacity: 0.9;
    }

    /* Ảnh Banner */
    .instructor-banner-wrapper .banner-img {
        max-height: 280px;
        filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
        transition: transform 0.3s;
    }
    .instructor-banner-wrapper:hover .banner-img {
        transform: scale(1.03) rotate(2deg);
    }

    /* --- 2. MODAL & FORM STYLE (FIX LỖI THÔ) --- */
    
    .instructor-modal-soft .modal-content {
        border-radius: 16px; /* Bo góc modal lớn */
        box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        overflow: hidden;
    }
    
    .instructor-modal-soft .modal-header {
        background: #fcfcfc;
        padding: 25px 25px 10px 25px;
    }

    .instructor-modal-soft .modal-body {
        padding: 10px 30px 30px 30px;
    }

    .label-soft {
        font-size: 13px; font-weight: 700; color: #475569;
        margin-bottom: 6px;
    }

    /* INPUT MỀM (Nền xám, không viền đen) */
    .input-soft {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0; /* Viền rất nhạt */
        border-radius: 8px; /* Bo góc nhẹ 8px */
        height: 45px;
        font-size: 14px; color: #333;
        transition: 0.2s;
    }
    
    .input-soft:focus {
        background-color: #fff;
        border-color: #f97316; /* Focus màu cam */
        box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1); /* Glow nhẹ */
    }

    /* NÚT SUBMIT FORM */
    .btn-submit-gradient {
        background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
        color: #fff; border: none;
        height: 50px;
        border-radius: 50px; /* Bo tròn mềm mại */
        font-weight: 700; font-size: 15px;
        box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
        transition: 0.3s;
    }
    .btn-submit-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4);
        opacity: 0.95;
        color: white !important;
    }


/* --- COMPACT NEWS STYLE --- */

/* Class này bọc toàn bộ nội dung tin tức để tạo nền trắng */
.white-block {
    background-color: #fff;
    border-radius: 8px; /* Bo góc mềm */
    padding: 15px;      /* Khoảng cách lề trong */
    margin: 30px 0;     /* Cách header/footer một chút */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Bóng nhẹ để nổi bật trên nền tối */
    color: #333; /* Chữ màu đen xám dễ đọc */
}

/* --- LIST TIN TỨC (Style Gọn) --- */
.news-item-minimal {
    margin-bottom: 15px;
}
.news-thumb-minimal {
    position: relative; overflow: hidden;
    border-radius: 6px; padding-top: 60%; /* 16:9 */
    background: #f0f0f0; margin-bottom: 12px;
}
.news-thumb-minimal img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: 0.3s;
}
.news-item-minimal:hover .news-thumb-minimal img { transform: scale(1.05); }

.news-meta { font-size: 11px; color: #999; margin-bottom: 5px; font-weight: 600; }

.news-title-minimal {
    font-size: 15px; font-weight: 700; line-height: 1.4; margin-bottom: 8px;
}
.news-title-minimal a { color: #333; text-decoration: none; }
.news-title-minimal a:hover { color: #f97316; /* Màu cam */ }

.news-desc-minimal {
    font-size: 13px; color: #666; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- SIDEBAR GỌN (Chỉ Text & Ảnh nhỏ) --- */
.sidebar-title {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    color: #222; border-bottom: 1px solid #eee;
    padding-bottom: 10px; margin-bottom: 20px;
}

.sidebar-post {
    display: flex; margin-bottom: 15px;
    padding-bottom: 15px; border-bottom: 1px dashed #f5f5f5;
}
.sidebar-post:last-child { border: none; }

.sidebar-post img {
    width: 60px; height: 45px; object-fit: cover; border-radius: 4px;
    margin-right: 10px; flex-shrink: 0;
}
.sidebar-post h6 { font-size: 13px; line-height: 1.3; margin: 0; font-weight: 600; }
.sidebar-post h6 a { color: #444; text-decoration: none; }
.sidebar-post h6 a:hover { color: #f97316; }

/* --- CHI TIẾT TIN --- */
.post-detail-title { font-size: 24px; font-weight: 800; color: #111; margin-bottom: 10px; }
.post-content { font-size: 15px; line-height: 1.7; color: #333; text-align: justify; }
.post-content img { max-width: 100%; height: auto; margin: 15px 0; border-radius: 6px; }
.post-content h2 { font-size: 18px; font-weight: 700; margin-top: 25px; color: #000; }

/* --- 1. KHOANH VÙNG BOOTSTRAP (CHỈ ẢNH HƯỞNG TRONG .custom-news-grid) --- */

/* Chỉnh lại Grid Row chỉ trong khu vực này */
.custom-news-grid .col-lg-9 .row {
    margin-right: -5px;
    margin-left: -5px;
}

/* Chỉnh lại khoảng cách cột chỉ trong khu vực này */
.custom-news-grid .col-lg-9 .col-md-4 {
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 20px; /* Đẩy khoảng cách dưới cho thoáng */
}

/* --- 2. STYLE CARD (GIỮ NGUYÊN NHƯ CŨ VÌ NÓ ĐÃ CÓ CLASS RIÊNG) --- */

.news-item-minimal {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); /* Bóng nhẹ hơn chút cho tinh tế */
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
/*    padding-bottom: 15px;*/
}

.news-item-minimal:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: #ee4d2d;
}

/* --- 3. ẢNH VÀ NỘI DUNG --- */

.news-thumb-minimal {
/*    height: 180px; */
    width: 100%;
    margin-bottom: 12px;
    border-bottom: 1px solid #f2f2f2;
    overflow: hidden; /* Quan trọng để ảnh zoom không bị tràn */
}

.news-thumb-minimal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-item-minimal:hover .news-thumb-minimal img {
    transform: scale(1.08); /* Zoom nhẹ */
}

/* Padding nội dung */
.news-meta, 
.news-title-minimal, 
.news-desc-minimal {
    padding: 0 15px; /* Thụt lề trái phải */
}

.news-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    font-weight: 600;
}

.news-title-minimal {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    min-height: 42px; 
}

.news-title-minimal a {
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-title-minimal a:hover {
    color: #ee4d2d;
}

.news-desc-minimal {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 4. SIDEBAR (CỘT BÊN PHẢI) --- */
/* Thêm scope để chắc chắn không đụng hàng */
.custom-news-grid .sidebar-title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    border-bottom: 2px solid #ee4d2d;
    padding-bottom: 10px;
    display: inline-block;
}

.custom-news-grid .sidebar-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* Dùng nét đứt cho nhẹ nhàng */
}

.custom-news-grid .sidebar-post img {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

.custom-news-grid .sidebar-post h6 {
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

.custom-news-grid .sidebar-post h6 a {
    color: #444;
    text-decoration: none;
}

.custom-news-grid .sidebar-post h6 a:hover {
    color: #ee4d2d;
}

/* --- 1. NỀN TRẮNG & KHOẢNG CÁCH --- */
.white-wrapper {
    background-color: #fff;
    padding: 20px; /* Khoảng cách lề trong của tờ giấy trắng */
    border-radius: 4px; /* Bo cực nhẹ hoặc bỏ luôn nếu muốn vuông vức */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Bóng mờ siêu nhẹ để tách nền xám */
}

/* Xử lý thu hẹp khoảng cách cột (Gap nhỏ) */
.row-small-gap {
    margin-right: -10px;
    margin-left: -10px;
}
.row-small-gap > [class*='col-'] {
    padding-right: 10px;
    padding-left: 10px;
}

/* Breadcrumb nền trong suốt */
.breadcrumb {
    background: transparent;
    font-size: 13px;
    margin-bottom: 0;
}
.breadcrumb a { color: #888; text-decoration: none; }

/* --- 2. TYPOGRAPHY (CHỮ THANH MẢNH) --- */

/* Tiêu đề bài viết */
.post-title-clean {
    font-size: 24px; /* Giảm size (trước là 28-30) */
    font-weight: 600; /* Giảm độ đậm (trước là 700-800) */
    color: #333;
    line-height: 1.3;
    margin-bottom: 10px;
}

/* Thông tin ngày tháng */
.post-meta-clean {
    font-size: 13px;
    color: #999;
    font-weight: 400;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.post-meta-clean .sep { margin: 0 8px; font-size: 10px; vertical-align: middle; }

/* Nội dung bài viết */
.post-content-clean {
    font-size: 15px; /* Size chữ vừa mắt đọc */
    line-height: 1.7; /* Dãn dòng thoáng */
    color: #444; /* Màu chữ đen xám dịu mắt hơn đen tuyền */
}

.post-content-clean .summary-text {
    font-style: italic;
    color: #666;
    font-size: 16px;
    margin-bottom: 20px;
}

.post-content-clean h2 {
    font-size: 18px; /* Tiêu đề con nhỏ lại */
    font-weight: 600; /* Bớt đậm */
    margin-top: 30px;
    margin-bottom: 12px;
    color: #222;
}

.post-content-clean img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
    border-radius: 4px;
}

/* --- 3. TAGS & RELATED --- */
.tag-simple {
    display: inline-block;
    background: #f5f5f5;
    color: #666;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-right: 5px;
}

.related-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}
.related-item h6 {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}
.related-item h6 a { color: #333; text-decoration: none; }

/* --- 4. SIDEBAR (TỐI GIẢN) --- */
.col-sidebar {
    border-left: 1px solid #f0f0f0; /* Đường kẻ ngăn cách mờ nhạt giữa nội dung và sidebar */
}

.clean-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-list li {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eee; /* Gạch dưới nét đứt mờ */
}
.clean-list li:last-child { border-bottom: none; }

.clean-list li a {
    color: #444;
    font-size: 14px;
    text-decoration: none;
    display: block;
    line-height: 1.4;
    transition: color 0.2s;
}
.clean-list li a:hover { color: #ee4d2d; }

.clean-list li .date {
    display: block;
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}

/* --- TỔNG THỂ KHỐI --- */
.related-area {
    border-top: 1px solid #eee; /* Đường gạch ngang phân cách mờ nhẹ */
}

.clean-heading {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;
}

/* Thêm gạch chân nhỏ màu cam dưới tiêu đề mục */
.clean-heading::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: #ee4d2d;
    margin-top: 5px;
}

/* --- ITEM BÀI VIẾT (CARD) --- */
.related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 1px 1px 5px #eaeaea;
    border-radius: 5px;
}
.related-content {
    padding: 0 10px 10px;
}

/* --- PHẦN ẢNH (QUAN TRỌNG ĐỂ ĐẸP) --- */
.thumb-wrap {
    display: block;
    overflow: hidden; /* Để ảnh zoom không bị tràn ra ngoài */
    border-radius: 8px; /* Bo góc ảnh */
    position: relative;
    padding-top: 56.25%; /* Mẹo giữ tỷ lệ 16:9 (9/16 = 0.5625) */
    margin-bottom: 12px; /* Cách phần chữ bên dưới */
    background: #f0f0f0; /* Màu nền chờ khi ảnh chưa tải */
}

.thumb-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ảnh tự cắt vừa khung, không méo */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Hiệu ứng zoom mượt */
}

/* Hiệu ứng: Di chuột vào card thì ảnh zoom lên */
.related-card:hover .thumb-wrap img {
    transform: scale(1.1); /* Zoom 110% */
}

/* --- PHẦN NỘI DUNG CHỮ --- */
.related-date {
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.related-title {
    margin: 0;
    line-height: 1.4; /* Khoảng cách dòng */
}

.related-title a {
    font-size: 15px; /* Cỡ chữ vừa phải */
    font-weight: 700; /* In đậm */
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
    
    /* Cắt dòng nếu tiêu đề dài quá 3 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hiệu ứng: Di chuột vào thì tiêu đề đổi màu cam */
.related-card:hover .related-title a {
    color: #ee4d2d;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .col-sidebar {
        border-left: none; /* Bỏ kẻ dọc trên mobile */
        border-top: 1px solid #f0f0f0;
        padding-top: 30px;
        margin-top: 30px;
        padding-left: 10px !important; /* Reset padding */
    }
    .post-title-clean {
        font-size: 20px;
    }
}
@media (max-width: 767px) {
    .related-item img {
        height: auto;
    }
}

/* --- 1. CẤU HÌNH CHUNG (QUAN TRỌNG NHẤT) --- */
a {
    text-decoration: none !important; /* Bỏ gạch chân mặc định nhìn cho thoáng */
    transition: all 0.3s ease; /* TẠO ĐỘ MƯỢT: Mọi thay đổi sẽ diễn ra trong 0.3s */
}

/* --- 2. HIỆU ỨNG SIDEBAR (Menu bên phải) --- */
/* Khi di chuột vào link bài viết mới/chuyên mục */
.clean-list li a {
    display: block; /* Bắt buộc để dùng được padding/transform */
}

.clean-list li a:hover {
    color: #ee4d2d; /* Đổi màu cam (hoặc màu chủ đạo của bạn) */
    padding-left: 8px; /* HIỆU ỨNG TRƯỢT: Đẩy chữ sang phải 8px */
}

/* --- 3. HIỆU ỨNG BÀI VIẾT LIÊN QUAN (Ảnh zoom + Chữ đổi màu) --- */
.related-item {
    cursor: pointer; /* Đổi con trỏ thành bàn tay */
}

.related-item .img-wrap { /* Bạn nhớ bọc ảnh trong thẻ div này hoặc overflow hidden ở thẻ cha */
    overflow: hidden; 
    border-radius: 4px;
    margin-bottom: 8px;
}

.related-item img {
    width: 100%;
    transition: transform 0.5s ease; /* Ảnh zoom chậm hơn chút cho nghệ */
}

/* Khi hover vào khối bài liên quan */
.related-item:hover img {
    transform: scale(1.1); /* Phóng to ảnh lên 10% */
    opacity: 0.9; /* Làm mờ nhẹ tí xíu */
}

.related-item:hover h6 a {
    color: #ee4d2d; /* Tiêu đề sáng lên */
}

/* --- 4. HIỆU ỨNG TAGS (Thẻ từ khóa) --- */
.tag-simple {
    transition: all 0.2s;
}

.tag-simple:hover {
    background-color: #ee4d2d; /* Nền biến thành cam */
    color: #fff; /* Chữ biến thành trắng */
    transform: translateY(-2px); /* Nhảy lên nhẹ 1 cái */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(238, 77, 45, 0.3); /* Bóng mờ màu cam */
}

/* --- 5. HIỆU ỨNG BREADCRUMB (Thanh điều hướng trên cùng) --- */
.breadcrumb-item a:hover {
    color: #ee4d2d;
    text-decoration: underline; /* Gạch chân nhẹ khi hover breadcrumb */
}

/* --- 6. HIỆU ỨNG LINK TRONG NỘI DUNG BÀI VIẾT --- */
/* Link chèn trong bài viết cần nổi bật */
.post-content-clean a {
    color: #ee4d2d;
    border-bottom: 1px dashed transparent;
}

.post-content-clean a:hover {
    border-bottom: 1px dashed #ee4d2d; /* Hiện gạch chân nét đứt */
    opacity: 0.8;
}

/* 1. Giữ hàng breadcrumb luôn thẳng tắp (không gãy hàng) */
.breadcrumb {
    flex-wrap: nowrap; /* Bắt buộc nằm trên 1 dòng */
}

/* 2. Xử lý item cuối cùng (active) */
.breadcrumb-item.active {
    /* Combo tạo dấu ... */
    white-space: nowrap;      /* Không cho xuống dòng */
    overflow: hidden;         /* Phần thừa ra thì cắt bỏ */
    text-overflow: ellipsis;  /* Thêm dấu ... vào chỗ cắt */
    
    /* QUAN TRỌNG: Phải có giới hạn chiều rộng mới cắt được */
    max-width: 300px;         /* Desktop: Cho phép dài tối đa 300px */
    display: inline-block;    /* Để thuộc tính max-width ăn tác dụng tốt nhất */
    vertical-align: bottom;   /* Căn chỉnh cho thẳng hàng với các item trước */
    
    /* Màu sắc (như bạn thích style tối giản) */
    color: #999;
}

/* 3. RESPONSIVE: Trên điện thoại thì cho ngắn lại nữa */
@media (max-width: 768px) {
    .breadcrumb-item.active {
        max-width: 120px; /* Mobile: Chỉ cho hiện khoảng 120px thôi */
    }
}