/*
Theme Name: GiOWiki Template
Theme URI: https://GiOWiki.com
Author: GiOWiki
Description: GiOWiki, a high-end minimalist Directory/Grid style.
Version: 3.1
*/

:root {
    --primary-orange: #C7AA1A;    
    --dark-slate: #1E222D;        
    --text-muted: #67797F;        
    --bg-page: #FFFFFF;           
    --border-color: #E2E8F0;
}

body {
    margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-page); color: #333; line-height: 1.5;
    padding-top: 80px !important;
}

a { text-decoration: none; transition: 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* ================= HEADER (Sticky & Kính mờ) ================= */
.main-header {
    position: fixed; /* Đã đổi từ sticky sang fixed để neo tuyệt đối */
    top: 0; 
    left: 0; /* Thêm lệnh này để căn lề chuẩn */
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.95); 
    width: 100%; 
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.main-header.scrolled {
    background-color: #49565C !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    border-bottom: none !important;
}

.logo-scrolled { display: none !important; }
.logo-default { display: block !important; }
.main-header.scrolled .logo-default { display: none !important; }
.main-header.scrolled .logo-scrolled { display: block !important; }

.main-header.scrolled .main-nav a { color: #ffffff !important; }
.main-header.scrolled .main-nav a:hover { color: var(--primary-orange) !important; }

.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.header-left { display: flex; align-items: center; gap: 40px; }
.site-logo { height: 25px; width: auto; }

/* ================= MENU DROPDOWN (SỬA LỖI HIỂN THỊ) ================= */
.main-nav > ul { list-style: none; display: flex; gap: 25px; padding: 0; margin: 0; align-items: center; }
.main-nav a { color: var(--dark-slate); font-weight: 600; font-size: 13px; text-transform: uppercase; }
.main-nav > ul > li > a:hover { color: var(--primary-orange); }

.main-nav li { position: relative; list-style: none; }

.main-nav .sub-menu {
    position: absolute;
    top: 150%; 
    left: 0; 
    background-color: #ffffff; 
    width: 500px !important; /* Nới rộng khung để chứa đủ 2 cột */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    border-radius: 8px; 
    padding: 15px !important;
    display: grid !important; /* Lệnh phân cột */
    grid-template-columns: repeat(2, 1fr) !important; /* Ép 2 cột bằng nhau */
    gap: 5px 15px !important; /* Khoảng cách giữa các cột và hàng */
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(15px);
    transition: all 0.3s ease; 
    z-index: 99999;
    border: 1px solid #e2e8f0;
}

.main-nav li:hover > .sub-menu { top: 100%; opacity: 1; visibility: visible; transform: translateY(0); }

.main-nav .sub-menu li { margin: 0; width: 100%; }
.main-nav .sub-menu a {
    display: block; padding: 12px 25px; font-size: 14px !important; font-weight: 600;
    color: #444 !important; text-transform: none !important; transition: 0.3s; border-bottom: 1px solid #f8fafc;
}
.main-nav .sub-menu li:last-child a { border-bottom: none; }

.main-nav .sub-menu a:hover {
    color: var(--primary-orange) !important; background-color: #F8FAFC !important; padding-left: 32px; 
}


/* ================= HEADER TÌM KIẾM & DONATE (CHUẨN 100% CẤU TRÚC CỦA BẠN) ================= */
.header-right { display: flex; align-items: center; gap: 15px; height: 42px; }

/* Khung bọc Search */
.header-search-wrap { position: relative; height: 100%; display: flex; align-items: center; }

/* Ô nhập liệu chuẩn: Nền trắng, viền xám, bo 6px, rộng 320px */
.mini-search {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important; 
    padding: 0 40px 0 15px !important; /* Chừa chỗ cho icon bên phải */
    border-radius: 6px !important; 
    font-size: 14px !important; 
    color: #475569 !important;
    outline: none !important;
    width: 320px !important; /* Độ rộng như bạn mong muốn */
    height: 100% !important; 
    box-sizing: border-box !important;
    transition: all 0.3s ease;
}

.mini-search:focus {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 2px rgba(251, 114, 6, 0.1) !important;
}

/* Icon Kính lúp (Nằm bên trong form) */
.search-icon { 
    position: absolute; 
    right: 15px; 
    color: #334155 !important; 
    font-size: 16px; 
    pointer-events: none; 
}

/* Giữ form trắng, chữ đen khi cuộn chuột */
.main-header.scrolled .mini-search {
    background-color: #ffffff !important;
    border-color: #ddd !important;
    color: #475569 !important;
}
.main-header.scrolled .mini-search::placeholder { color: #94a3b8 !important; }
.main-header.scrolled .search-icon { color: #334155 !important; }

/* Nút Donate giữ nguyên màu cam, bo 6px */
.btn-donate {
    background-color: var(--primary-orange) !important; 
    color: white !important; 
    border: none !important;
    padding: 0 25px !important; 
    border-radius: 6px !important; 
    font-weight: 700 !important; 
    font-size: 13px !important;
    text-transform: uppercase !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    height: 100% !important; 
    box-sizing: border-box !important; 
    cursor: pointer !important; 
    transition: all 0.3s ease !important;
    margin: 0 !important;
    white-space: nowrap !important;
}
.btn-donate:hover { background-color: var(--dark-slate) !important; transform: translateY(-2px); }


/* ================= HERO SEARCH (ĐÃ KHÔI PHỤC NGUYÊN TRẠNG) ================= */
.hero-section { 
    text-align: center; padding: 40px 20px; 
    background-color: #F8FAFC; border-bottom: 1px solid var(--border-color); 
    width: 100%; box-sizing: border-box; margin-bottom: 20px;
}
.hero-section h1 { color: var(--primary-orange); font-size: 32px; margin: 0 0 10px; font-weight: 800; }
.hero-section p { color: var(--text-muted); font-size: 16px; margin: 0 0 30px; }
.main-search-box {
    display: flex; justify-content: center; max-width: 600px; margin: 0 auto;
    border: 1px solid #ddd; border-radius: 6px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04); background: white;
}
.main-search-box input { flex: 1; border: none; padding: 16px 20px; font-size: 14px; outline: none; }
.main-search-box button { background: white; border: none; padding: 0 25px; font-size: 18px; color: var(--dark-slate); cursor: pointer; transition: 0.3s; }
.main-search-box button:hover { color: var(--primary-orange); }

/* ================= CATEGORIES (CUSTOM SLIDER 3 CỘT, 2 DÒNG) ================= */
.top-categories { 
    margin-bottom: 60px;
    /* ĐÃ XÓA: width: 100% và max-width: 100% để trả lại khung 1200px gọn gàng */
}

.cat-slider-viewport {
    width: 100%;
    overflow: hidden !important; 
    padding: 15px 5px 25px 5px; 
    margin: -15px -5px -25px -5px;
}

.cat-slider-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    gap: 25px !important;
    width: 100% !important; /* Lấy độ rộng chuẩn của khung 1200px */
}

.cat-col {
    /* Tính toán chính xác để 3 cột chia đều trên khung 1200px */
    flex: 0 0 calc((100% - 50px) / 3) !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; 
}

/* Định dạng thẻ bài viết */
.cat-item { 
    display: flex; gap: 16px; align-items: flex-start; 
    padding: 22px; border: 1px solid var(--border-color); border-radius: 12px; 
    transition: all 0.3s ease; position: relative; overflow: hidden;
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* === MÀU NỀN CÁC MỤC === */
.cat-item:nth-child(1) { background-color: #F0F9FF; border-color: #BAE6FD; } 
.cat-item:nth-child(2) { background-color: #FFF7ED; border-color: #FED7AA; } 
.cat-item:nth-child(3) { background-color: #F0FDF4; border-color: #BBF7D0; } 
.cat-item:nth-child(4) { background-color: #FAF5FF; border-color: #E9D5FF; } 
.cat-item:nth-child(5) { background-color: #FFF1F2; border-color: #FECDD3; } 
.cat-item:nth-child(6) { background-color: #F8FAFC; border-color: #E2E8F0; } 
.cat-item:nth-child(7) { background-color: #F0F9FF; border-color: #BAE6FD; } 
.cat-item:nth-child(8) { background-color: #FFF7ED; border-color: #FED7AA; }
    
.cat-item:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.06); border-color: var(--primary-orange); }
.cat-icon { flex-shrink: 0; }
.cat-icon img { width: 45px; height: 45px; object-fit: contain; }
.cat-content h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; color: var(--dark-slate); transition: 0.3s; }
.cat-item:hover .cat-content h3 { color: var(--primary-orange); }
.cat-content p { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Phủ link click lên toàn bộ thẻ */
.cat-content h3 a::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
}

/* Các icon MXH nổi lên trên để click được */
.social-mini { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 2; }
.social-mini a { 
    display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
    background: #ffffff; border: 1px solid #e2e8f0; font-size: 10px; align-items: center; justify-content: center; 
    color: #94a3b8; transition: all 0.3s ease; cursor: pointer; text-decoration: none;
}
.social-mini a:hover { background: var(--primary-orange); color: white; border-color: var(--primary-orange); transform: translateY(-2px); }

/* ================= TOPICS LẤY TỪ WORDPRESS ================= */
.topics-section { margin-bottom: 20px; }
.topics-header { display: flex; align-items: flex-end; gap: 30px; margin-bottom: 15px; border-bottom: 2px solid #eee; }
.topics-header h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--dark-slate); line-height: 1; padding-bottom: 12px; }
.topics-tabs { display: flex; gap: 20px; padding-bottom: 12px; }
.topics-tabs a { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; position: relative; }
.topics-tabs a.active { color: var(--primary-orange); }
.topics-tabs a.active::after { content: ''; position: absolute; left: 0; bottom: -14px; width: 100%; height: 2px; background: var(--primary-orange); }

.topics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.topic-card { 
    display: flex; gap: 15px; background: #ffffff; border: 1px solid var(--border-color); 
    padding: 18px; border-radius: 8px; transition: all 0.3s ease;
}
.topic-card:hover { border-color: rgba(251, 114, 6, 0.4); box-shadow: 0 5px 15px rgba(0,0,0,0.04); transform: translateY(-3px); }
.topic-icon {
    width: 50px; height: 50px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px; color: white;
}
.topic-info h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--dark-slate); transition: 0.3s; line-height: 1.3;}
.topic-card:hover .topic-info h4 a { color: var(--primary-orange) !important; }
.topic-info p { margin: 0 0 10px; font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ================= BOTTOM SEARCH ================= */
.bottom-search { 
    width: 100%; background-color: #F8FAFC; padding: 50px 0; text-align: center; border-top: 1px solid var(--border-color); 
}

/* ================= FOOTER ================= */
.main-footer { background-color: var(--dark-slate); color: #94A3B8; padding: 30px 0 20px; font-size: 13px; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 15px; margin-bottom: 30px; }
.footer-col h4 { color: white; font-size: 14px; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; font-weight: 700;}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a { color: #94A3B8; transition: 0.3s; }
.footer-col ul a:hover { color: white; padding-left: 5px;}

.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; }
.footer-socials a { 
    display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1);
    color: white; align-items: center; justify-content: center; margin-right: 10px; transition: 0.3s;
}
.footer-socials a:hover { background: var(--primary-orange); transform: translateY(-3px);}
.footer-links a { color: #94A3B8; margin-left: 15px; transition: 0.3s;}
.footer-links a:hover { color: white; }
.btn-top { color: white; font-weight: bold; }

/* Responsive cơ bản */
@media (max-width: 992px) {
    /* Ép iPad hiện 2 Cột Slider thay vì 3 */
    .cat-col { flex: 0 0 calc((100% - 25px) / 2) !important; } 
    .topics-grid, .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .header-left { flex-direction: column; gap: 15px; }
}
@media (max-width: 768px) {
    /* Điện thoại chỉ hiện 1 Cột Slider trượt cho to rõ */
    .cat-col { flex: 0 0 85% !important; } 
    .topics-grid { grid-template-columns: 1fr; }
    .header-inner { flex-direction: column; gap: 20px; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}

/* ================= SINGLE POST PAGE (TRANG CHI TIẾT) ===== */
.breadcrumb { font-size: 12px; color: var(--text-muted); margin-bottom: 25px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary-orange); }

.single-layout { display: grid; grid-template-columns: 2.4fr 1fr; gap: 40px; margin-bottom: 60px; }

/* ---- TRÁI: HEADER BÀI VIẾT ---- */
.post-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.post-header-left { display: flex; gap: 15px; flex: 1; }
.post-author-icon { 
    width: 45px; height: 45px; border-radius: 8px; flex-shrink: 0; 
    display: flex; align-items: center; justify-content: center; font-size: 22px; color: white;
}
/* ================= FIX LẠI TRANG POST (TIÊU ĐỀ & CANH LỀ) ================= */
/* 1. Thu nhỏ tiêu đề cho gọn gàng, tinh tế hơn */
.post-title-area h1 { 
    font-size: 18px !important; /* Đã giảm từ 28px xuống 24px */
    line-height: 1.4 !important; 
    margin-bottom: 12px !important;
}

/* 2. Ép buộc canh đều 2 bên (Justify) cho nội dung chữ */
.post-content-body,
.post-content-body p { 
    font-size: 16px !important; 
    line-height: 1.8 !important; 
    text-align: justify !important; /* Lệnh canh đều lề trái phải */
    hyphens: auto !important; /* Giúp các từ tiếng Anh tự động gạch nối nếu quá dài, tránh tạo khe hở xấu */
}

.post-meta { display: flex; gap: 15px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.post-meta span { display: flex; align-items: center; gap: 5px; }
.post-meta .meta-like { color: #E11D48; } 
.post-meta .meta-share { color: #E11D48; cursor: pointer; }

/* Social Share */
.post-social-share { display: flex; gap: 8px; }
.post-social-share a { 
    display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: #ffffff;
    border: 1px solid #e2e8f0; font-size: 12px; align-items: center; justify-content: center; 
    color: #94a3b8; transition: all 0.3s ease; cursor: pointer; text-decoration: none;
}
.post-social-share a:hover { color: white; transform: translateY(-3px); }
.post-social-share a:hover.yt { background: #FF0000; border-color: #FF0000; }
.post-social-share a:hover.fb { background: #1877F2; border-color: #1877F2; }
.post-social-share a:hover.tw { background: #1DA1F2; border-color: #1DA1F2; }
.post-social-share a:hover.in { background: #0A66C2; border-color: #0A66C2; }

/* Khung Video */
.video-wrapper { 
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; 
    border-radius: 8px; margin-bottom: 30px; background: #000; 
}
.video-wrapper iframe, .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.post-content-body { font-size: 14px; color: #444; line-height: 1.6; margin-bottom: 30px;}
.post-content-body p { margin-bottom: 15px; }

/* ===================================================================== */
/* 7. STYLE CHO KHU VỰC BÌNH LUẬN (COMMENTS) - BẢN TỐI GIẢN TỐI ƯU       */
/* ===================================================================== */

#comments { margin-top: 30px; padding-top: 20px; border-top: 1px solid #E2E8F0; clear: both; }
.comments-title { font-size: 24px; font-weight: 800; color: #1E222D; margin-bottom: 20px; }

/* 7.1 TRIỆT TIÊU TẬN GỐC SỐ THỨ TỰ (1, 2) VÀ DẤU CHẤM */
.comment-list, .comment-list ul, .comment-list ol { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.comment-list li {
    display: block !important;
    margin-bottom: 25px;
    position: relative;
}
.comment-list li::before, .comment-list li::after, .comment-list li::marker { content: none !important; display: none !important; }

/* Thụt lề cho bình luận con (Reply) */
.comment-list .children { margin-left: 55px; margin-top: 20px; border-left: 2px solid #E2E8F0; padding-left: 20px; }
@media (max-width: 768px) { .comment-list .children { margin-left: 10px; padding-left: 10px; border-left: none; } }

/* 7.2 Bố cục Avatar & Nội dung */
.comment-body { position: relative; padding-left: 60px; min-height: 50px; }

/* Avatar Cố định chuẩn xác bên trái */
.comment-author .avatar { position: absolute; left: 0; top: 0; border-radius: 50%; width: 45px !important; height: 45px !important; object-fit: cover; box-shadow: 0 3px 6px rgba(0,0,0,0.1); margin: 0 !important; }

/* 7.3 Header Bình luận (Tên & Thời gian) */
.comment-meta { margin-bottom: 8px; }
.comment-author { display: inline-block; font-size: 15px; font-weight: 800; color: #1E222D; margin-right: 10px; }
.comment-author .fn { font-style: normal; }
.comment-author .says { display: none !important; } 
.comment-metadata { display: inline-block; font-size: 12px; color: #94A3B8; }
.comment-metadata a { color: #94A3B8; text-decoration: none; }

/* 7.4 Bong bóng nội dung (Gọn gàng, loại bỏ viền lộn xộn) */
.comment-content {
    background: #F8FAFC;
    padding: 16px 20px;
    border-radius: 0 16px 16px 16px;
    border: 1px solid #E2E8F0;
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.comment-content p { margin-bottom: 10px; }
.comment-content p:last-child { margin-bottom: 0; }

/* 7.5 Cụm Nút Like & Reply */
.reply { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.comment-body .wpulike, .comment-body > div[class*="like"] { float: none !important; margin: 0 !important; }

.comment-reply-link { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: #64748B; text-decoration: none; padding: 6px 15px; border-radius: 20px; background: #fff; border: 1px solid #E2E8F0; transition: 0.3s; text-transform: uppercase; }
.comment-reply-link:hover { background: #FB7206; color: #fff; border-color: #FB7206; box-shadow: 0 4px 10px rgba(251, 114, 6, 0.2); transform: translateY(-2px); }

/* ===================================================================== */
/* 7.6 FORM BÌNH LUẬN XỊN XÒ GIỮ NGUYÊN                                  */
/* ===================================================================== */
.comment-respond { margin-top: 30px; background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #E2E8F0; }
.comment-reply-title { font-size: 18px; font-weight: 800; color: #1E222D; margin-bottom: 20px; display: block; }
.comment-reply-title small a { color: #E11D48; font-size: 13px; float: right; }
.comment-form-comment label, .comment-form-author label, .comment-form-email label, .comment-form-url label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: #1E222D; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 14px; background: #F8FAFC; box-sizing: border-box; margin-bottom: 15px; outline: none; transition: 0.3s; }
.comment-form input:focus, .comment-form textarea:focus { border-color: #FB7206; background: #fff; box-shadow: 0 0 0 3px rgba(251, 114, 6, 0.1); }
.comment-form textarea { min-height: 120px; resize: vertical; }
@media (min-width: 768px) { .comment-form-author, .comment-form-email, .comment-form-url { float: left; width: 31.33%; margin-right: 3%; } .comment-form-url { margin-right: 0; } .comment-form-cookies-consent { clear: both; } }
.comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748B; margin-bottom: 20px; }
.form-submit { margin: 0; text-align: right; }
.form-submit input[type="submit"] { background: #FB7206; color: #fff; border: none; padding: 12px 30px; font-size: 14px; font-weight: 800; border-radius: 8px; cursor: pointer; transition: 0.3s; text-transform: uppercase; }
.form-submit input[type="submit"]:hover { background: #E06100; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(251, 114, 6, 0.3); }

/* ===================================================================== */
/* LỆNH HỦY DIỆT SỐ THỨ TỰ (BẢN FIX LẤY LẠI THỤT LỀ BÌNH LUẬN CON)       */
/* ===================================================================== */
#comments ol, #comments ul, .comment-list, .commentlist { list-style: none !important; list-style-type: none !important; margin: 0 !important; padding: 0 !important; }
.comment-list .children { list-style: none !important; margin-left: 55px !important; margin-top: 20px !important; padding-left: 20px !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; border-left: 2px solid #E2E8F0 !important; }
@media (max-width: 768px) { .comment-list .children { margin-left: 10px !important; padding-left: 10px !important; border-left: none !important; } }
#comments li, #comments li[class*="comment"], .comment { list-style: none !important; list-style-type: none !important; display: block !important; counter-increment: none !important; counter-reset: none !important; }
#comments li::marker, #comments li::before, .comment::marker, .comment::before { display: none !important; content: none !important; opacity: 0 !important; }

/* ---- PHẢI: SIDEBAR ---- */
.sidebar-widget { margin-bottom: 40px; }
.widget-title { font-size: 16px; font-weight: 800; margin-bottom: 20px; color: var(--dark-slate); border-bottom: 1px solid #eee; padding-bottom: 10px; }

.channel-links-list { list-style: none; padding: 0; margin: 0; }
.channel-links-list li { margin-bottom: 12px; }
.channel-links-list a { display: flex; align-items: center; font-size: 13px; color: var(--text-muted); font-weight: 500;}
.channel-links-list a i { width: 20px; text-align: center; font-size: 14px; margin-right: 10px; }

.related-list { display: flex; flex-direction: column; gap: 15px; }
.related-item { display: flex; gap: 15px; padding: 15px; border: 1px solid var(--border-color); border-radius: 8px; transition: 0.3s; background: #fff;}
.related-item:hover { border-color: var(--primary-orange); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateY(-2px);}
.related-icon { width: 45px; height: 45px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid #eee; }
.related-info h5 { margin: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--dark-slate); text-transform: uppercase; line-height: 1.3;}
.related-item:hover .related-info h5 { color: var(--primary-orange); }
.related-info p { margin: 0; font-size: 11px; color: var(--text-muted); line-height: 1.4; }

@media (max-width: 992px) { .single-layout { grid-template-columns: 1fr; } }

/* ================= FIX LỖI CHỮ TRẮNG MENU CON ================= */
/* Ép chữ trong Menu sổ xuống luôn là màu xám đen dù có cuộn trang hay không */
.main-header .main-nav .sub-menu a, 
.main-header.scrolled .main-nav .sub-menu a { 
    color: #334155 !important; 
}


/* ================= FIX DỨT ĐIỂM FORM BÌNH LUẬN 2 CỘT ================= */
.comment-respond { padding: 10px 20px !important; }
.comment-reply-title { margin-bottom: 15px !important; }
.comment-form-url { display: none !important; } /* Đảm bảo ẩn ô URL/Website dư thừa */

/* Mặc định Mobile (Màn hình nhỏ): Xếp dọc 100% */
.comment-form-author, 
.comment-form-email { 
    width: 100% !important; 
    float: none !important; 
    margin: 0 0 105px 0 !important; 
    display: block !important;
}

/* Desktop (Màn hình lớn): Chia 2 cột trái phải hoàn hảo */
@media (min-width: 768px) {
    .comment-form-author {
        float: left !important;
        width: 48% !important; /* Chiếm 48% bên trái */
        clear: both !important;
        margin-right: 4% !important; /* Khoảng hở 4% ở giữa 2 ô */
        margin-bottom: 10px !important;
    }
    .comment-form-email {
        float: left !important;
        width: 48% !important; /* Chiếm 48% bên phải */
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }
    .comment-form-cookies-consent {
        clear: both !important; /* Ép phần Checkbox và nút Submit rớt hẳn xuống dưới */
        display: block !important;
        padding-top: 10px !important;
    }
}

/* ================= NÚT BACK TO TOP (NỔI & MƯỢT) ================= */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: var(--primary-orange);
    color: #ffffff;
    border-radius: 50%; /* Nút hình tròn */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(251, 114, 6, 0.4); /* Đổ bóng màu cam */
    
    /* Ẩn mặc định khi ở đầu trang */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Bắt đầu ở vị trí hơi thấp */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 99999; /* Luôn nổi trên mọi thành phần khác */
}

/* Lớp class được thêm vào bằng JS khi cuộn trang */
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Trượt lên đúng vị trí */
}

/* Hiệu ứng khi rê chuột vào */
#back-to-top:hover {
    background-color: var(--dark-slate); /* Đổi sang màu xám đen */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px); /* Nảy nhẹ lên */
    color: #fff;
}

/* Phủ link lên toàn bộ thẻ Banner */
.cat-content h3 a::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Nâng các nút mạng xã hội lên trên lớp link vô hình để vẫn click được */
.social-mini a {
    position: relative;
    z-index: 2;
}

/* Fix nút Search Header */
.search-icon-btn {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: #888; font-size: 15px; 
    cursor: pointer; padding: 8px 12px; transition: 0.3s;
}
.search-icon-btn:hover { color: var(--primary-orange); }
.main-header.scrolled .search-icon-btn { color: #fff; }

/* ===================================================================== */
/* GÓI CỨU HỘ: FIX LỖI TRÀN TRANG (OVERFLOW) TRÊN ĐIỆN THOẠI             */
/* ===================================================================== */

/* 1. KHÓA AN TOÀN VĨNH VIỄN: Triệt tiêu thanh cuộn ngang trên toàn website */
html, body {
    overflow-x: clip !important;
    width: 100%;
    max-width: 100vw;
}

/* Ép mọi phần tử tính toán kích thước bao gồm cả padding/viền, không bị phình to */
* {
    box-sizing: border-box !important;
}

/* 2. CẤU HÌNH LẠI GIAO DIỆN KHI MÀN HÌNH NHỎ HƠN 768px (Điện thoại/Tablet nhỏ) */
@media (max-width: 768px) {
    
    /* --- Sửa lỗi Header (Logo, Menu, Search) --- */
    .header-inner {
        padding: 15px 10px !important;
    }
    
    .header-left {
        gap: 15px !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* --- Sửa lỗi Menu Dropdown 500px tràn viền --- */
    .main-nav > ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 15px !important;
    }

    .main-nav .sub-menu {
        width: 100vw !important; /* Dãn đầy màn hình */
        max-width: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(15px) !important; /* Căn giữa hoàn hảo */
        grid-template-columns: 1fr !important; /* Đưa về 1 cột dọc thay vì 2 cột */
        padding: 10px !important;
    }
    
    .main-nav li:hover > .sub-menu {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* --- Sửa lỗi Ô Tìm Kiếm và Nút Donate --- */
    .header-right {
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 10px !important;
    }

    .header-search-wrap, 
    .mini-search {
        width: 100% !important;
        max-width: 100% !important;
        height: 45px !important; /* Nới rộng chiều cao cho dễ bấm */
    }

    .btn-donate {
        width: 100% !important;
        height: 45px !important;
        padding: 0 !important;
    }

    /* --- Sửa lỗi Footer ép chữ --- */
    /* Thu gọn Footer về dạng 1 cột (hoặc 2 cột) để các link không bị đè lên nhau */
    .footer-cols {
        grid-template-columns: 1fr !important; /* Chuyển thành 1 cột xếp dọc */
        text-align: center !important;
        gap: 25px !important;
    }

    .footer-col h4 {
        margin-bottom: 10px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }
    
    /* --- Fix các tiêu đề bị quá to --- */
    .hero-section h1 {
        font-size: 24px !important;
    }
}

.main-header.scrolled .header-cart-icon { color: #ffffff !important; }
/* Khắc phục lỗi Header cố định che khuất khu vực Khóa Học khi click từ Menu */
#topics {
    scroll-margin-top: 100px !important;
}

/* ==========================================================================
   1. KHU VỰC TOPICS (TRANG CHỦ) & LƯỚI KHÓA HỌC TỐI GIẢN (LINE-ONLY)
   ========================================================================== */
.home-topics { padding: 20px 0 0px 0 !important; background: transparent; }
.home-topics .course-grid-2col + div { margin-top: 25px !important; }
.topics-header-modern { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #F1F5F9; padding-bottom: 20px; margin-bottom: 30px; }
.topics-header-modern h2 { font-size: 26px; font-weight: 900; color: #1E222D; margin: 0; }
.topics-tabs { display: flex; gap: 10px; }
.sort-tab { font-size: 13px; font-weight: 800; text-transform: uppercase; color: #64748B; text-decoration: none; padding: 8px 18px; border-radius: 30px; transition: 0.3s; background: #F8FAFC; border: 1px solid transparent; }
.sort-tab:hover { color: #1E222D; background: #E2E8F0; }
.sort-tab.active { background: var(--dark-slate); color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.course-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 5px !important; column-gap: 40px !important; margin-top: 15px !important; }
.course-grid-2col .compact-list-item { background: transparent !important; border: none !important; border-bottom: 1px solid #E2E8F0 !important; border-radius: 0 !important; padding: 12px 0 !important; box-shadow: none !important; transition: all 0.3s ease !important; display: flex; align-items: flex-start; justify-content: space-between; }
.course-grid-2col .compact-list-item:hover { transform: none !important; box-shadow: none !important; border-bottom-color: var(--primary-orange) !important; }
.compact-list-item .item-info { flex: 1; padding-right: 25px; }
.compact-list-item .item-title { font-size: 17px; font-weight: 800; color: #1E222D; margin: 0 0 4px !important; text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: 0.2s; }
.compact-list-item .item-title:hover { color: var(--primary-orange); }
.compact-list-item .item-desc { font-size: 13.5px; color: #64748B; margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-grid-2col .compact-list-item .item-action { border-left: none !important; padding-left: 0 !important; text-align: right; min-width: 110px; display: flex; flex-direction: column; align-items: flex-end; height: 100%; justify-content: space-between; }
.compact-list-item .price-original { font-size: 11px; color: #94A3B8; text-decoration: line-through; margin-bottom: 2px; }
.compact-list-item .price-current { font-size: 18px; font-weight: 900; color: #1E222D; margin-bottom: 6px !important; }
.compact-list-item .price-current.sale { color: #10B981; }
.compact-list-item .btn-cart-mini { background: #1E222D; color: #fff; width: 38px; height: 38px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; text-decoration: none; transition: 0.3s; margin-top: auto; }
.compact-list-item .btn-cart-mini:hover { background: var(--primary-orange); color: #fff; }

@media (max-width: 992px) { .course-grid-2col { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .topics-header-modern { flex-direction: column; align-items: flex-start; gap: 15px; }
    .topics-tabs { width: 100%; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
    .topics-tabs::-webkit-scrollbar { display: none; }
    .sort-tab { white-space: nowrap; }
}

/* ==========================================================================
   2. KHÓA CHẶT KÍCH THƯỚC LOGO TRÊN TOÀN HỆ THỐNG
   ========================================================================== */
.main-header .logo img, header .logo img, .site-branding img, .custom-logo { max-height: 45px !important; width: auto !important; object-fit: contain !important; transition: all 0.3s ease; }
.main-header.is-sticky .logo img, .main-header.sticky-header .logo img, header.sticky .logo img, .main-header.scrolled .logo img { max-height: 30px !important; }

/* ==========================================================================
   3. CART & CHECKOUT CAO CẤP (BORDERLESS, 2 COLUMNS, NO SPACING BUGS)
   ========================================================================== */
.premium-page-title { width: 100% !important; font-size: 24px !important; border-bottom: 2px solid #F1F5F9 !important; padding-bottom: 10px !important; margin-bottom: 20px !important; }
.premium-page-title i { font-size: 22px !important; }

body.woocommerce-cart .premium-page-container, body.woocommerce-checkout .premium-page-container { max-width: 1200px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 10px 0 40px 0 !important; }
body.woocommerce-cart .premium-page-wrap, body.woocommerce-checkout .premium-page-wrap { background-color: #ffffff !important; }
.woocommerce-cart table.cart th.product-thumbnail, .woocommerce-cart table.cart td.product-thumbnail { display: none !important; }

/* Bảng Table dùng chung */
.woocommerce table.shop_table { border: 1px solid #E2E8F0; border-radius: 12px; border-collapse: separate; border-spacing: 0; width: 100%; margin-bottom: 30px; background: #fff;}
.woocommerce table.shop_table th { background-color: #F8FAFC; color: #1E222D; font-weight: 800; padding: 18px 20px; border-bottom: 1px solid #E2E8F0; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; }
.woocommerce table.shop_table td { padding: 20px; border-bottom: 1px solid #E2E8F0; vertical-align: middle; color: #475569; }
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce td.product-name a { color: #1E222D; font-weight: 800; text-decoration: none; font-size: 16px; display: block; margin-bottom: 5px; }
.woocommerce td.product-name a:hover { color: var(--primary-orange); }

/* Nút & Thông báo dùng chung */
.woocommerce button.button, .woocommerce a.button.checkout, .woocommerce #place_order, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: #1E222D !important; color: #fff !important; border-radius: 8px !important; padding: 15px 30px !important; font-weight: 800 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease !important; border: none !important; }
.woocommerce button.button:hover, .woocommerce a.button.checkout:hover, .woocommerce #place_order:hover, .woocommerce button.button.alt:hover { background-color: var(--primary-orange) !important; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(251, 114, 6, 0.2); }
.woocommerce-message, .woocommerce-error, .woocommerce-info { border-radius: 8px !important; border-top-color: var(--primary-orange) !important; background-color: #FFF7ED !important; color: #B45309 !important; box-shadow: none !important; font-weight: 600; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--primary-orange) !important; }

/* TRANG CART (GIỎ HÀNG) */
.woocommerce-cart table.cart td.actions { padding: 25px 0 10px 0 !important; }
.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 10px; align-items: center; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 200px; padding: 14px 15px !important; border-radius: 8px !important; border: 1px solid #E2E8F0 !important; font-size: 14px; outline: none; }
.woocommerce-cart table.cart td.actions .coupon .input-text:focus { border-color: var(--primary-orange) !important; }
.woocommerce-cart table.cart td.actions .button[name="update_cart"] { background: #94A3B8 !important; color: #fff !important; }
.woocommerce-cart table.cart td.actions .button[name="update_cart"]:hover { background: #1E222D !important; }
@media (min-width: 992px) {
    body.woocommerce-cart .premium-page-content .woocommerce { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px !important; }
    body.woocommerce-cart .woocommerce-cart-form { flex: 1; }
    body.woocommerce-cart .cart-collaterals { width: 100% !important; max-width: 360px !important; flex-shrink: 0; background: #F8FAFC; padding: 25px !important; border-radius: 16px; border: 1px solid #E2E8F0; margin-top: 0 !important; }
}
.woocommerce-cart .cart-collaterals h2 { font-size: 20px; font-weight: 900; color: #1E222D; margin-bottom: 20px; border-bottom: 2px solid #E2E8F0; padding-bottom: 15px; }
.woocommerce-cart .cart-collaterals table.shop_table { width: 100% !important; margin-bottom: 25px !important; }
.woocommerce-cart .cart-collaterals .checkout-button { width: 100% !important; display: block !important; text-align: center !important; padding: 18px 10px !important; font-size: 15px !important; line-height: 1 !important; border-radius: 10px !important; white-space: nowrap !important; }

/* TRANG CHECKOUT (THANH TOÁN) */
.woocommerce-checkout .col2-set .col-2 { display: none !important; }
.woocommerce-checkout .col2-set .col-1 { width: 100% !important; float: none !important; padding: 0 !important; }
.woocommerce form .form-row { margin-bottom: 25px; }
.woocommerce form .form-row label { font-weight: 700; color: #1E222D; margin-bottom: 8px; display: block; font-size: 14px; }
.woocommerce form .form-row input.input-text { width: 100%; padding: 15px 20px !important; background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; font-size: 15px; transition: 0.3s; color: #1E222D; }
.woocommerce form .form-row input.input-text:focus { background: #fff !important; border-color: var(--primary-orange) !important; box-shadow: 0 0 0 3px rgba(251,114,6,0.1) !important; outline: none !important; }
.woocommerce form .form-row-first { width: 48%; float: left; }
.woocommerce form .form-row-last { width: 48%; float: right; }
.woocommerce form .form-row-wide { clear: both; }
.woocommerce-checkout h3 { font-size: 24px; font-weight: 900; color: #1E222D; border-bottom: 2px solid #E2E8F0; padding-bottom: 10px; margin-bottom: 20px; }

@media (min-width: 992px) {
    form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: 55% 40%; justify-content: space-between; align-items: start; gap: 40px !important; }
    form.checkout.woocommerce-checkout::before, form.checkout.woocommerce-checkout::after { display: none !important; }
    #order_review { display: contents !important; }
    #order_review_heading { grid-column: 1 / 2; grid-row: 1 / 2; margin: 0 0 15px 0 !important; font-size: 24px; font-weight: 900; }
    .woocommerce-checkout-review-order-table { grid-column: 1 / 2; grid-row: 2 / 3; margin-bottom: 40px !important; }
    #customer_details { grid-column: 1 / 2; grid-row: 3 / 4; margin-bottom: 0 !important; }
    #payment { grid-column: 2 / 3; grid-row: 1 / 4; background: #F8FAFC !important; padding: 35px !important; border-radius: 16px !important; border: 1px solid #E2E8F0 !important; position: sticky; top: 100px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
}
.woocommerce-checkout table.shop_table { border: 1px solid #E2E8F0 !important; background: #fff !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td { border-bottom: 1px dashed #E2E8F0 !important; padding: 18px 25px !important; background: transparent !important; }
.woocommerce-checkout table.shop_table tr:last-child th, .woocommerce-checkout table.shop_table tr:last-child td { border-bottom: none !important; }

/* Payment Box & Icons Fix */
#payment { background: #fff !important; border-radius: 16px !important; padding: 30px !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important; }
#payment ul.payment_methods { padding: 0 !important; border-bottom: 1px solid #E2E8F0 !important; margin-bottom: 25px !important; }
#payment ul.payment_methods li { margin-bottom: 15px !important; list-style: none !important; }
#payment ul.payment_methods li input[type="radio"] { display: none !important; }
#payment ul.payment_methods li label { display: block !important; padding: 16px 15px 16px 50px !important; border: 1px solid #E2E8F0; border-radius: 10px; cursor: pointer; font-weight: 700; color: #1E222D; transition: all 0.3s ease; position: relative !important; margin: 0; line-height: 1.5 !important; }
#payment ul.payment_methods li label::before { content: ''; position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; border: 2px solid #cbd5e1 !important; border-radius: 50% !important; box-sizing: border-box !important; transition: 0.3s; }
#payment ul.payment_methods li label img { max-height: 22px !important; vertical-align: middle !important; margin-left: 8px !important; }
#payment ul.payment_methods li input[type="radio"]:checked + label { border-color: var(--primary-orange); background: #FFF7ED; box-shadow: 0 4px 10px rgba(251,114,6,0.05); }
#payment ul.payment_methods li input[type="radio"]:checked + label::before { border-color: var(--primary-orange) !important; border-width: 6px !important; }
#payment div.payment_box { background: transparent !important; color: #64748B !important; font-size: 13.5px !important; padding: 10px 5px 0 5px !important; margin: 0 !important; box-shadow: none !important; }
#payment div.payment_box::before { display: none !important; }
button#place_order { background: var(--dark-slate) !important; color: #fff !important; padding: 20px !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 900 !important; width: 100% !important; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s !important; }
button#place_order:hover { background: var(--primary-orange) !important; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(251, 114, 6, 0.3) !important; }
.woocommerce-checkout-payment .place-order { padding: 0 !important; margin-top: 20px; }

/* ==========================================================================
   4. BẢNG ĐIỀU KHIỂN KHÁCH HÀNG (MY ACCOUNT SAAS DASHBOARD)
   ========================================================================== */
body.woocommerce-account .premium-page-container { max-width: 1200px !important; padding: 50px 60px !important; }
.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: 30px; align-items: stretch; }
.woocommerce-MyAccount-navigation-link--edit-address { display: none !important; }
.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 25% !important; background: #F8FAFC; border-radius: 16px; padding: 30px 20px; border: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { margin-bottom: 8px; border: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: flex; align-items: center; padding: 15px 20px; color: #64748B; font-weight: 700; font-size: 15px; border-radius: 12px; transition: all 0.3s ease; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { background: var(--dark-slate); color: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover:not(.is-active) { background: #E2E8F0; color: #1E222D; transform: translateX(5px); }
.woocommerce-MyAccount-navigation-link a::before { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900; margin-right: 15px; font-size: 18px; width: 24px; text-align: center; opacity: 0.8; }
.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "\f0e4"; }
.woocommerce-MyAccount-navigation-link--orders a::before { content: "\f290"; }
.woocommerce-MyAccount-navigation-link--downloads a::before { content: "\f019"; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "\f013"; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "\f2f5"; }

.woocommerce-account .woocommerce-MyAccount-content { flex: 1; background: #fff; border-radius: 16px; border: 1px solid #E2E8F0; padding: 50px !important; box-shadow: 0 4px 25px rgba(0,0,0,0.02); }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--primary-orange); font-weight: 800; text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-content a:hover { text-decoration: underline; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type { background: #F8FAFC; padding: 25px; border-radius: 12px; border-left: 4px solid var(--primary-orange); font-size: 16px; color: #1E222D; line-height: 1.6; margin-bottom: 30px; }
.woocommerce-account table.shop_table { border: 1px solid #E2E8F0; border-radius: 12px; overflow: hidden; border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 10px; }
.woocommerce-account table.shop_table th { background: #F8FAFC; padding: 18px 20px; color: #475569; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #E2E8F0; }
.woocommerce-account table.shop_table td { padding: 20px; border-bottom: 1px solid #E2E8F0; color: #1E222D; vertical-align: middle; }
.woocommerce-account table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce-account table.shop_table .button { background: #1E222D !important; color: #fff !important; border-radius: 6px !important; padding: 10px 18px !important; font-size: 13px !important; text-transform: uppercase; font-weight: 800 !important; transition: 0.3s !important; }
.woocommerce-account table.shop_table .button:hover { background: var(--primary-orange) !important; transform: translateY(-2px); }

.woocommerce-EditAccountForm .form-row input.input-text { width: 100%; padding: 15px !important; border-radius: 8px !important; border: 1px solid #E2E8F0 !important; background: #F8FAFC !important; }
.woocommerce-EditAccountForm .form-row input.input-text:focus { background: #fff !important; border-color: var(--primary-orange) !important; box-shadow: 0 0 0 3px rgba(251,114,6,0.1) !important; }
.woocommerce-EditAccountForm legend { font-size: 20px; font-weight: 900; color: #1E222D; padding-bottom: 10px; margin-top: 30px; border-bottom: 2px solid #F1F5F9; margin-bottom: 20px; width: 100%; }

@media (max-width: 768px) {
    body.woocommerce-account .premium-page-container { padding: 30px 20px !important; }
    .woocommerce-account .woocommerce { flex-direction: column; }
    .woocommerce-account .woocommerce-MyAccount-navigation { flex: none; width: 100%; padding: 15px; }
    .woocommerce-account .woocommerce-MyAccount-content { width: 100%; padding: 30px 20px !important; }
}
/* ==========================================================================
   BẢN VÁ KHẨN CẤP: ÉP KÍCH THƯỚC LOGO & FIX TRÀN NÚT CHECKOUT
   ========================================================================== */

/* 1. KHÓA TỬ HUYỆT LOGO WOOCOMMERCE BẰNG MỌI GIÁ */
.main-header img.site-logo,
.header-left img.site-logo,
.logo-default, 
.logo-scrolled,
.main-header img {
    max-height: 30px !important; /* Siết cứng chiều cao logo ở mức 40px */
    width: auto !important;
    object-fit: contain !important;
}

/* 2. CHỮA BỆNH TRÀN CHỮ CHO NÚT "PROCEED TO CHECKOUT" */
.woocommerce-cart .cart-collaterals .checkout-button {
    white-space: normal !important; /* CHÌA KHÓA: Cho phép chữ dàn trang vừa với khung đen */
    font-size: 14px !important; /* Hạ size chữ xuống 1 xíu cho tinh tế */
    letter-spacing: 0.5px !important; /* Thu gọn khoảng cách giữa các chữ */
    padding: 16px 10px !important;
    line-height: 1.4 !important; /* Tạo độ thở nếu chữ chia thành 2 dòng */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    word-wrap: break-word !important;
}

/* ==========================================================================
   FIX DỨT ĐIỂM LỖI LỆCH CỘT CART TOTALS (TRIỆT TIÊU FLOAT CỦA WOOCOMMERCE)
   ========================================================================== */

/* 1. Ép nội dung (ruột) phải lấp đầy 100% khung xám, không được co cụm bên phải */
.woocommerce-cart .cart-collaterals .cart_totals {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

/* 2. Căn lề trái cho Tiêu đề và Bảng tính tiền */
.woocommerce-cart .cart-collaterals .cart_totals h2 {
    text-align: left !important;
    width: 100% !important;
}
.woocommerce-cart .cart-collaterals table.shop_table {
    width: 100% !important;
}

/* 3. Phục hồi Nút Checkout chuẩn 1 dòng, Full chiều ngang */
.woocommerce-cart .cart-collaterals .checkout-button {
    width: 100% !important;
    display: block !important;
    white-space: nowrap !important; /* Ép chữ nằm trên 1 dòng vì khung đã rộng 100% */
    text-align: center !important;
    padding: 16px 10px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

/* ================= TỐI ƯU HIỂN THỊ TIÊU ĐỀ KHÓA HỌC (NHẸ NHÀNG, THANH THOÁT HƠN) ================= */

.compact-list-item .item-title,
.text-only-card .compact-product-title,
.related-courses-section .item-title {
    font-weight: 600 !important; /* Giảm độ đậm từ 800 (Extra Bold) xuống 600 (Semi-Bold) */
    color: #334155 !important; /* Đổi từ màu đen tuyền (#1E222D) sang màu Xám than (Slate) dịu mắt hơn */
    letter-spacing: 0.2px !important; /* Tạo độ thở nhẹ giữa các chữ cái */
}

/* Giữ lại hiệu ứng đổi màu Cam khi khách hàng đưa chuột vào */
.compact-list-item .item-title:hover,
.text-only-card .compact-product-title:hover,
.related-courses-section .item-title:hover {
    color: var(--primary-orange) !important;
}

/* ==========================================================================
   HỆ THỐNG PHÒNG THỦ: CHỐNG BÔI ĐEN & COPY NỘI DUNG
   ========================================================================== */
body {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Vẫn cho phép bôi đen/chỉnh sửa khi khách hàng đang nhập form liên hệ hoặc ô tìm kiếm */
input, textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* ==========================================================================
   BỔ SUNG TỐI ƯU MENU VÀ KẾT NỐI GIAO DIỆN (CLOUDFLARE SAFE)
   ========================================================================== */

/* 1. Thiết kế Nút Giỏ hàng (Cart) trên Menu Header nổi bật, bo góc sang trọng */
.header-cart-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    padding: 8px 18px;
    border-radius: 30px;
    color: var(--dark-slate);
    font-weight: 800;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 1px solid #E2E8F0;
}
.header-cart-icon i { font-size: 16px; color: var(--primary-orange); }
.header-cart-icon:hover {
    background: var(--primary-orange);
    color: #fff !important;
    border-color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 114, 6, 0.2);
}
.header-cart-icon:hover i { color: #fff; }

/* Trạng thái Menu khi cuộn chuột (Nền tối) */
.main-header.scrolled .header-cart-icon {
    background: rgba(255,255,255,0.1);
    border-color: transparent;
    color: #fff;
}
.main-header.scrolled .header-cart-icon:hover {
    background: var(--primary-orange);
}

/* 2. Tối ưu chống chớp giật (FOUC) cho Menu khi dùng Cloudflare Rocket Loader */
.main-nav > ul {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Gia cố chống tràn viền tuyệt đối cho Sub-menu trên Mobile (Chống lỗi Safari/iOS) */
@media (max-width: 768px) {
    .main-nav .sub-menu {
        width: calc(100vw - 40px) !important; /* Trừ đi lề 2 bên để không bao giờ chạm mép màn hình */
        left: 20px !important; /* Căn giữa an toàn */
        transform: translateY(15px) !important; /* Xóa lệnh translateX cũ để chống rung lắc */
        box-sizing: border-box !important;
    }
    .main-nav li:hover > .sub-menu {
        transform: translateY(0) !important;
    }
}