/*
 * layout.css — Bố cục khung trang
 * Đầu trang, thanh điều hướng, ngăn kéo trên điện thoại, cột bên, chân trang,
 * vùng quảng cáo. Không chứa kiểu của riêng trang chủ hay bài viết.
 */

/* ============ 1. Vùng quảng cáo ============ */
.quang-cao {
    margin: var(--khoang) 0;
    text-align: center;
}
.quang-cao img { margin: 0 auto; border-radius: var(--bo-goc); }

/* ============ 2. Đầu trang ============ */
.dau-trang {
    background: var(--mau-nen-khoi);
    border-bottom: 3px solid var(--mau-chinh);
}

.dau-trang__chinh {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--khoang);
    padding: 14px 0;
}

.dau-trang__hieu {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dau-trang__hieu img { max-height: 62px; width: auto; }

.dau-trang__khau-hieu {
    font-size: .75rem;
    color: var(--mau-chu-nhat);
}

/* Chưa đặt logo thì hiện tên website bằng chữ */
.dau-trang__ten {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--mau-phu);
}
.dau-trang__ten a:hover { color: var(--mau-chinh); }

/* Băng quảng cáo cạnh logo — ẩn trên điện thoại để đầu trang không quá cao */
.dau-trang__bang {
    flex: 1;
    max-width: 728px;
    margin: 0;
}

/* ============ 3. Thanh điều hướng ============ */
.thanh-menu {
    background: var(--mau-chinh);
    position: relative;
    z-index: 50;
}

/* Đầu trang dính khi cuộn — chỉ bật từ máy tính bảng trở lên */
@media (min-width: 900px) {
    .thanh-menu.dinh-tren {
        position: sticky;
        top: 0;
        box-shadow: var(--bong-noi);
    }
}

.thanh-menu__trong {
    display: flex;
    align-items: center;
    gap: 0;
}

.menu-chinh {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-chinh li { position: relative; }

.menu-chinh > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    padding: 0 15px;
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--mau-chu-dao);
    white-space: nowrap;
    transition: background var(--chuyen);
}

.menu-chinh > li > a:hover,
.menu-chinh > li:focus-within > a {
    background: rgba(0, 0, 0, .18);
    color: var(--mau-chu-dao);
}

/* Mục đang xem: nền trắng, chữ đỏ — giống thiết kế mẫu */
.menu-chinh > li.dang-xem > a {
    background: var(--mau-nen-khoi);
    color: var(--mau-chinh);
}

/* Mũi tên báo hiệu có menu con */
.menu-chinh .co-con > a::after {
    content: "";
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: .85;
}

/* ---- Menu con ---- */
.menu-con {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: var(--mau-nen-khoi);
    border-radius: 0 0 var(--bo-goc) var(--bo-goc);
    box-shadow: var(--bong-noi);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all var(--chuyen);
}

/* Hiện khi di chuột HOẶC khi con trỏ bàn phím đi vào — bảo đảm dùng được bằng phím Tab */
.menu-chinh > li:hover > .menu-con,
.menu-chinh > li:focus-within > .menu-con {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-con a {
    display: block;
    padding: 9px 16px;
    font-size: .875rem;
    font-weight: 500;
}
.menu-con a:hover { background: var(--mau-nen-nhat); color: var(--mau-chinh); }

/* ---- Nút tìm kiếm và nút mở ngăn kéo ---- */
.nut-thanh-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: none;
    color: var(--mau-chu-dao);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--chuyen);
}
.nut-thanh-menu:hover { background: rgba(0, 0, 0, .18); }
.nut-thanh-menu svg { width: 20px; height: 20px; }

.nut-ngan-keo { display: none; }

/* ---- Ô tìm kiếm bung ra ---- */
.o-tim-kiem {
    display: none;
    padding: 12px 0;
    background: var(--mau-chinh-dam);
}
.o-tim-kiem.mo { display: block; }
.o-tim-kiem form { display: flex; gap: 8px; }

/* ============ 4. Ngăn kéo trên điện thoại ============ */
.ngan-keo {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 200;
    width: 290px;
    max-width: 85vw;
    padding: 18px;
    overflow-y: auto;
    background: var(--mau-nen-khoi);
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.ngan-keo.mo { transform: translateX(0); }

.ngan-keo__dong {
    position: absolute;
    top: 12px; right: 12px;
    width: 34px; height: 34px;
    font-size: 22px;
    line-height: 1;
    color: var(--mau-chu);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.ngan-keo ul { margin: 30px 0 0; padding: 0; list-style: none; }
.ngan-keo li { border-bottom: 1px solid var(--mau-vien); }
.ngan-keo a {
    display: block;
    padding: 12px 4px;
    font-size: .9375rem;
    font-weight: 600;
}
.ngan-keo .menu-con {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    padding: 0 0 6px 14px;
}
.ngan-keo .menu-con a { font-weight: 400; font-size: .875rem; }

/* Lớp phủ tối phía sau ngăn kéo */
.lop-phu {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--chuyen);
}
.lop-phu.mo { opacity: 1; visibility: visible; }

/* ============ 5. Khung thân trang: nội dung + cột bên ============ */
.than-trang { padding: var(--khoang) 0 var(--khoang-lon); }

.co-cot-ben {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rong-cot-ben);
    gap: var(--khoang);
    align-items: start;
}

/* ============ 6. Cột bên ============ */
/*
 * Cột bên cuộn theo trang như nội dung chính, KHÔNG dính (sticky).
 *
 * Cột bên tin tức thường cao hơn màn hình, dính lại thì phần cuối của cột bị
 * kẹt ngoài tầm nhìn, người đọc cuộn mãi cũng không tới được. Để cuộn tự nhiên
 * thì mọi widget đều đọc được hết.
 */
