/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.3.1
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* ==========================================================================
   MEGA MENU — dropdown danh mục trải ngang nhiều cột
   Theme cha đổ dropdown thành 1 cột dọc (min-width:200px), nên Electronics
   24 mục con thành một cột dài quá màn hình. Dưới đây giữ nguyên cơ chế
   ẩn/hiện của theme cha (opacity + visibility + transform khi hover) và chỉ
   đổi phần bố cục sang panel nhiều cột.
   Chỉ áp dụng từ 1024px — dưới mốc đó theme cha dùng drawer mobile riêng.
   ========================================================================== */
@media (min-width: 1024px) {

    /* Panel neo theo .header__inner (nằm trong .container, tối đa 1200px)
       nên không bao giờ tràn ra ngoài mép màn hình, dù hover mục ngoài cùng phải. */
    .header__inner { position: relative; }
    .header__menu > .menu-item-has-children { position: static; }

    /* Bảo hiểm: header.css đặt .header__nav{overflow:hidden} làm fallback và chỉ
       gỡ khi JS priority-nav gắn .js-priority-nav-ready. Nếu JS lỗi hoặc chậm thì
       panel bị cắt cụt, nên ép visible luôn. */
    .header__nav { overflow: visible; }

    .header__menu > .menu-item-has-children > .sub-menu {
        left: 0;
        right: auto;
        width: 720px;
        max-width: 100%;
        padding: 18px 22px 20px;
        /* Chia cột: trình duyệt tự rải mục con xuống 3 cột theo chiều dọc rồi
           sang cột kế, nên panel rộng ra thay vì dài xuống. */
        column-count: 3;
        column-gap: 28px;
    }

    /* Không để một mục bị xé đôi giữa hai cột */
    .header__menu > .menu-item-has-children > .sub-menu > li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Tên danh mục dài (Uninterruptible Power Supplies, Smartwatches & Fitness
       Trackers) phải được xuống dòng trong cột, không thì chữ tràn sang cột bên. */
    .header__menu > .menu-item-has-children > .sub-menu a {
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    /* "All Categories" có 17 mục -> panel rộng hết container, 4 cột */
    .header__menu > .menu-item-type-custom > .sub-menu {
        width: 100%;
        column-count: 4;
    }
}

/* ==========================================================================
   KHỐI DANH MỤC TRANG CHỦ
   Mỗi danh mục là một khối: tiêu đề + bài dẫn (ảnh lớn, sapo) + danh sách
   bài còn lại lồng bên cạnh. Các khối đảo trái/phải xen kẽ để có nhịp.
   Dùng token của theme cha nên tự đúng ở cả light lẫn dark mode.
   ========================================================================== */

/* ---- Nhãn danh mục nhỏ ---- */
.rs-kicker {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
}
.rs-kicker:hover { text-decoration: underline; }
.rs-kicker--sm { font-size: .6875rem; letter-spacing: .05em; }

/* ---- Khối danh mục ---- */
.rs-cat { padding: var(--space-12) 0; }
/* Nền so le: khối lẻ tô nền phụ để mắt tách được từng danh mục khi cuộn */
.rs-cat--flip { background: var(--color-bg-alt); }

.rs-cat__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.rs-cat__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.rs-cat__title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: .8em;
    margin-right: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    vertical-align: -.05em;
}
.rs-cat__title a { color: var(--color-text); text-decoration: none; }
.rs-cat__title a:hover { color: var(--color-primary); }
.rs-cat__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.rs-cat__all {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}
.rs-cat__all i { transition: transform .18s ease; }
.rs-cat__all:hover i { transform: translateX(3px); }

/* Bài dẫn bên trái, danh sách bên phải. Khối lẻ đảo bên bằng order —
   DOM giữ nguyên thứ tự nên đọc bằng bàn phím/screen reader vẫn đúng mạch. */
.rs-cat__body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    align-items: start;
}
.rs-cat--flip .rs-lead { order: 2; }
.rs-cat--flip .rs-sub  { order: 1; }

/* ---- Bài dẫn ---- */
.rs-lead__media {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
/* Ảnh là ảnh sản phẩm nền trắng moi từ nội dung bài, không phải ảnh biên tập
   cắt sẵn -> contain để không cắt cụt sản phẩm. */
.rs-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .3s ease;
}
.rs-lead__media:hover img { transform: scale(1.03); }
.rs-lead__title {
    margin: var(--space-2) 0 var(--space-3);
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.rs-lead__title a { color: var(--color-text); text-decoration: none; }
.rs-lead__title a:hover { color: var(--color-primary); }
.rs-lead__excerpt {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.rs-lead__meta { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Danh sách bài còn lại ---- */
.rs-sub { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rs-sub__item + .rs-sub__item { border-top: 1px solid var(--color-border-subtle); }
.rs-sub__link {
    display: grid;
    grid-template-columns: auto 72px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color .18s ease;
}
.rs-sub__link:hover { background: var(--color-surface-hover); }
/* Số thứ tự tiếp nối bài dẫn: bài dẫn là 1, danh sách bắt đầu từ 2 */
.rs-sub__num {
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-subtle);
}
.rs-sub__thumb {
    width: 72px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    overflow: hidden;
    display: block;
}
.rs-sub__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-sub__text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rs-sub__title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}
.rs-sub__link:hover .rs-sub__title { color: var(--color-primary); }
.rs-sub__meta { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ---- Dải danh mục mới có 1 bài ---- */
.rs-thin { padding: var(--space-10) 0; border-top: 1px solid var(--color-border); }
.rs-thin__title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-text);
}
.rs-thin__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
.rs-thin__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rs-thin__item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.rs-thin__headline {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .rs-cat { padding: var(--space-8) 0; }
    /* Một cột: bài dẫn luôn lên trước, bỏ đảo bên */
    .rs-cat__body { grid-template-columns: 1fr; gap: var(--space-6); }
    .rs-cat--flip .rs-lead,
    .rs-cat--flip .rs-sub { order: 0; }
}
@media (max-width: 600px) {
    .rs-cat__head { flex-wrap: wrap; gap: var(--space-2); }
    .rs-cat__all { margin-left: 0; width: 100%; }
    .rs-lead__title { font-size: var(--text-xl); }
    .rs-sub__link { grid-template-columns: auto 60px 1fr; gap: var(--space-2); }
    .rs-sub__thumb { width: 60px; height: 48px; }
    .rs-thin__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LOGO THEO CHE DO SANG/TOI
   the_custom_logo() cua theme cha chi xuat MOT anh cho ca hai che do, va theme
   khong co thiet lap logo rieng cho dark mode. Wordmark chu den se chim hoan
   toan tren nen toi, nen doi sang ban chu trang bang thuoc tinh content.
   ========================================================================== */
[data-theme="dark"] .custom-logo,
[data-theme="dark"] .footer__logo-img {
    content: url("/wp-content/uploads/reviewscope-logo-dark-v2.png");
}