@charset "UTF-8";

/* ==========================================================================
   1. ĐỒNG BỘ GIAO DIỆN VỚI HỆ THỐNG (UI SYNCHRONIZATION)
   ========================================================================== */

/* 1.1. Xử lý Màu nền (Background) */
html, body,
#kbwcs-container,
.sp-detail,
.magazine-container,
.kbw-content,
.body-wrapper,
[id^='kbwcs-'] {
    background-color: #000000 !important; /* MÀU NỀN TỐI (Dark mode) */
}

/* 1.2. Thanh Header Hệ thống (Sticky Header) */
#header.nav-down, #header, .sp-sticky-header {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999999 !important;
    pointer-events: auto !important;
}

.magazine-container, .body-wrapper {
    padding-top: 44px !important; /* Luôn trừ 44px top để dành chỗ cho header hệ thống */
}

/* 1.3. Ẩn thông tin nguồn tự động (Source Info) */
div[data-sourcename], .news_source, .k14-source-info {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   2. QUY CHUẨN HIỂN THỊ CƠ BẢN (RESET & BASE)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. QUY CHUẨN FONT CHỮ (TYPOGRAPHY - NOTO SERIF)
   ========================================================================== */

/* Bắt buộc nạp font local nếu có, ở đây khai báo sẵn cấu trúc */
@font-face {
    font-family: 'SVN-Apparat-Regular';
    src: url('../fonts/SVN-Apparat-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Apparat-Regular';
    src: url('../fonts/SVN-Apparat-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   4. LAYOUT BÀI MAGAZINE THƯỜNG (GRID SYSTEMS)
   ========================================================================== */

/* Container chính cho bài Magazine Thường */
.magazine-common-container {
    width: 100%;
    overflow-x: hidden;
}

/* Cover Image / Video (Hiệu ứng đè title) */
.mag-cover {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

.mag-cover img {
    width: 100%;
    height: auto;
    display: block;
}



.mag-title {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-family: 'Noto Serif', serif;
    font-size: 48px;
    font-weight: 700;
    text-align: center;
    width: 90%;
    max-width: 980px;
    margin: 0;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Khối Content 660px (Standard Column) */
.mag-body-text {
    max-width: 660px;
    margin: 0 auto;
    padding: 0 15px; /* Đệm an toàn cho mobile */
    font-family: 'SVN-Apparat-Regular', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 29px;
    letter-spacing: 0;
    text-align: left;
    margin-bottom: 24px;
    color: #cccccc;
}

.mag-body-text p {
    margin-bottom: 15px;
}

.mag-body-text ul.mag-list {
    padding-left: 20px;
    margin-bottom: 15px;
}

.mag-body-text ul.mag-list li {
    margin-bottom: 12px;
}

.mag-body-text strong, .mag-body-text b {
    font-weight: 700;
}

/* Định dạng Layout 980px (Large Column) */
.mag-large-content {
    max-width: 980px;
    margin: 0 auto 32px;
    padding: 30px 15px; /* Thêm 30px padding top/bottom */
}

.mag-large-content .mag-video {
    clip-path: inset(2px 3px); /* Trên dưới 2px, trái phải 3px */
}

/* Định dạng Full Width cho Ảnh/Video (Trừ Cover) */
.mag-full-width {
    width: 100%;
    margin-bottom: 32px;
}

.mag-full-width:not(.mag-cover) {
    padding: 30px 0; /* Thêm 30px padding top/bottom cho ảnh trong bài */
}

.mag-full-width img {
    display: block;
    width: 100%;
    height: auto;
}

/* Responsive Media Styling (Video & Image) */
.mag-video, .mag-image {
    width: 100%;
    height: auto;
    display: block;
    border: none;
    outline: none;
}

.mag-video {
    clip-path: inset(2px); /* Gọt viền 2px ở cả 4 cạnh để giấu triệt để lỗi render video */
}

.d-mobile {
    display: none !important;
}

/* ==========================================================================
   5. RESPONSIVE ĐIỀU CHỈNH MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .mag-title {
        font-size: 32px;
        bottom: 20px;
    }
    
    .mag-cover {
        margin-bottom: 24px;
    }
    
    .mag-full-width, .mag-large-content {
        margin-bottom: 24px;
    }
    
    .mag-large-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .mag-video {
        clip-path: none !important;
    }
    
    /* Toggle Media PC/Mobile */
    .d-pc {
        display: none !important;
    }
    
    .d-mobile {
        display: block !important;
    }
}

/* ==========================================================================
   6. HIỆU ỨNG GRAIN ĐỘNG TOÀN TRANG (DYNAMIC FILM GRAIN EFFECT)
   ========================================================================== */
/* Lớp 1: Hạt nhiễu động (Dynamic Canvas Noise) */
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Cho phép tương tác click xuyên qua */
    z-index: 9999999; /* Luôn nổi trên cùng sát màn hình */
    opacity: 0.16; /* Độ đậm nhạt 16% theo cấu hình của người dùng */
    mix-blend-mode: soft-light; /* Hòa trộn Soft Light cực kỳ nghệ thuật và tự nhiên */
}

/* Lớp 2: Lớp phủ hạt tĩnh Noise.jpg (Static Overlay) */
.noise-static-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url('../img/Noise.jpg') repeat; /* Sử dụng ảnh Noise.jpg gốc lặp lại */
    pointer-events: none; /* Cho phép tương tác click xuyên qua */
    z-index: 9999998; /* Nằm ngay dưới lớp grain động, các nội dung khác cuộn bên dưới */
    opacity: 0.2; /* Hòa trộn 20% theo yêu cầu */
    mix-blend-mode: soft-light; /* Hòa trộn Soft Light cực kỳ nghệ thuật và tự nhiên */
}