.cot-ben {
    display: flex;
    flex-direction: column;
    gap: var(--khoang);
}

.tien-ich {
    padding: 16px;
    background: var(--mau-nen-khoi);
    border-radius: var(--bo-goc);
    box-shadow: var(--bong);
}

/* Danh sách chuyên mục trong cột bên */
.ds-chuyen-muc { margin: 0; padding: 0; list-style: none; }
.ds-chuyen-muc li + li { border-top: 1px solid var(--mau-vien); }
.ds-chuyen-muc a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 2px;
    font-size: .875rem;
    font-weight: 600;
}
.ds-chuyen-muc a:hover { color: var(--mau-chinh); }
.ds-chuyen-muc svg { width: 17px; height: 17px; flex: none; color: var(--mau-chinh); }
.ds-chuyen-muc .mui-ten { margin-left: auto; opacity: .4; }

/* ============ 7. Chân trang ============ */
.chan-trang {
    color: #C5C8CC;
    background: var(--mau-chan-trang);
}

.chan-trang__cot {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--khoang-lon);
    padding: var(--khoang-lon) 0;
}

.chan-trang h3 {
    margin-bottom: 16px;
    font-size: .875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #FFFFFF;
}

.chan-trang p { font-size: .8125rem; line-height: 1.7; }
.chan-trang a { color: #C5C8CC; font-size: .8125rem; }
.chan-trang a:hover { color: #FFFFFF; }
.chan-trang ul { margin: 0; padding: 0; list-style: none; }
.chan-trang li { margin-bottom: 9px; }

.chan-trang__hieu img {
    max-height: 52px;
    width: auto;
    margin-bottom: 12px;
    /* Logo nền trắng đặt trên nền tối: chừa nền trắng cho hài hoà */
    background: #FFFFFF;
    padding: 6px 10px;
    border-radius: var(--bo-goc-nho);
}

.mang-xa-hoi { display: flex; gap: 8px; margin-top: 14px; }
.mang-xa-hoi a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    transition: background var(--chuyen);
}
.mang-xa-hoi a:hover { background: var(--mau-chinh); }
.mang-xa-hoi svg { width: 15px; height: 15px; }

.lien-he-doc li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .8125rem;
}
.lien-he-doc svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--mau-chinh); }

.chan-trang__ban-quyen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--khoang-nho);
    padding: 16px 0;
    font-size: .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* ============ 8. Nút lên đầu trang ============ */
.len-dau-trang {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    color: var(--mau-chu-dao);
    background: var(--mau-chinh);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--bong-noi);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--chuyen);
}
.len-dau-trang.hien { opacity: 1; visibility: visible; }
.len-dau-trang svg { width: 19px; height: 19px; }

/* ============================================================
   9. ĐIỆN THOẠI VÀ MÁY TÍNH BẢNG
   ============================================================ */

/* ---- Dưới 1100px: cột bên hẹp lại ---- */
@media (max-width: 1100px) {
    :root { --rong-cot-ben: 280px; }
    .menu-chinh > li > a { padding: 0 11px; font-size: .75rem; }
}

/* ---- Dưới 900px: chuyển sang một cột, bật ngăn kéo ---- */
@media (max-width: 900px) {
    .co-cot-ben { grid-template-columns: minmax(0, 1fr); }

    /* Ẩn menu ngang, hiện nút ngăn kéo */
    .menu-chinh { display: none; }
    .nut-ngan-keo { display: flex; }

    .thanh-menu__trong { justify-content: space-between; }

    /* Đầu trang gọn lại: bỏ băng quảng cáo cạnh logo */
    .dau-trang__bang { display: none; }
    .dau-trang__chinh { padding: 10px 0; }
    .dau-trang__hieu img { max-height: 46px; }

    .chan-trang__cot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--khoang);
        padding: var(--khoang) 0;
    }
}

/* ---- Dưới 600px ---- */
@media (max-width: 600px) {
    :root { --khoang: 16px; --khoang-lon: 28px; }

    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    .chan-trang__cot { grid-template-columns: minmax(0, 1fr); }
    .chan-trang__ban-quyen { justify-content: center; text-align: center; }
    .dau-trang__khau-hieu { display: none; }
}

/* Chưa đặt logo thì chân trang hiện tên website bằng chữ */
.chan-trang__ten {
    margin-bottom: 12px;
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
}

/* ============ 10. Biểu tượng gõ thẳng vào tiêu đề menu ============ */
/*
 * Nhiều website gắn biểu tượng vào menu bằng cách gõ thẻ vào ô tiêu đề, ví dụ:
 *   <i class="fas fa-home"></i> Trang chủ
 * Giao diện không tự nạp bộ phông biểu tượng nào — muốn dùng thì cài plugin
 * Font Awesome hoặc bộ tương đương. Phần CSS dưới đây chỉ lo canh chỉnh cho đẹp.
 */
.menu-chinh a > i,
.menu-chinh a > span[class*="fa-"],
.ngan-keo a > i,
.ngan-keo a > span[class*="fa-"] {
    flex: none;
    /* Biểu tượng hơi nhỏ hơn chữ một chút thì nhìn cân, vì chữ menu đang viết hoa */
    font-size: .9375em;
    line-height: 1;
}

/* Ngăn kéo trên điện thoại dùng chữ thường nên cho biểu tượng cách chữ một khoảng */
.ngan-keo a { display: flex; align-items: center; gap: 8px; }