/* ==========================================================================
   RƯỢU CỬU LONG - TRANG TIN TỨC & TRI THỨC (EXACT BRAND STYLE)
   Tuân thủ 100% Quy chuẩn CLV: Typography BT Danta, font-weight 500 Medium Display,
   tiêu đề trang phong cách "CÂU CHUYỆN THƯƠNG HIỆU" với logo plaque,
   tiêu đề bài viết thanh thoát không chật chội, bố cục thoáng đãng và sang trọng.
   ========================================================================== */

/* --- 1. BASE BODY & BACKGROUND PATTERN --- */
body.tin-tuc-exact-page {
    background-color: #f0ece9 !important;
    background-image: url('../images/story/bg-seamless-scales.webp?v=20260928_v2') !important;
    background-repeat: repeat !important;
    background-size: 84px 138px !important;
    background-attachment: scroll !important;
    color: #163d3d;
    font-family: 'BT Danta', 'BT Danta VF', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- 2. LIGHT SYMMETRICAL HEADER --- */
.tin-tuc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(240, 236, 233, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(197, 155, 39, 0.15);
    transition: all 0.35s ease;
    padding: 16px 0;
}

.tin-tuc-header.nav-scrolled {
    padding: 10px 0;
    background: rgba(240, 236, 233, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Menu gap cân đối khi có 3 mục bên phải */
.site-header-light .nav-group-right {
    gap: clamp(16px, 1.8vw, 36px) !important;
}

/* --- 3. HERO TITLE LOCKUP (KHỚP 100% MẪU THIẾT KẾ 7.PNG & ẢNH YÊU CẦU) --- */
.news-hero-section {
    padding-top: 135px;
    padding-bottom: 20px;
    text-align: center;
    position: relative;
}

.news-title-header {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Khối Lockup đồ họa: TIN TỨC & TRI THỨC căn giữa, ký tự & to hơn ở giữa */
.news-hero-title-lockup {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    line-height: 1;
}

.news-title-top {
    grid-column: 1;
    grid-row: 1;
    font-family: 'BT Danta', 'BT Danta VF', sans-serif;
    font-size: clamp(1.85rem, 2.7vw, 2.85rem);
    font-weight: 700;
    line-height: 1;
    color: #163d3d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
    text-align: right;
    align-self: end;
    margin-bottom: 0px;
    margin-right: clamp(14px, 1.6vw, 24px);
    white-space: nowrap;
}

.news-title-ampersand {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #163d3d;
    height: 100%;
    font-size: clamp(1.85rem, 2.7vw, 2.85rem);
    padding: 0;
    line-height: 1;
}

.news-title-ampersand svg {
    height: 1.4em;
    width: auto;
    aspect-ratio: 783 / 730;
    display: block;
}

.news-title-bottom {
    grid-column: 3;
    grid-row: 2;
    font-family: 'BT Danta', 'BT Danta VF', sans-serif;
    font-size: clamp(1.85rem, 2.7vw, 2.85rem);
    font-weight: 700;
    line-height: 1;
    color: #163d3d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0;
    text-align: left;
    align-self: start;
    margin-left: clamp(14px, 1.6vw, 24px);
    margin-top: 0px;
    white-space: nowrap;
}

/* Dải Marquee Ticker chạy chữ */
.news-marquee-ribbon {
    width: 100%;
    overflow: hidden;
    margin-top: 35px;
    margin-bottom: 45px;
    display: flex;
    white-space: nowrap;
    border-top: 1px solid rgba(22, 61, 61, 0.12);
    border-bottom: 1px solid rgba(22, 61, 61, 0.12);
    padding: 12px 0;
    background: rgba(240, 236, 233, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
}

.news-marquee-track {
    display: flex;
    width: max-content;
    animation: newsTickerScroll 40s linear infinite;
    align-items: center;
}

.news-marquee-track img {
    height: 38px;
    width: auto;
    margin-right: 0;
    opacity: 0.55;
    display: inline-block;
}

@keyframes newsTickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Thanh công cụ lọc & tìm kiếm thông thoáng */
.news-filter-toolbar {
    max-width: 1440px;
    margin: 0 auto 35px auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box;
}

.news-filter-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.news-filter-btn {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(22, 61, 61, 0.18);
    padding: 7px 20px;
    border-radius: 999px;
    color: #163d3d;
    font-family: 'BT Danta', sans-serif;
    font-weight: 500;
    font-size: 14.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.news-filter-btn:hover,
.news-filter-btn.active {
    background: #163d3d;
    color: #ffffff;
    border-color: #163d3d;
}

.news-search-wrap {
    position: relative;
    width: 290px;
    max-width: 100%;
}

.news-search-wrap input {
    width: 100%;
    padding: 8px 38px 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(22, 61, 61, 0.22);
    font-family: 'BT Danta', sans-serif;
    font-size: 14.5px;
    background: rgba(255, 255, 255, 0.85);
    color: #163d3d;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease;
    box-sizing: border-box;
}

.news-search-wrap input:focus {
    border-color: #c59b27;
    background: #ffffff;
}

.news-search-wrap i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #163d3d;
    opacity: 0.65;
    pointer-events: none;
}

/* --- 4. NEWS EDITORIAL GRID & THOÁNG ĐÃNG KHÔNG BỊ GÒ BÓ --- */
.news-grid-section {
    padding-bottom: 30px;
    position: relative;
}

.news-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.news-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(22, 61, 61, 0.16);
    border-left: none;
    border-right: none;
}

.news-editorial-card {
    position: relative;
    padding: 38px 32px 42px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(22, 61, 61, 0.16);
    border-bottom: 1px solid rgba(22, 61, 61, 0.16);
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

/* Cột thứ 3 không có viền phải */
.news-editorial-card:nth-child(3n) {
    border-right: none;
}

.news-editorial-card:hover {
    background-color: rgba(255, 255, 255, 0.38);
}

/* Khung ảnh đại diện bo góc tròn 20px */
.news-card-thumb-wrap {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 22px;
    background-color: #163d3d;
    box-shadow: 0 6px 20px rgba(22, 61, 61, 0.08);
    position: relative;
}

.news-card-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-editorial-card:hover .news-card-thumb-wrap img {
    transform: scale(1.05);
}

.news-card-category-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(22, 61, 61, 0.88);
    color: #f0ece9;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 3px 12px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
}

/* TIÊU ĐỀ THẺ BÀI VIẾT: font-weight: 500 (Medium Display), thoáng đãng không gò bó */
.news-card-heading {
    font-family: 'BT Danta', 'BT Danta VF', sans-serif;
    font-weight: 500; /* Medium Display thanh thoát, không dùng bold 700 thô ráp */
    font-size: 17.5px;
    line-height: 1.45; /* Giãn cách dòng thoáng, tránh gò bó */
    letter-spacing: 0.2px;
    color: #163d3d;
    margin: 0 0 14px 0;
    min-height: 52px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: color 0.25s ease;
}

.news-editorial-card:hover .news-card-heading {
    color: #c59b27;
}

/* Đoạn trích dẫn tóm tắt: Chuẩn CLV 15.5px - 16px, line-height 1.68, #163d3d, normal 400 */
.news-card-text {
    font-family: 'BT Danta', 'BT Danta VF', sans-serif;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.68;
    color: #163d3d;
    margin: 0 0 24px 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}

/* Nút "Đọc thêm >" hình viên thuốc căn giữa */
.news-card-action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.news-btn-readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #163d3d;
    color: #ffffff !important;
    border: none;
    border-radius: 999px;
    padding: 7px 7px 7px 22px;
    font-family: 'BT Danta', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(22, 61, 61, 0.15);
}

.news-btn-readmore .btn-icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #163d3d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.news-btn-readmore .btn-icon-circle i {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.news-btn-readmore:hover {
    background-color: #c59b27;
    box-shadow: 0 6px 20px rgba(197, 155, 39, 0.35);
    transform: translateY(-2px);
}

.news-btn-readmore:hover .btn-icon-circle {
    transform: translateX(2px);
    color: #c59b27;
}

/* --- 5. PAGINATION (THEO MẪU 7.PNG: ❶ 2 3 4 5 > ») --- */
.news-pagination-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 60px auto 85px auto;
    padding: 0 20px;
}

.news-page-item {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'BT Danta', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #163d3d;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.25s ease;
    user-select: none;
}

.news-page-item.active {
    background-color: #163d3d;
    color: #ffffff;
    font-weight: 700;
}

.news-page-item:hover:not(.active):not(.disabled) {
    background-color: rgba(22, 61, 61, 0.1);
    color: #c59b27;
}

.news-page-item.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.news-page-item.arrow-item {
    font-size: 20px;
    font-weight: 700;
    padding: 0 4px;
}

/* --- 6. ARTICLE READER MODAL (CHI TIẾT BÀI BÁO) --- */
.article-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 28, 28, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.article-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.article-modal-window {
    background: #fdfbf9;
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    padding: 40px 48px;
}

.article-modal-backdrop.is-open .article-modal-window {
    transform: translateY(0) scale(1);
}

.article-modal-close-btn {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(22, 61, 61, 0.2);
    background: #ffffff;
    color: #163d3d;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 10;
}

.article-modal-close-btn:hover {
    background: #163d3d;
    color: #ffffff;
    border-color: #163d3d;
}

.modal-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: rgba(22, 61, 61, 0.7);
    margin-bottom: 14px;
}

