@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; /* Không đệm trên desktop để đúng 660px */
    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-body-text {
        padding: 0 15px; /* Đệm an toàn cho mobile */
    }
    
    .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 */
}

/* ==========================================================================
   7. THANH NGUỒN BÀI VIẾT & COPY LINK (CREDIT & COPY LINK BAR)
   ========================================================================== */
.mag-credit-bar {
    max-width: 660px;
    margin: 40px auto 60px;
    padding: 10px 24px;
    background-color: #222222;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'SVN-Apparat-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #888888;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    width: 100%; /* Căn rộng đúng 660px như cột text trên desktop */
}

.mag-credit-left {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mag-credit-prefix {
    color: #888888;
    font-weight: 400;
}

.mag-credit-source {
    color: #cccccc;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.mag-credit-source:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.mag-credit-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mag-credit-date {
    color: #888888;
    font-weight: 400;
}

.mag-copy-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cccccc;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-style: italic;
    transition: all 0.2s ease-in-out;
}

.mag-copy-btn:hover {
    opacity: 0.8;
}

.mag-copy-btn:focus {
    outline: none;
}

.mag-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.mag-copy-icon {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

.mag-check-icon {
    width: 12px;
    height: 12px;
    stroke: #81c784;
    stroke-width: 2.5;
    fill: none;
    display: none;
}

/* State when link is copied */
.mag-copy-btn.copied .mag-copy-icon {
    display: none;
}

.mag-copy-btn.copied .mag-check-icon {
    display: inline-block;
    animation: scaleUp 0.2s ease-in-out forwards;
}

.mag-copy-btn.copied .mag-copy-text {
    color: #81c784;
    font-weight: 700;
    font-style: normal;
}

@keyframes scaleUp {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsive adjustment for small screens */
@media (max-width: 640px) {
    .mag-credit-bar {
        width: calc(100% - 30px); /* Đệm an toàn 15px hai bên trên mobile */
        padding: 8px 16px;
        gap: 8px;
    }

    .mag-credit-left {
        gap: 4px;
    }

    .mag-credit-right {
        gap: 12px;
    }

    .mag-credit-date {
        font-size: 11px;
    }

    .mag-copy-btn {
        font-size: 11px;
        gap: 4px;
    }
}