/* ==========================================================================
   FILE: CUSTOM.CSS - TỰ ĐỘNG KẾ THỪA KÍCH THƯỚC v4.7 GỐC (KHÔNG HARDCODE)
   ========================================================================== */

/* 1. Đăng ký phông chữ hệ thống trỏ thẳng vào file offline woff2 của bạn */
@font-face {
    font-family: 'Font Awesome 7 Brands Fixed';
    src: url('/admin_dashboard_assets/webfonts/fa-brands-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: block; /* Bắt buộc có để trình duyệt vẽ font ngay khi tải xong */
}

/* 2. Cấu hình hiển thị nền tảng cho class mạng xã hội (BỎ HOÀN TOÀN FONT-SIZE VÀ LINE-HEIGHT)
      Để trình duyệt tự động nhận kích thước to hơn chữ nguyên bản của template v4.7 truyền xuống */
.fa-brands, .fab {
    font-family: 'Font Awesome 7 Brands Fixed' !important;
    font-weight: 400 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 3. Khai báo mã Unicode chuẩn của bản mới để trình duyệt vẽ chính xác từng icon */
.fa-facebook::before { content: "\f39e" !important; }
.fa-x-twitter::before { content: "\e61b" !important; } /* Mã Unicode chuẩn của logo X */
.fa-instagram::before { content: "\f16d" !important; }
.fa-linkedin::before { content: "\f08c" !important; }
.fa-tiktok::before { content: "\e07b" !important; }    /* Mã Unicode chuẩn của logo TikTok */
.fa-youtube::before { content: "\f167" !important; }

/* 4. Cấu hình màu sắc thương hiệu chính thức (Brand Colors) tránh bị xám xịt */
i.fa-facebook { color: #1877F2 !important; }
i.fa-x-twitter { color: #000000 !important; }
i.fa-instagram { color: #E1306C !important; }
i.fa-linkedin { color: #0A66C2 !important; }
i.fa-tiktok { color: #010101 !important; }
i.fa-youtube { color: #FF0000 !important; }

/* 5. Hiệu ứng đổi màu mượt mà khi người dùng di chuột vào icon (Hover) */
.social-widget a:hover i, .footer-widgets a:hover i, a:hover > i.fa-brands {
    opacity: 0.7 !important;
    transition: opacity 0.2s ease-in-out !important;
}








/* ==========================================================================
   ĐOẠN VIẾT THÊM: NÂNG CẤP ICON NHIỆT ĐỘ, VỊ TRÍ, LỊCH SANG BẢN CHUẨN v7.3
   ========================================================================== */

/* 1. Đăng ký thêm phông chữ hệ thống nhóm Solid (Cần thiết cho icon đời sống) 
@font-face {
    font-family: 'Font Awesome 7 Solid Fixed';
    src: url('/admin_dashboard_assets/webfonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

/* 2. Cấu hình hiển thị nền tảng cho 3 icon hệ thống (Tự động kế thừa size/màu gốc) 
i.fa-thermometer, i.fa-thermometer-half, i.fa-temperature-half,
i.fa-map-marker, i.fa-location-dot,
i.fa-calendar, i.fa-calendar-days {
    font-family: 'Font Awesome 7 Solid Fixed' !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* 3. KHAI BÁO MÃ UNICODE CHÍNH THỨC CỦA BẢN MỚI NHẤT v7.3 
i.fa-thermometer::before, i.fa-thermometer-half::before, i.fa-temperature-half::before { 
    content: "\f2c9" !important; /* Mã vẽ chuẩn: Nhiệt độ (Temperature Half) bản mới sắc nét 
}
i.fa-map-marker::before, i.fa-location-dot::before { 
    content: "\f3c5" !important; /* Mã vẽ chuẩn: Vị trí (Location Dot) hình giọt nước thời thượng 
}
i.fa-calendar::before, i.fa-calendar-days::before { 
    content: "\f073" !important; /* ĐỔI THÀNH \f073 - Mã vẽ chuẩn: Tờ lịch vuông vắn của bản mới nhất 7.3 
}

*/ 


/* ==========================================================================
   NÂNG CẤP: VIỀN DÀY 4PX & CHUỖI 6 MÀU TRONG TRẺO (VIẾT VÀO CUSTOM.CSS)
   ========================================================================== */

/* 1. TRIỆT TIÊU LỆNH MỜ GỐC CỦA THEME USNEWS */
.header--topbar ul.nav > li > a.ai-solid-logo:hover {
    opacity: 1 !important;
}

/* 2. ĐỊNH HÌNH KHUNG CHỨA CỐ ĐỊNH LAYOUT */
.ai-solid-logo {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

/* 3. LỚP PHỦ ẢO: NÂNG CẤP ĐỘ DÀY VIỀN LÊN 4PX VÀ BO KHÍT GÓC 12PX */
.ai-solid-logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px; /* Bằng khít chiều cao ảnh logo của bạn */
    border-radius: 12px; /* Trùng góc bo 12px cũ của bạn */
    
    /* ĐÃ NÂNG CẤP: Tăng độ dày sợi viền lên 4px cho rõ nét */
    padding: 4px; 
    
    /* THUẬT TOÁN MẶT NẠ CHUẨN: Giữ màu đúng trên sợi viền, đục rỗng hoàn toàn phần ruột ảnh */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    /* Mặc định ẩn viền đi khi chưa di chuột vào */
    opacity: 0;
    transition: opacity 0.3s ease-on-out;
}

/* 4. KÍCH HOẠT HOVER: Hiện viền và chạy chu kỳ đổi 6 màu mịn màng */
.ai-solid-logo:hover::before {
    opacity: 1;
    animation: aiChange6Colors 7s ease-in-out infinite; /* 7 giây để chuyển qua lại giữa 6 màu thật mượt */
}

/* 5. CHU KỲ ĐỔI 6 MÀU ĐƠN SẮC TRONG TRẺO, MỊN MÀNG */
@keyframes aiChange6Colors {
    0%, 100% {
        background: #ff1493; /* 1. Hồng cánh sen đậm (Deep Pink trong trẻo) */
    }
    16% {
        background: #00ff7f; /* 2. Xanh lá mịn (Spring Green) */
    }
    32% {
        background: #ffcc00; /* 3. Vàng đậm ấm áp (Dark Amber) */
    }
    48% {
        background: #00f5ff; /* 4. Xanh Cyan trong vắt (Bright Cyan) */
    }
    64% {
        background: #ff8c00; /* 5. Màu Cam tươi (Dark Orange) */
    }
    80% {
        background: #ff6f61; /* 6. Đỏ san hô mịn màng (Living Coral) */
    }
}




/* ==========================================================================
   ICON HOME MÀU GẠCH 
   ========================================================================== */

.ai-pretty-home {
    /* Đổ dải màu Hồng cánh sen đậm trong trẻo và mượt mà */
    background: linear-gradient(45deg, #f96c5a , #f96c5a ) !important;
    
    /* Ép dải màu bám khít hình dáng nét vẽ của ngôi nhà v7 */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    display: inline-block !important;
    opacity: 1 !important; /* Khóa độ đậm 100%, hủy bỏ lệnh mờ của theme gốc */
    
    /* Giữ nguyên cấu hình chuyển đổi mượt mà gốc của bạn */
    transition: background 0.25s ease-in-out, -webkit-text-fill-color 0.25s ease-in-out;
}



/* 1. Chỉ tô màu nền xanh ngọc gradient cho phần thân/nội dung dưới của khối */
.widget > div:nth-child(2),
.widget .list--widget,
.widget .social--widget,
.widget .subscribe--widget,
.widget .ad--widget--banner,
.widget .poll--widget {
    background: linear-gradient(135deg, #f0f9f6 0%, #cbe8dd 100%) !important;
}

/* 2. Loại trừ hoàn toàn phần tiêu đề ở trên, ép tiêu đề về nền suốt hoặc màu nền mặc định của web */
.widget .widget--title {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Xóa bỏ màu nền xám cũ của tất cả các bài viết, danh sách nhỏ lọt lòng bên trong để hiện màu nền lớn */
.widget .post--item, 
.widget ul, 
.widget li {
    background: transparent !important;
    background-color: transparent !important;
}
/* Đổi màu nền khung nhập email sang màu trắng tinh */
.subscribe--widget form input[type="email"],
.subscribe--widget form input.form-control {
    background: #ffffff !important;
    background-color: #ffffff !important;
}




/* Đổi màu nền thanh cập nhật tin tức và các danh sách bài viết ngoài trang chủ */

.list_news_show_home {
    background: linear-gradient(135deg, #f0f9f6 0%, #cbe8dd 100%) !important;
}

/* Xóa bỏ màu nền của các dòng chữ nhỏ lọt lòng bên trong để hiện màu nền lớn */
.list_news_show_home li {
    background: transparent !important;
    background-color: transparent !important;
}





/* Loại bỏ gạch chân của link tiêu đề chuyên mục */
.post--items-title a {
    text-decoration: none !important;
}

/* Khi di chuột vào tiêu đề h2 bên trong link, đổi sang màu hồng cánh sen */
.post--items-title a:hover h2 {
    color: #FF7F50 !important;
}




/* ==========================================================================
   HIỆU ỨNG VIỀN CHẠY GOOGLE KHỐI BÀI VIẾT MỚI
   ========================================================================== */

/* 1. KHUNG BỌC ẢNH ĐỂ TẠO KHE HỞ LÀM VIỀN (Chỉ kích hoạt trong khoi-bai-viet-moi) */
.khoi-bai-viet-moi .post--item.post--layout-1 .post--img .thumb { 
    position: relative; 
    padding: 5px; 
    background: transparent; 
    overflow: hidden; 
    border-radius: 4px; 
    transition: all 0.3s ease; 
} 

/* 2. TẠO DẢI MÀU BIẾN ĐỔI LIÊN TỤC (Màu chủ đạo Google Gemini) */
.khoi-bai-viet-moi .post--item.post--layout-1 .post--img .thumb:before { 
    content: " "; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: linear-gradient(90deg, #217bfe, #ac87eb, #ec4899, #06b6d4, #217bfe); 
    background-size: 300% 100%; 
    opacity: 0; 
    z-index: 1; 
} 

/* 3. KHI RÊ CHUỘT VÀO: KÍCH HOẠT VIỀN CHẠY CHUYỂN ĐỘNG */
.khoi-bai-viet-moi .post--item.post--layout-1 .post--img:hover .thumb:before { 
    opacity: 1; 
    animation: viemChayGoogleAI 2s linear infinite; 
} 

/* 4. HOẠT ẢNH DỊCH CHUYỂN DẢI MÀU (CHẠY UỐN LƯỢN VÔ TẬN) */
@keyframes viemChayGoogleAI { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 300% 50%; } 
} 

/* 5. ĐẢM BẢO ẢNH GỐC NẰM ĐÈ LÊN TRÊN (ĐỂ CHỈ LỘ CÁI VIỀN RA) */
.khoi-bai-viet-moi .post--item.post--layout-1 .post--img .thumb img { 
    position: relative; 
    z-index: 2; 
    border-radius: 2px; 
} 

.khoi-bai-viet-moi .post--item.post--layout-1 .post--img:hover .thumb img { 
    filter: brightness(95%); 
}




/* Định dạng ô thông báo sao chép liên kết bài viết  */
.copy-toast {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    background: #c8eee2;
    color: #333;
    padding: 12px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.copy-toast.show {
    opacity: 1;
    visibility: visible;
}
/* Dòng cuối của đinh dạng ô thông báo sao chép liên kết bài viết  */






/* Dấu 3 chấm của phần menu phần bình luận */
/* Dấu 3 chấm của phần menu phần bình luận */
/* Dấu 3 chấm của phần menu phần bình luận */

.comment-menu {
    float: right;
}


/* CUSTOM: Comment dropdown */

.comment-menu-wrapper {
    position: static !important;
    float: right;
}

.comment-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 140px;
    padding: 5px 0;
    z-index: 9999;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.comment-dropdown a {
    display: block;
    padding: 9px 15px;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

.comment-dropdown a:hover {
    background: #f5f5f5;
}


/* CUSTOM: Comment dropdown icons */

.comment-dropdown i {
    width: 20px;
    margin-right: 8px;
}

/* Chỉnh sửa */
.comment-dropdown a:nth-child(1) i {
    color: #3498db !important;
}

/* Xóa */
.comment-dropdown a:nth-child(2) i {
    color: #e74c3c !important;
}

/* Báo cáo */
.comment-dropdown a:nth-child(3) i {
    color: #f39c12 !important;
}



/* Comment edit box */

.edit-comment-box {
    display: block;
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 10px;
}

.edit-comment-box:focus {
    border-color: #999;
    outline: none;
}

.edit-comment-box,
.edit-comment-box:focus,
.edit-comment-box:active {
    background-color: #fff !important;
    color: #333 !important;
}









/* ==============================
   Delete Comment Modal
   ============================== */

#delete-comment-modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.45);

    z-index: 9999;

    display: none;
}


/* Khung popup */
.delete-comment-content {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 360px;

    background: #ffffff;

    padding: 30px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}


/* Tiêu đề */
.delete-comment-content h4 {

    font-size: 20px;

    font-weight: 600;

    color: #333;

    margin-bottom: 12px;
}


/* Nội dung */
.delete-comment-content p {

    font-size: 15px;

    color: #666;

    margin-bottom: 25px;
}


/* Nút chung */
.delete-comment-content button {

    min-width: 90px;

    padding: 10px 20px;

    border: none;

    border-radius: 6px;

    font-size: 14px;

    cursor: pointer;

    transition: 0.2s;
}


/* ==============================
   Nút Hủy (màu xanh)
   ============================== */

.cancel-delete-comment {

    background: #007bff;

    color: #ffffff;

    margin-right: 10px;
}


.cancel-delete-comment:hover {

    background: #0069d9;

}


/* ==============================
   Nút Xóa (màu đỏ)
   ============================== */

.confirm-delete-comment {

    background: #dc3545;

    color: #ffffff;
}


.confirm-delete-comment:hover {

    background: #c82333;

}







/* ==============================
   Report Comment Modal
   ============================== */

#report-comment-modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.45);

    z-index: 9999;

    display: none;
}


/* Khung popup */
.report-comment-content {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 360px;

    background: #ffffff;

    padding: 30px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}


/* Tiêu đề */
.report-comment-content h4 {

    font-size: 20px;

    font-weight: 600;

    color: #333;

    margin-bottom: 15px;
}


/* Ô nhập lý do */
#report-reason {

    width: 100%;

    height: 100px;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 6px;

    resize: none;

    margin-bottom: 20px;

    font-size: 14px;
}


/* Nút */
.report-comment-content button {

    min-width: 100px;

    padding: 10px 20px;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 14px;

}


/* Hủy */
.cancel-report-comment {

    background: #007bff;

    color: white;

    margin-right: 10px;
}


.cancel-report-comment:hover {

    background: #0069d9;

}


/* Gửi báo cáo */
.confirm-report-comment {

    background: #dc3545;

    color: white;

}


.confirm-report-comment:hover {

    background: #c82333;

}