.modal-category-badge {
    background: #163d3d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    text-transform: uppercase;
}

.modal-article-title {
    font-family: 'BT Danta', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    color: #163d3d;
    margin: 0 0 20px 0;
}

.modal-hero-image-wrap {
    width: 100%;
    max-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 6px 20px rgba(22, 61, 61, 0.1);
}

.modal-hero-image-wrap img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.modal-article-content {
    font-family: 'BT Danta', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #163d3d;
}

.modal-article-content p {
    margin-bottom: 18px;
}

.modal-article-content blockquote {
    border-left: 4px solid #c59b27;
    margin: 24px 0;
    padding: 12px 20px;
    background: rgba(197, 155, 39, 0.08);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #163d3d;
}

.modal-article-content ul {
    margin: 16px 0 24px 20px;
    padding-left: 10px;
}

.modal-article-content li {
    margin-bottom: 10px;
}

/* --- 7. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1024px) {
    .news-editorial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .news-editorial-card:nth-child(3n) {
        border-right: 1px solid rgba(22, 61, 61, 0.16);
    }
    .news-editorial-card:nth-child(2n) {
        border-right: none;
    }
    .news-editorial-card {
        padding: 32px 24px;
    }
    .article-modal-window {
        padding: 30px 24px;
    }
}

@media (max-width: 768px) {
    .news-hero-section {
        padding-top: 110px;
    }
    .news-title-hero-wrap {
        flex-direction: column;
        gap: 16px;
    }
    .news-title-line-1,
    .news-title-line-2 {
        text-align: center;
        margin-left: 0;
    }
    .news-title-badge-logo {
        height: 52px;
        margin: 0 auto;
    }
    .news-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .news-search-wrap {
        width: 100%;
    }
    .news-editorial-grid {
        grid-template-columns: 1fr;
    }
    .news-editorial-card {
        border-right: none !important;
        padding: 28px 16px;
    }
    .news-pagination-wrap {
        gap: 8px;
    }
    .news-page-item {
        min-width: 32px;
        height: 32px;
        font-size: 16px;
    }
}