/*
Theme Name: NghiaAffiliate Child
Theme URI: https://lat.vn/
Description: Child theme for NghiaAffiliate Theme. Add your custom styles and overrides here.
Author: NghiaAffiliate Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 1.0.8
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: nghiaaffiliate-child
*/

/* ==========================================================================
   Typography: Single Global Font - Plus Jakarta Sans
   ========================================================================== */
:root {
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.site-title,
.site-description,
.entry-title,
.entry-content,
.post-card-title,
.post-card__title,
.post-hero__title,
.amh-hero__title,
.amh-card__body h3,
.aprg-product-card,
.aprg-product-card * {
    font-family: var(--font-sans) !important;
}

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

/* 5 Columns for posts-grid-v2 */
.posts-grid-v2--5col {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3, 0.75rem);
}

@media (min-width: 768px) {
    .posts-grid-v2--5col {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .posts-grid-v2--5col {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1280px) {
    .posts-grid-v2--5col {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================================================
   Header Navigation: 14px Font Size & 3-Level Menu Support
   ========================================================================== */

/* 14px font size for top menu & submenus */
.header__menu > .menu-item > a,
.header__menu > .menu-item--more > button {
    font-size: 14px !important;
}

.header__menu .sub-menu {
    overflow: visible !important;
}

.header__menu .sub-menu li a,
.header__menu > .menu-item--more .more-menu__dropdown li a {
    font-size: 14px !important;
}

/* Level 2 items with children - container positioning */
.header__menu .sub-menu > .menu-item-has-children {
    position: relative;
}

.header__menu .sub-menu > .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Right chevron indicator for Level 2 items that have children */
.header__menu .sub-menu > .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.65;
    flex-shrink: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.header__menu .sub-menu > .menu-item-has-children:hover > a::after {
    opacity: 1;
    transform: rotate(45deg) scale(1.15);
}

/* Level 3 Submenu Flyout (Desktop) */
.header__menu .sub-menu .sub-menu {
    position: absolute;
    top: -8px;
    left: 100%;
    margin-left: 6px;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1005;
}

/* Hover bridge between level 2 item and flyout submenu */
.header__menu .sub-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    width: 10px;
}

/* Reveal Level 3 on hover or keyboard focus */
.header__menu .sub-menu > .menu-item-has-children:hover > .sub-menu,
.header__menu .sub-menu > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* Highlight parent level 2 item when its flyout is active */
.header__menu .sub-menu > .menu-item-has-children:hover > a,
.header__menu .sub-menu > .menu-item-has-children:focus-within > a {
    color: var(--amh-blue-dark, var(--color-text));
    background-color: var(--amh-blue-soft, var(--color-surface-hover));
}

/* Flyout to the left if item is the last one or inside 'more' dropdown */
.header__menu > .menu-item:last-child .sub-menu .sub-menu,
.header__menu > .menu-item--more .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 6px;
    transform: translateX(6px);
}

.header__menu > .menu-item:last-child .sub-menu .sub-menu::before,
.header__menu > .menu-item--more .sub-menu .sub-menu::before {
    left: auto;
    right: -10px;
}

.header__menu > .menu-item:last-child .sub-menu > .menu-item-has-children:hover > .sub-menu,
.header__menu > .menu-item--more .sub-menu > .menu-item-has-children:hover > .sub-menu {
    transform: translateX(0);
}

.header__menu > .menu-item:last-child .sub-menu > .menu-item-has-children > a::after,
.header__menu > .menu-item--more .sub-menu > .menu-item-has-children > a::after {
    transform: rotate(-135deg);
}

.header__menu > .menu-item:last-child .sub-menu > .menu-item-has-children:hover > a::after,
.header__menu > .menu-item--more .sub-menu > .menu-item-has-children:hover > a::after {
    transform: rotate(-135deg) scale(1.15);
}

/* Mobile Nav: 3-level indentation */
.mobile-nav__simple-list .mobile-nav__simple-list {
    margin: 4px 0 8px 12px;
    padding-left: 12px;
    border-left: 2px solid var(--color-border-subtle, rgba(0, 0, 0, 0.1));
    list-style: none;
}

.mobile-nav__simple-list .mobile-nav__simple-list li a {
    font-size: 13px !important;
    padding: 6px 12px;
    opacity: 0.88;
}

/* ============================================================
   RESPONSIVE SPECS TABLE: STICKY FIRST COLUMN ON MOBILE
   ============================================================ */

/* 1. Reset Gutenberg Block Table Wrapper để không bị nhân đôi border hoặc bẫy scroll */
.post-content .wp-block-table,
.acms-gear-post .post-content .wp-block-table {
    overflow-x: visible !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 24px 0 !important;
}

/* 2. Container bảng cuộn mượt, cho phép chữ tự xuống dòng */
.post-content table,
.acms-gear-post .post-content table,
.acms-gear-post .post-content :is(table, .wp-block-table) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: normal !important; /* Hủy bỏ ép dãn 1 hàng */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 24px 0 !important;
    border: 1px solid var(--content-border, #e2e8f0) !important;
    border-radius: 8px !important;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* 3. Cố định chiều rộng các ô để không bị xô lệch khi cuộn */
.post-content table th,
.post-content table td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--content-border, #e2e8f0) !important;
    border-right: 1px solid var(--content-border, #e2e8f0) !important;
}

/* 4. Ghim chặt cột đầu tiên (Tên thông số) ở mép trái màn hình */
.post-content table th:first-child,
.post-content table td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
    min-width: 140px !important;
    max-width: 160px !important;
    font-weight: 600 !important;
    background-color: #f8fafc !important; /* Nền sáng tránh đè chữ khi cuộn */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.08) !important; /* Đổ bóng tách biệt cột */
}

/* Hỗ trợ Dark Mode nếu site có bật giao diện tối */
[data-theme="dark"] .post-content table th:first-child,
[data-theme="dark"] .post-content table td:first-child {
    background-color: #1e293b !important;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3) !important;
}

/* 5. Các cột sản phẩm phía sau (AMD, Intel...) */
.post-content table th:not(:first-child),
.post-content table td:not(:first-child) {
    min-width: 180px !important; /* Đảm bảo đủ độ rộng đọc thoải mái trên điện thoại */
}

/* 6. Tùy chỉnh thanh cuộn ngang mảnh đẹp trên điện thoại */
.post-content table::-webkit-scrollbar {
    height: 5px !important;
}
.post-content table::-webkit-scrollbar-track {
    background: transparent !important;
}
.post-content table::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}