/*
Theme Name: HTH Kiếm Tiền YouTube AZ
Theme URI: https://kiemtienyoutubeaz.hthdigi.com
Author: Kiếm Tiền YouTube AZ
Author URI: https://hthdigi.com
Description: Theme code tay PHP + ACF cho website Kiếm Tiền YouTube AZ. Header và footer dựng theo mẫu Figma đã chốt (header kính mờ + menu pill, footer tối 4 cột). Không dùng Elementor.
Version: 1.9.26
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hth-kiemtien
*/

/* ============================================================
   HTH Kiếm Tiền YouTube AZ — toàn bộ CSS của theme nằm ở đây.
   Bảng màu theo mẫu Figma đã chốt:
   nền trang #131317 · header #16161E (mờ 75%) · pill #23232A ·
   pill active #2A292E · vàng #FAC12C · đỏ #DC2626 ·
   footer #1B1B1F · kẻ footer #1F1F23 · chữ phụ #9A9AA6
   Khung nội dung 1180px khớp header. Font Be Vietnam Pro.
   ============================================================ */

:root {
    --bg: #131317;
    --surface: #16161e;
    --card: #1e1e28;
    --pill: rgba(14, 14, 18, 0.8);
    --pill-active: #2a292e;
    --gold: #fac12c;
    --yellow: #ffc531;
    --red: #dc2626;
    --red-dark: #b91c1c;
    --text: #f4f4f6;
    --muted: #9a9aa6;
    --nav-text: #d1d5db;
    --footer-bg: #1b1b1f;
    --footer-line: #1f1f23;
    --avatar-bg: #f6c9ce;
    --container: 1180px;
    --header-h: 80px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", "Be Vietnam Pro", "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.hero-title, .section-title, .page-title, .cta-title {
    font-family: "Plus Jakarta Sans", "Manrope", "Be Vietnam Pro", sans-serif;
}

img { max-width: 100%; height: auto; }
/* Mặc định toàn site theo mẫu Stitch: link KHÔNG gạch chân.
   Chỉ vài link chữ nhỏ được gạch chân khi di chuột (hover:underline trong mẫu). */
a { color: inherit; text-decoration: none; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------- Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(22, 22, 30, 0.75);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

/* Logo header: cao 56px (tăng từ 46px theo yêu cầu của anh 05/11 cho nổi bật
   hơn, vẫn gọn trong thanh header ~80px, không tràn khung) */
.brand .custom-logo-link {
    display: inline-flex;
    align-items: center;
    height: 56px;
}

.brand img,
.brand .custom-logo,
.brand .hthk-logo {
    display: block;
    width: auto;
    height: 56px;
    max-height: 56px;
    max-width: 300px;
    object-fit: contain;
}

.brand-text {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--text);
    white-space: nowrap;
}

/* Menu trong pill tối bo tròn hoàn toàn */
.main-nav { margin: 0 auto; }

.menu-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--pill);
    border-radius: 9999px;
}

.menu-pill .menu-item a {
    display: block;
    padding: 6px 16px;
    border-radius: 9999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}

.menu-pill .menu-item a:hover { color: #e4e1e7; background: var(--pill-active); }

/* Active: chữ vàng trên pill con */
.menu-pill .menu-item.current-menu-item > a,
.menu-pill .menu-item.current_page_item > a,
.menu-pill .menu-item.current-menu-parent > a {
    background: var(--pill-active);
    color: var(--gold);
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
    margin-left: auto;
}

.main-nav + .header-actions { margin-left: 0; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.icon-btn:hover { background: var(--pill-active); color: #ffffff; }

.icon-btn { position: relative; }

/* Chuông thông báo: huy hiệu số bài mới + hiệu ứng lắc theo nhịp
   (lắc trong ~0,6 giây đầu của chu kỳ 3,2 giây rồi đứng yên). */
.bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #141419;
}

.bell svg { animation: hthk-bell-ring 3.2s ease-in-out infinite; transform-origin: 50% 0; }

@keyframes hthk-bell-ring {
    0%, 100% { transform: rotate(0deg); }
    3% { transform: rotate(14deg); }
    6% { transform: rotate(-12deg); }
    9% { transform: rotate(9deg); }
    12% { transform: rotate(-6deg); }
    15% { transform: rotate(3deg); }
    18% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .bell svg { animation: none; }
}

.btn-register {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 9999px;
    background: #e62117;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 10px 25px rgba(230, 33, 23, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
    /* Hiệu ứng nhấp nháy nổi bật cho nút CTA header (yêu cầu của anh 04/11):
       vòng hào quang đỏ lan tỏa + nút sáng lên theo nhịp 1.8s. */
    animation: hthk-cta-pulse 1.8s ease-in-out infinite;
}

.btn-register:hover { background: #cc1810; transform: scale(1.05); }

@keyframes hthk-cta-pulse {
    0%, 100% { box-shadow: 0 10px 25px rgba(230, 33, 23, 0.3), 0 0 0 0 rgba(230, 33, 23, 0.45); filter: brightness(1); }
    50% { box-shadow: 0 10px 25px rgba(230, 33, 23, 0.45), 0 0 0 12px rgba(230, 33, 23, 0); filter: brightness(1.13); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-register { animation: none; }
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fca5a5;
    color: #7f1d1d;
}

/* Nút Tài khoản dạng pill có chữ, nằm cạnh chuông để khách dễ thấy
   (yêu cầu của anh 04/11 — thay vòng avatar tròn khó nhận biết). */
.account-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 9999px;
    background: rgba(255, 197, 49, 0.12);
    border: 1px solid rgba(255, 197, 49, 0.45);
    color: var(--gold);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.account-pill:hover { background: var(--gold); color: #131317; }
.account-pill .acc-sep { opacity: 0.55; margin: 0 1px; font-weight: 400; }

@media (max-width: 640px) {
    .account-pill span { display: none; }
    .account-pill { padding: 8px 10px; }
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

/* ---------------------------------------------------------- Nội dung */

.site-main { min-height: 55vh; }

.page-content { padding-top: 48px; padding-bottom: 72px; }

.page-title {
    margin: 0 0 20px;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 800;
}

.entry-content { color: #e8e8ee; }
.entry-content h2 { font-size: 28px; font-weight: 700; margin: 32px 0 12px; }
.entry-content h3 { font-size: 22px; font-weight: 700; margin: 26px 0 10px; }
.entry-content p { margin: 0 0 16px; }
.entry-content a { color: var(--gold); }
.entry-content ul, .entry-content ol { margin: 0 0 16px; padding-left: 22px; }

/* WooCommerce: giữ nền tối đồng bộ */
.woocommerce .site-main,
.woocommerce-page .site-main { background: var(--bg); }

/* ---------------------------------------------------------- Footer */

.site-footer {
    background: var(--footer-bg);
    margin-top: 0;
    box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.5);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1.1fr 1.15fr;
    gap: 32px;
    padding: 48px 20px 0;
}

/* Logo footer: cao 50px (tăng từ 42px theo yêu cầu của anh 05/11) */
.footer-about .brand img,
.footer-about .brand .custom-logo,
.footer-about .brand .hthk-logo { height: 50px; max-height: 50px; max-width: 280px; }

.footer-desc {
    margin: 18px 0 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.footer-tagline {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}

.footer-title {
    margin: 6px 0 18px;
    color: var(--text);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li { margin: 0 0 12px; }

.footer-links a {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--gold); }

.footer-contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
}

.footer-contact .contact-ic {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 2px;
    color: var(--gold);
}

.footer-contact a {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact a:hover { color: var(--gold); }

/* Thanh bản quyền dạng panel bo góc như mẫu chi tiết tin tức */
.footer-bottom { padding: 32px 0 40px; }

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(31, 31, 35, 0.45);
    border-radius: 12px;
    padding: 16px 20px;
}

.footer-contact li:nth-child(2) a { color: #ffffff; font-weight: 600; }

.copyright {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.footer-legal { margin: 0; display: flex; gap: 26px; }

.footer-legal a {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover { color: var(--gold); }

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
    .nav-toggle { display: inline-flex; }

    .main-nav {
        position: absolute;
        top: var(--header-h);
        left: 12px;
        right: 12px;
        margin: 0;
        display: none;
    }

    .main-nav.open { display: block; }

    .menu-pill {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px;
        border-radius: 20px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    }

    .menu-pill .menu-item a { padding: 12px 16px; border-radius: 12px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .header-inner { gap: 14px; }
    .brand-text { font-size: 17px; }
    .btn-register { padding: 10px 16px; font-size: 14px; }
    .icon-btn, .avatar { width: 36px; height: 36px; }
    .icon-btn { display: none; }

    .page-content { padding-top: 36px; padding-bottom: 56px; }
    .page-title { font-size: 30px; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding: 44px 20px 34px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-legal { justify-content: center; }
}

/* ---------------------------------------------------------- Trang chủ */

.home-hero { padding: 64px 0 56px; }

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}

.hero-title {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 800;
}

.hero-subtitle {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.65;
}

.hero-media img {
    display: block;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.btn-gold {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 9999px;
    background: var(--gold);
    color: #131317;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn-gold:hover { background: var(--yellow); transform: translateY(-1px); }

.home-section { padding: 48px 0; }

.section-title {
    margin: 0 0 30px;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 800;
    text-align: center;
}

.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.info-card {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 26px 24px;
}

.info-card-dot {
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--gold);
}

.info-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.4; }
.info-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--gold);
    color: #131317;
    font-size: 20px;
    font-weight: 800;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.doc-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.doc-card-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #0B0B10; }

.doc-card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }

.doc-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
.doc-card-title a { text-decoration: none; }
.doc-card-title a:hover { color: var(--gold); }

.doc-card-price { margin: 0; color: var(--gold); font-size: 17px; font-weight: 700; }
.doc-card-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }

.doc-card-meta { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.2px; }
.doc-card-excerpt { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.doc-card-pricebox {
    margin-top: auto;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.doc-card-pricebox .doc-card-price { font-size: 19px; }

.doc-card-media { position: relative; display: block; }

.doc-badge {
    position: absolute;
    top: 10px;
    padding: 5px 11px;
    border-radius: 9999px;
    background: rgba(10, 10, 14, 0.78);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.doc-badge.left { left: 10px; }

.doc-badge.vip {
    right: 10px;
    background: linear-gradient(135deg, #ffc531, #e5a91e);
    color: #131317;
}

.doc-vip-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 700;
}

.doc-buy-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
}

.doc-buy-label { color: var(--muted); font-size: 13px; }

.btn-doc {
    margin-top: auto;
    display: inline-block;
    padding: 10px 18px;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-doc:hover { background: var(--red-dark); }

.cta-band {
    margin-top: 24px;
    padding: 56px 0;
    background: linear-gradient(135deg, #e53935 0%, #7a1010 100%);
}

.cta-band-inner { text-align: center; }

.cta-band h2 {
    margin: 0 0 24px;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 800;
    color: #ffffff;
}

.btn-light {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 9999px;
    background: #ffffff;
    color: #b91c1c;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.btn-light:hover { transform: translateY(-1px); }

@media (max-width: 1024px) {
    .doc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .hero-grid { grid-template-columns: 1fr; gap: 28px; }
    .hero-title { font-size: 32px; }
    .home-hero { padding: 44px 0 36px; }
    .home-section { padding: 36px 0; }
    .section-title { font-size: 25px; }
    .cards-3 { grid-template-columns: 1fr; }
    .cta-band h2 { font-size: 24px; }
}

@media (max-width: 480px) {
    .doc-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Giới Thiệu */

.cards-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.check-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 34px 34px 30px;
}

.check-title { margin: 0 0 20px; font-size: 24px; font-weight: 800; }

.check-list { margin: 0 0 26px; padding: 0; list-style: none; }

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 16px;
}

.check-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--gold);
    color: #131317;
}

.btn-zalo {
    display: block;
    padding: 14px 24px;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.btn-zalo:hover { background: var(--red-dark); }

/* ------------------------------------------------- Tài Liệu (cửa hàng) */

.shop-head { padding: 48px 0 8px; text-align: center; }
.shop-title { margin-bottom: 10px; }
.shop-sub { margin: 0 auto 26px; max-width: 640px; color: var(--muted); font-size: 16px; }

.shop-search {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 20px;
    padding: 6px;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
}

.shop-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.shop-search button {
    padding: 10px 24px;
    border: 0;
    border-radius: 9999px;
    background: var(--red);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.shop-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.chip {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9999px;
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip.active { background: var(--pill-active); border-color: var(--gold); color: var(--gold); font-weight: 600; }

.shop-grid { grid-template-columns: repeat(3, 1fr); }

.shop-paging { margin-top: 36px; display: flex; gap: 8px; justify-content: center; }

.shop-paging .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: var(--nav-text);
    text-decoration: none;
}

.shop-paging .page-numbers.current { background: var(--pill-active); border-color: var(--gold); color: var(--gold); font-weight: 700; }

.shop-empty { text-align: center; color: var(--muted); font-size: 16px; }
.shop-empty a { color: var(--gold); }

/* --------------------------------------- Chi tiết tài liệu (WooCommerce) */

.single-product-wrap .product { color: var(--text); }

.single-product-wrap .woocommerce-product-gallery { margin-bottom: 24px; }
.single-product-wrap .woocommerce-product-gallery img { border-radius: 16px; }

.single-product-wrap .summary .product_title { font-size: 32px; line-height: 1.3; font-weight: 800; margin: 0 0 14px; }

.single-product-wrap .summary .price { color: var(--gold); font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.single-product-wrap .summary .price del { color: var(--muted); font-weight: 400; margin-right: 8px; }

.product-download-info {
    display: inline-block;
    margin: 0 0 18px;
    padding: 8px 16px;
    border: 1px solid rgba(250, 193, 44, 0.45);
    border-radius: 9999px;
    color: var(--gold);
    font-size: 14px;
    font-weight: 600;
}

.single-product-wrap .single_add_to_cart_button,
.single-product-wrap .add_to_cart_button {
    background: var(--red) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 13px 30px !important;
    font-weight: 700 !important;
}

.single-product-wrap .quantity .qty {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: var(--text);
    padding: 10px;
}

.single-product-wrap .woocommerce-tabs .tabs li { background: var(--card); border-color: rgba(255, 255, 255, 0.1); }
.single-product-wrap .woocommerce-tabs .tabs li a { color: var(--nav-text); }
.single-product-wrap .woocommerce-tabs .tabs li.active { background: var(--pill-active); }
.single-product-wrap .woocommerce-tabs .tabs li.active a { color: var(--gold); }

.single-product-wrap .related .product,
.single-product-wrap .upsells .product { color: var(--text); }

/* ------------------------------------------------- Câu Hỏi (FAQ) */

.faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 620px;
    margin: 0 auto 20px;
    padding: 8px 8px 8px 20px;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    color: var(--muted);
}

.faq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.faq-search button {
    padding: 7px 14px;
    border: 0;
    border-radius: 9999px;
    background: var(--pill-active);
    color: var(--gold);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex: none;
}

.faq-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }

.faq-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

.faq-item {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.faq-item.open { border-color: rgba(250, 193, 44, 0.5); }

.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.faq-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--red);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq-a p { margin: 0 0 10px; }
.faq-a a { color: var(--gold); }

.faq-noresult { text-align: center; color: var(--muted); margin-top: 26px; }
.faq-noresult a { color: var(--gold); }

/* ------------------------------------------------- Tin Tức */

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
}

.post-card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.post-meta { margin: 0; color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.3px; }
.post-card-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.45; }
.post-card-title a { text-decoration: none; }
.post-card-title a:hover { color: var(--gold); }
.post-card-excerpt { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.news-empty {
    max-width: 640px;
    margin: 0 auto;
    padding: 36px 30px;
    background: var(--card);
    border-radius: 16px;
    text-align: center;
    color: var(--muted);
}

.news-empty a { color: var(--gold); }

.single-meta { margin-bottom: 10px; }
.single-thumb img { display: block; width: 100%; border-radius: 20px; margin-bottom: 28px; }
.related-title { margin-top: 52px; }

/* ------------------------------------------------- Trang chính sách */

.policy-wrap { max-width: 900px; }
.policy-wrap .entry-content { font-size: 16px; line-height: 1.8; color: #dcdce4; }
.policy-wrap .entry-content h2 { color: var(--text); font-size: 24px; margin-top: 36px; }
.policy-wrap .entry-content h3 { color: var(--gold); font-size: 19px; margin-top: 28px; }

/* ------------------------------------------------- Responsive bổ sung */

@media (max-width: 1024px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cards-values { grid-template-columns: 1fr; }
    .check-card { padding: 26px 22px; }
    .single-product-wrap .summary .product_title { font-size: 26px; }
}

@media (max-width: 480px) {
    .shop-grid { grid-template-columns: 1fr; }
    .faq-q { font-size: 15px; padding: 16px 18px; }
}

/* --------------------------------------- Trang chủ v1.3.0 (bản Stitch "Creator Velocity") */

.home-hero.v13 {
    position: relative;
    padding: 72px 0 64px;
    overflow: hidden;
}

.home-hero.v13::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(560px 340px at 85% -60px, rgba(230, 33, 23, 0.28), transparent 65%),
        radial-gradient(500px 320px at -80px 110%, rgba(255, 197, 49, 0.13), transparent 60%);
    pointer-events: none;
}

.home-hero.v13 .container { position: relative; }

.hero-badge,
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--nav-text);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-hero.v13 .hero-title { font-size: 52px; line-height: 1.16; letter-spacing: -0.01em; }

.grad-text {
    background: linear-gradient(92deg, #ff5a4e 0%, var(--yellow) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions.center { justify-content: center; }

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(230, 33, 23, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hero-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 28px rgba(230, 33, 23, 0.55); }

.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #ffffff; }

.hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 38px; }

.hero-stat { display: flex; align-items: center; gap: 10px; }

.hero-stat-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 197, 49, 0.14);
    color: var(--yellow);
}

.hero-stat-text { display: flex; flex-direction: column; line-height: 1.25; }
.hero-stat-text strong { font-size: 16px; font-weight: 800; }
.hero-stat-text small { color: var(--muted); font-size: 12.5px; }

/* Thẻ showcase sản phẩm bán chạy */
.showcase-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;
    background: rgba(22, 22, 30, 0.85);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
}

.showcase-media { position: relative; display: block; }
.showcase-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.showcase-label {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(10, 10, 14, 0.72);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.showcase-label .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff4d42; }

.showcase-body { padding: 20px 22px 22px; }

.showcase-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

.showcase-badge {
    padding: 5px 12px;
    border: 1px solid rgba(255, 197, 49, 0.4);
    border-radius: 9999px;
    background: rgba(255, 197, 49, 0.12);
    color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.showcase-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--yellow); font-weight: 800; font-size: 15px; }

.showcase-title { margin: 0 0 12px; font-size: 20px; font-weight: 800; line-height: 1.35; }
.showcase-title a { text-decoration: none; }
.showcase-title a:hover { color: var(--yellow); }

.showcase-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.showcase-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; }
.showcase-meta svg { color: #ff6a3d; }

.showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--yellow);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
}

/* Đầu section */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.section-head .section-title { margin-bottom: 12px; }
.section-badge { margin-bottom: 14px; }
.section-badge.left { margin-bottom: 12px; }

.section-sub { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.section-sub.left { margin: 0; }

.section-title.left { text-align: left; margin-bottom: 10px; }

/* Thẻ lý do dạng kính */
.info-card.glass {
    background: rgba(22, 22, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(16px);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.info-card.glass:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 197, 49, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.info-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--yellow);
}

.info-card-bullet {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px !important;
    color: var(--yellow) !important;
    font-size: 14px !important;
    font-weight: 600;
}

.info-card-bullet svg { flex: 0 0 auto; }

/* Khối tài liệu trang chủ */
.docs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.docs-head-text { max-width: 640px; }

.docs-more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--yellow);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 4px;
}

.member-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    padding: 16px 22px;
    border: 1px solid rgba(255, 197, 49, 0.35);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255, 197, 49, 0.1), rgba(22, 22, 30, 0.9) 55%);
}

.member-banner-text { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14.5px; color: var(--nav-text); }
.member-banner-text .sep { color: var(--muted); }
.member-banner-text b { color: var(--yellow); }

.btn-banner {
    flex: 0 0 auto;
    padding: 11px 22px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #ffc531, #e5a91e);
    color: #131317;
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    box-shadow: 0 10px 40px rgba(255, 197, 49, 0.18);
}

.docs-more-wrap { margin-top: 34px; text-align: center; }

.btn-docs-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-docs-more:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 197, 49, 0.4); }

/* Panel chung (3 bước + CTA) */
.panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: rgba(22, 22, 30, 0.85);
    padding: 48px 44px;
}

.step-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.step-card.tint-1 .step-chip { background: rgba(230, 33, 23, 0.16); color: #ff6a5e; }
.step-card.tint-2 .step-chip { background: rgba(255, 197, 49, 0.16); color: var(--yellow); }
.step-card.tint-3 .step-chip { background: rgba(0, 120, 210, 0.2); color: #7cc0ff; }

.cta-panel {
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(620px 300px at 50% -120px, rgba(230, 33, 23, 0.28), transparent 65%),
        rgba(22, 22, 30, 0.92);
}

.cta-title { margin: 0 auto 14px; max-width: 720px; font-size: 38px; line-height: 1.25; font-weight: 800; }
.cta-panel .section-sub { margin-bottom: 30px; }

.cta-trust { margin: 28px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 1024px) {
    .home-hero.v13 .hero-title { font-size: 42px; }
    .docs-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    .home-hero.v13 { padding: 48px 0 40px; }
    .home-hero.v13 .hero-title { font-size: 33px; }
    .hero-stats { gap: 16px; }
    .member-banner { flex-direction: column; align-items: flex-start; }
    .panel { padding: 32px 22px; }
    .cta-title { font-size: 27px; }
    .btn-hero-primary, .btn-hero-ghost { padding: 13px 24px; font-size: 14.5px; }
}

/* Căn chỉnh mặc định của WordPress */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0.5em 1em 0.5em 0; }
.alignright { float: right; margin: 0.5em 0 0.5em 1em; }
.wp-caption { max-width: 100%; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================= v1.4.0 — các trang theo bản Stitch ================= */

/* Dùng chung */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 13.5px; margin: 26px 0 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.crumbs .crumb-current { color: var(--gold); font-weight: 600; }
.crumbs.center { justify-content: center; }
.crumbs-wrap { padding-top: 4px; }
.btn-block { display: flex; justify-content: center; width: 100%; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid #34343e; border-radius: 9999px; color: #fff; font-weight: 700; font-size: 14.5px; background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-red { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 9999px; background: var(--red); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 0 20px rgba(230, 33, 23, 0.35); border: 0; cursor: pointer; }
.btn-red:hover { background: #ff281c; color: #fff; }
.btn-gold-outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1.5px solid var(--gold); border-radius: 9999px; color: var(--gold); font-weight: 700; font-size: 14.5px; background: transparent; }
.btn-gold-outline:hover { background: rgba(255, 197, 49, 0.1); color: var(--gold); }
.btn-zalo-dark { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 9999px; background: #23232a; color: #fff; font-weight: 600; font-size: 14.5px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head-row h2 { margin: 0; }
.head-note { color: var(--muted); font-size: 13px; }
.see-all { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; font-size: 14px; white-space: nowrap; }
.see-all:hover { text-decoration: underline; }
.side-zalo a:hover, .post-cta-zalo a:hover { text-decoration: underline; }
.bar-title { font-size: 26px; padding-left: 14px; border-left: 5px solid var(--gold); line-height: 1.2; }
.bar-title.red { border-left-color: var(--red); }
.kicker { color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 8px; }
.section-title.left { text-align: left; }
.section-title.center { text-align: center; }
.section-head.center { text-align: center; margin-bottom: 26px; }
.section-head.center .panel-badge { display: inline-block; }
.gold-text { color: var(--gold); }
.card { background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 28px; }

/* Tài liệu — panel sở hữu + lọc + panel VIP */
.shop-head-inner { text-align: center; }
.shop-head .hero-badge { display: inline-flex; }
.own-panel { margin: 30px auto 8px; max-width: 880px; background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 26px; text-align: left; }
.own-panel-title { display: flex; align-items: center; gap: 9px; font-size: 18px; margin: 0 0 18px; color: #fff; }
.own-panel-title svg { color: var(--gold); }
.own-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.own-card { background: #17171f; border: 1px solid #26262e; border-radius: 14px; padding: 20px; }
.own-card.vip { border-color: rgba(255, 197, 49, 0.45); background: linear-gradient(160deg, rgba(255, 197, 49, 0.09), #17171f 55%); }
.own-card h3 { display: flex; align-items: center; gap: 8px; font-size: 15.5px; margin: 0 0 10px; }
.own-card p { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.own-note { display: flex; align-items: center; gap: 7px; color: #ff7a70 !important; font-weight: 600; margin: 0 !important; }
.shop-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.shop-filter-row .shop-search { margin: 0; min-width: 250px; }
.shop-chips .chip.active { background: var(--red); border-color: var(--red); color: #fff; }
/* Hàng nút thẻ tài liệu: "Xem Chi Tiết" rộng theo chữ (1 dòng, không bóp
   xuống 2 dòng như lỗi anh chụp 04/11), "Mua Ngay" chiếm phần còn lại. */
.doc-card-btns { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: stretch; }
.btn-doc-ghost { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; background: #23232a; color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn-doc-ghost:hover { background: #2c2c35; color: #fff; }
.doc-card-btns .btn-doc { width: 100%; margin-top: 0; display: inline-flex; align-items: center; justify-content: center; }
.vip-panel { margin-top: 44px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: center; background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 34px; text-align: left; }
.vip-panel h2 { font-size: 27px; margin: 8px 0 10px; }
.vip-panel p { color: var(--muted); margin: 0; }
.vip-panel-actions { display: flex; flex-direction: column; gap: 12px; }
.shop-paging .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 9999px; background: #1b1b22; color: #fff; }
.shop-paging .page-numbers.current { background: var(--red); color: #fff; }

/* Chi tiết tài liệu */
.pd-wrap { padding-bottom: 30px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 34px; align-items: start; }
.pd-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.pd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 9999px; background: #23232a; color: #e8e8ee; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pd-chip.gold { color: var(--gold); border: 1px solid rgba(255, 197, 49, 0.5); background: rgba(255, 197, 49, 0.08); }
.pd-title { font-size: 33px; line-height: 1.25; margin: 0 0 12px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }
.pd-meta span { display: inline-flex; align-items: center; gap: 6px; }
.pd-meta svg { color: var(--gold); }
.pd-hero { position: relative; margin: 0 0 12px; border-radius: 16px; overflow: hidden; }
.pd-hero img { width: 100%; height: auto; display: block; }
.pd-ribbon { position: absolute; top: 14px; right: 0; left: auto; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; padding: 7px 14px; border-radius: 9999px 0 0 9999px; text-transform: uppercase; }
.pd-underimg { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.pd-underimg span { display: inline-flex; align-items: center; gap: 6px; }
.pd-underimg svg { color: var(--gold); }
.pd-sec { margin-top: 34px; }
.pd-sec h2 { font-size: 22px; margin: 0 0 12px; }
.pd-sec > p { color: #c9c9d2; }
.pd-minicards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.pd-minicard { background: var(--card); border: 1px solid #26262e; border-radius: 14px; padding: 18px; }
.pd-minicard-ic { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(230, 33, 23, 0.14); color: #ff6f66; margin-bottom: 10px; }
.pd-minicard h3 { font-size: 15px; margin: 0 0 7px; }
.pd-minicard p { color: var(--muted); font-size: 13.5px; margin: 0; }
.pd-checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 13px; }
.pd-checklist li { display: flex; gap: 10px; align-items: flex-start; color: #d7d7df; font-size: 15px; }
.pd-checklist svg { color: var(--gold); flex: none; margin-top: 2px; }
.pd-checklist.small li { font-size: 13.5px; }
.pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pd-gallery img { width: 100%; height: auto; border-radius: 12px; display: block; }
.pd-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.pd-steps li { background: var(--card); border: 1px solid #26262e; border-radius: 12px; padding: 15px 17px; color: #d7d7df; }
.pd-step-no { display: inline-block; color: var(--gold); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 9px; }
.pd-author { display: flex; gap: 15px; margin-top: 36px; background: var(--card); border: 1px solid rgba(255, 197, 49, 0.4); border-radius: 16px; padding: 20px; align-items: flex-start; }
.pd-author-ic { display: inline-flex; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 197, 49, 0.13); color: var(--gold); }
.pd-author strong { font-size: 16px; }
.pd-author p { color: var(--muted); margin: 5px 0 0; font-size: 14px; }
.pd-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.buy-card { background: var(--card); border: 1px solid #2c2c35; border-radius: 18px; padding: 24px; }
.buy-card-label { color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.buy-card-title { font-size: 21px; margin: 5px 0 16px; }
.vip-box { border: 1.5px solid rgba(255, 197, 49, 0.55); background: linear-gradient(160deg, rgba(255, 197, 49, 0.1), transparent 60%); border-radius: 14px; padding: 17px; }
.vip-box-top { display: flex; justify-content: space-between; color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.vip-box-top span { display: inline-flex; align-items: center; gap: 5px; }
.vip-price { font-size: 17px; margin: 11px 0 4px; }
.vip-price strong { font-size: 27px; color: var(--gold); }
.vip-price span { color: var(--muted); font-size: 12.5px; }
.vip-desc { color: var(--muted); font-size: 13px; margin: 0 0 13px; }
.vip-note { color: var(--gold); font-size: 12.5px; text-align: center; margin: 10px 0 0; }
.buy-divider { text-align: center; color: var(--muted); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin: 20px 0 12px; }
.buy-price { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.buy-price strong { font-size: 29px; }
.buy-price del { color: var(--muted); }
.buy-off { background: var(--red); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.buy-own { color: var(--muted); font-size: 13px; margin: 5px 0 14px; }
.buy-notes { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.buy-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: #d7d7df; }
.buy-notes svg { color: var(--gold); flex: none; margin-top: 1px; }
.buy-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #26262e; }
.buy-trust span { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; text-align: center; }
.buy-trust svg { color: var(--gold); }
.support-card { display: flex; gap: 13px; background: var(--card); border: 1px solid #26262e; border-radius: 16px; padding: 18px; align-items: center; }
.support-ic { display: inline-flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255, 197, 49, 0.13); color: var(--gold); }
.support-card p { color: var(--muted); font-size: 13px; margin: 2px 0; }
.support-card a { color: var(--gold); font-weight: 700; }
.pd-related { margin-top: 52px; }
.related-kicker { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 5px; }

/* Tin tức — danh sách */
.news-featured { margin-bottom: 40px; }
.featured-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 20px; }
.featured-main { background: var(--card); border: 1px solid #26262e; border-radius: 18px; overflow: hidden; }
.featured-media { position: relative; display: block; }
.featured-media img { width: 100%; height: auto; display: block; }
.featured-badge { position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 9999px; text-transform: uppercase; }
.featured-body { padding: 20px 22px 24px; }
.featured-body h3 { font-size: 22px; line-height: 1.35; margin: 6px 0 9px; }
.featured-body h3 a { color: #fff; }
.meta-cat { color: var(--gold); font-weight: 700; }
.featured-side { display: grid; gap: 16px; grid-auto-rows: 1fr; }
.mini-post { display: grid; grid-template-columns: 118px 1fr; gap: 14px; background: var(--card); border: 1px solid #26262e; border-radius: 14px; padding: 12px; align-items: center; }
.mini-media img { width: 118px; height: 86px; object-fit: cover; border-radius: 9px; display: block; }
.mini-cat { color: var(--gold); font-size: 12px; font-weight: 700; margin: 0 0 4px; }
.mini-body h4 { font-size: 14.5px; line-height: 1.4; margin: 0 0 5px; }
.mini-body h4 a { color: #fff; }
.mini-body .post-meta { margin: 0; font-size: 12px; }
.read-more { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 700; font-size: 14px; margin-top: 10px; }
.post-card-media { position: relative; }
.post-cat-chip { position: absolute; top: 10px; left: 10px; background: rgba(10, 10, 14, 0.8); color: var(--gold); font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 9999px; }
.newsletter-panel { margin-top: 48px; background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 36px 30px; text-align: center; }
.newsletter-panel h2 { font-size: 25px; margin: 0 0 9px; }
.newsletter-panel p { color: var(--muted); margin: 0 0 20px; }
.nl-form { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.nl-form input[type="email"] { width: min(430px, 100%); background: #101014; border: 1px solid #34343e; border-radius: 9999px; padding: 13px 20px; color: #fff; font-size: 14.5px; }
.nl-form.col { flex-direction: column; }
.nl-ok { color: #7ee2a0 !important; font-weight: 600; }
.nl-err { color: #ff8a80 !important; font-weight: 600; }
.mentor-strip { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--card); border: 1px solid #26262e; border-radius: 18px; padding: 24px 28px; }
.mentor-strip h2 { font-size: 19px; margin: 0 0 5px; }
.mentor-strip p { color: var(--muted); margin: 0; font-size: 14px; }
.btn-mentor { display: inline-flex; align-items: center; gap: 8px; background: #23232a; color: var(--gold); font-weight: 700; padding: 12px 20px; border-radius: 9999px; white-space: nowrap; }
.btn-mentor:hover { color: var(--gold); background: #2b2b33; }

/* Chi tiết tin */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 34px; align-items: start; }
.post-title { font-size: 32px; line-height: 1.3; margin: 0 0 16px; }
.post-authorrow { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid #26262e; border-bottom: 1px solid #26262e; }
.post-author { display: flex; gap: 12px; align-items: center; }
.post-author img { border-radius: 50%; }
.post-author strong { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.post-author strong svg { color: var(--gold); }
.post-author span { color: var(--muted); font-size: 12.5px; }
.post-share { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.post-share a, .post-share button { background: #23232a; color: #fff; border: 0; border-radius: 9999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.post-meta-row { display: flex; gap: 20px; margin: 14px 0 4px; }
.post-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.single-thumb figcaption { color: var(--muted); font-size: 13px; text-align: center; margin-top: 9px; }
.toc-box { background: var(--card); border: 1px solid #26262e; border-radius: 14px; padding: 18px 20px; margin: 22px 0; }
.toc-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin: 0 0 10px; }
.toc-title svg { color: var(--gold); }
.toc-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.toc-list a { color: #d7d7df; font-size: 14.5px; }
.toc-list a:hover { color: var(--gold); }
.post-tags { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.post-authorbox { align-items: center; }
.post-authorbox img { border-radius: 50%; }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.post-nav-card { background: var(--card); border: 1px solid #26262e; border-radius: 14px; padding: 16px 18px; display: grid; gap: 5px; }
.post-nav-card span { color: var(--muted); font-size: 12.5px; }
.post-nav-card strong { color: #fff; font-size: 14.5px; line-height: 1.45; }
.post-nav-card.next { text-align: right; }
.post-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-course, .side-more, .side-tags, .side-newsletter { background: var(--card); border: 1px solid #26262e; border-radius: 16px; padding: 20px; }
.side-course { border-color: rgba(230, 33, 23, 0.4); }
.side-badge { color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 7px; }
.side-course h3, .side-more h3, .side-tags h3, .side-newsletter h3 { font-size: 17px; margin: 0 0 10px; }
.side-price { display: flex; gap: 10px; align-items: baseline; margin: 0 0 12px; }
.side-price strong { font-size: 24px; color: #ff5147; }
.side-price del { color: var(--muted); }
.side-course .btn-red { margin-top: 14px; }
.side-zalo { color: var(--muted); font-size: 13px; text-align: center; margin: 11px 0 0; }
.side-zalo a { color: var(--gold); font-weight: 700; }
.side-more .mini-post { background: transparent; border: 0; border-bottom: 1px solid #26262e; border-radius: 0; padding: 12px 0; }
.side-more .mini-post:last-child { border-bottom: 0; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.side-newsletter p { color: var(--muted); font-size: 13.5px; margin: 0 0 13px; }
.post-cta-panel { margin-top: 48px; background: linear-gradient(120deg, rgba(230, 33, 23, 0.16), rgba(255, 197, 49, 0.1)), var(--card); border: 1px solid #2c2c35; border-radius: 20px; padding: 38px 32px; text-align: center; }
.post-cta-panel h2 { font-size: 26px; margin: 0 0 11px; }
.post-cta-panel p { color: var(--muted); max-width: 640px; margin: 0 auto 20px; }
.post-cta-zalo { margin-top: 14px !important; }
.post-cta-zalo a { color: var(--gold); font-weight: 700; }

/* FAQ — bố cục cột bên */
.faq-head { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.faq-head .hero-badge { display: inline-flex; }
.faq-title { margin-bottom: 10px; }
.faq-sub { color: var(--muted); margin: 0; }
.faq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.faq-side { display: grid; gap: 16px; position: sticky; top: 100px; }
.faq-side .faq-search { margin: 0; }
.faq-catbox { background: var(--card); border: 1px solid #26262e; border-radius: 16px; padding: 18px; }
.faq-catbox-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 13px; }
.faq-catbox-title svg { color: var(--gold); }
.faq-catbox .faq-cats { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; justify-content: stretch; }
.faq-catbox .chip { justify-content: flex-start; text-align: left; width: 100%; padding: 11px 18px; }
.faq-note { background: rgba(255, 197, 49, 0.07); border: 1px solid rgba(255, 197, 49, 0.4); border-radius: 16px; padding: 18px; }
.faq-note-title { display: flex; align-items: center; gap: 7px; color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 8px; }
.faq-note p:last-child { color: var(--muted); font-size: 14px; margin: 0; }
.faq-item.open { border-color: rgba(255, 197, 49, 0.45); }
.faq-support { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--card); border: 1px solid #26262e; border-radius: 18px; padding: 26px; }
.faq-support h2 { margin: 0 0 6px; font-size: 21px; }
.faq-support p { color: var(--muted); margin: 0; max-width: 460px; }
.faq-support-btns { display: flex; gap: 11px; flex-wrap: wrap; }

/* Liên hệ */
.contact-head { text-align: center; max-width: 720px; margin: 0 auto 32px; }
.contact-title { font-size: 44px; margin-bottom: 10px; }
.contact-sub { color: var(--muted); margin: 0; }
.contact-grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; }
.card-kicker { display: flex; align-items: center; gap: 7px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 9px; }
.card-kicker.red { color: #ff5147; }
.contact-info h2, .contact-form h2 { font-size: 21px; margin: 0 0 18px; }
.info-rows { display: grid; gap: 13px; }
.info-row { display: flex; gap: 14px; background: #17171f; border: 1px solid #26262e; border-radius: 14px; padding: 16px; align-items: center; }
.info-ic { display: inline-flex; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255, 197, 49, 0.12); color: var(--gold); }
.info-row small { display: block; color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.info-row strong { display: block; color: #fff; font-size: 16.5px; margin: 2px 0; word-break: break-all; }
.info-row em { display: block; color: var(--muted); font-size: 12.5px; font-style: normal; }
.commit-box { margin-top: 16px; border: 1px solid rgba(255, 197, 49, 0.4); border-radius: 14px; padding: 15px 17px; }
.commit-box p { margin: 0; color: var(--muted); font-size: 13.5px; }
.commit-box p strong { display: flex; align-items: center; gap: 7px; color: #fff; margin-bottom: 4px; }
.commit-box p strong svg { color: var(--gold); }
.form-sub { color: var(--muted); margin: -10px 0 18px; font-size: 14px; }
.form-privacy { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; margin: 16px 0 0; }
.form-privacy svg { color: var(--gold); flex: none; }
.contact-cta { margin-top: 26px; text-align: center; background: linear-gradient(120deg, rgba(230, 33, 23, 0.15), rgba(255, 197, 49, 0.1)), var(--card); border: 1px solid #2c2c35; border-radius: 20px; padding: 38px 30px; }
.cta-ic { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255, 197, 49, 0.13); color: var(--gold); margin-bottom: 14px; }
.contact-cta h2 { font-size: 25px; margin: 0 0 10px; }
.contact-cta p { color: var(--muted); margin: 0 auto 22px; max-width: 560px; }
.cta-btns { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* Giới thiệu — bổ sung */
.about-media { position: relative; }
.media-caption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; background: rgba(10, 10, 14, 0.82); border: 1px solid rgba(255, 197, 49, 0.4); border-radius: 12px; padding: 11px 14px; font-size: 13px; margin: 0; }
.media-caption svg { color: var(--gold); flex: none; }
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
.story-text { position: relative; }
.story-ic { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 11px; background: rgba(230, 33, 23, 0.14); color: #ff6f66; margin-bottom: 12px; }
.story-text p { color: #d7d7df; margin: 0 0 13px; }
.story-text p:last-child { margin-bottom: 0; }
.story-side { display: grid; gap: 16px; }
.story-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; min-height: 170px; }
.quote-card { margin: 0; border: 1.5px solid rgba(255, 197, 49, 0.55); border-radius: 16px; padding: 20px 22px; background: rgba(255, 197, 49, 0.05); }
.quote-card p { font-size: 19px; font-weight: 700; margin: 0 0 7px; }
.quote-card cite { color: var(--gold); font-size: 12px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.info-card-link { color: var(--gold); font-weight: 600; font-size: 13.5px; margin-top: 12px !important; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; top: 63px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 197, 49, 0.5), rgba(255, 197, 49, 0.5), transparent); }
.timeline-step { text-align: center; padding: 0 8px; position: relative; }
.timeline-no { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--gold); background: var(--bg); color: var(--gold); font-weight: 800; font-size: 16px; margin-bottom: 13px; position: relative; z-index: 1; }
.timeline-step h3 { font-size: 16px; margin: 0 0 6px; }
.timeline-step p { color: var(--muted); font-size: 13.5px; margin: 0; }
.why-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; align-items: stretch; }
.why-grid .check-card { height: 100%; }
.zalo-card { border: 1.5px solid rgba(255, 197, 49, 0.55); border-radius: 16px; padding: 24px; background: rgba(255, 197, 49, 0.05); display: flex; flex-direction: column; }
.zalo-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 11px; }
.zalo-card h3 { font-size: 20px; margin: 0 0 9px; }
.zalo-card p { color: var(--muted); margin: 0 0 18px; }
.zalo-card .btn-red { margin-top: auto; }
.about-cta { text-align: center; background: linear-gradient(120deg, rgba(230, 33, 23, 0.14), rgba(255, 197, 49, 0.09)), var(--card); border: 1px solid #2c2c35; border-radius: 20px; padding: 40px 30px; }
.about-cta h2 { font-size: 27px; margin: 0 0 11px; }
.about-cta p { color: var(--muted); margin: 0 auto 22px; max-width: 600px; }

/* Chính sách */
.policy-head { text-align: center; max-width: 760px; margin: 0 auto 30px; }
.policy-head .hero-badge { display: inline-flex; }
.policy-updated { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.policy-updated svg { color: var(--gold); }
.policy-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 30px; align-items: start; }
.policy-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-support { background: var(--card); border: 1px solid #26262e; border-radius: 16px; padding: 19px; display: grid; gap: 10px; }
.side-support p { color: var(--muted); font-size: 13.5px; margin: 0; }
.policy-content h2 { margin-top: 30px; }
.policy-content h2:first-child { margin-top: 0; }

/* Responsive v1.4.0 */
@media (max-width: 1024px) {
    .pd-grid, .post-grid { grid-template-columns: 1fr; }
    .pd-side, .post-side { position: static; }
    .featured-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .faq-grid, .policy-grid { grid-template-columns: 1fr; }
    .faq-side, .policy-side { position: static; }
    .story-grid, .why-grid { grid-template-columns: 1fr; }
    .timeline { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .timeline::before { display: none; }
    .vip-panel { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .own-grid { grid-template-columns: 1fr; }
    .pd-minicards { grid-template-columns: 1fr; }
    .pd-gallery { grid-template-columns: 1fr; }
    .pd-title, .post-title { font-size: 26px; }
    .post-nav { grid-template-columns: 1fr; }
    .mini-post { grid-template-columns: 96px 1fr; }
    .mini-media img { width: 96px; height: 74px; }
    .contact-title { font-size: 34px; }
    .doc-card-btns { grid-template-columns: auto 1fr; }
}

/* ============================================================
   HIỆU ỨNG CHUYỂN ĐỘNG TOÀN SITE (theo yêu cầu của anh 04/11:
   web bớt "cứng", nút/icon kêu gọi bấm). Chỉ dùng transform/opacity
   cho mượt; tôn trọng chế độ giảm chuyển động của người dùng.
   ============================================================ */

/* Hiện dần khi cuộn tới (JS gắn .rv, vào khung hình thì thêm .in) */
.rv { opacity: 0; transform: translateY(18px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.6s ease; }

/* Thẻ nổi lên + ảnh phóng nhẹ khi di chuột */
.doc-card, .post-card, .showcase-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.doc-card:hover, .post-card:hover, .showcase-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38); border-color: rgba(255, 197, 49, 0.35); }
.doc-card-media, .post-card-media, .showcase-media { overflow: hidden; }
.doc-card-media img, .post-card-media img, .showcase-media img { transition: transform 0.5s ease; }
.doc-card:hover .doc-card-media img, .post-card:hover .post-card-media img, .showcase-card:hover .showcase-media img { transform: scale(1.06); }

/* Vệt sáng quét qua các nút kêu gọi khi di chuột */
.btn-red, .btn-gold, .btn-hero-primary, .btn-doc, .btn-banner, .btn-docs-more { position: relative; overflow: hidden; }
.btn-red::after, .btn-gold::after, .btn-hero-primary::after, .btn-doc::after, .btn-banner::after, .btn-docs-more::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-red:hover::after, .btn-gold:hover::after, .btn-hero-primary:hover::after, .btn-doc:hover::after, .btn-banner:hover::after, .btn-docs-more:hover::after { left: 135%; }

/* Mũi tên của link "xem tất cả / xem thêm" trượt sang phải khi di chuột */
.see-all svg, .btn-docs-more svg, .showcase-link svg { transition: transform 0.25s ease; }
.see-all:hover svg, .btn-docs-more:hover svg, .showcase-link:hover svg { transform: translateX(4px); }

/* Chip lọc, link footer, thẻ điều hướng bài viết, icon header */
.chip { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.chip:hover { transform: translateY(-1px); }
.footer-links a { display: inline-block; transition: color 0.2s ease, transform 0.2s ease; }
.footer-links a:hover { transform: translateX(3px); }
.post-nav-card { transition: border-color 0.25s ease, transform 0.25s ease; }
.post-nav-card:hover { transform: translateY(-2px); border-color: rgba(255, 197, 49, 0.4); }
.icon-btn:not(.bell) svg { transition: transform 0.2s ease; }
.icon-btn:not(.bell):hover svg { transform: scale(1.15); }
.mini-post { transition: background 0.25s ease; border-radius: 10px; }

/* Hero trang chủ hiện dần từng phần khi tải trang */
@keyframes hthk-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
.hero-text > * { animation: hthk-fade-up 0.7s ease both; }
.hero-text > *:nth-child(2) { animation-delay: 0.08s; }
.hero-text > *:nth-child(3) { animation-delay: 0.16s; }
.hero-text > *:nth-child(4) { animation-delay: 0.24s; }
.hero-text > *:nth-child(5) { animation-delay: 0.32s; }
.hero-media { animation: hthk-fade-up 0.7s ease 0.15s both; }

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1; transform: none; }
    .hero-text > *, .hero-media { animation: none; }
}

/* Banner quảng cáo ở sidebar bài viết (thay hộp bán khóa học cũ):
   nền gradient đỏ–vàng nhẹ, không giá, không nút mua. */
.side-banner {
    background: linear-gradient(150deg, rgba(230, 33, 23, 0.22), rgba(255, 197, 49, 0.10) 55%, rgba(255, 197, 49, 0.02)), var(--card);
    border: 1px solid rgba(255, 197, 49, 0.35);
    border-radius: 16px;
    padding: 22px 20px;
}
.side-banner-kicker { display: flex; align-items: center; gap: 6px; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 10px; }
.side-banner h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; color: #fff; }
.side-banner-text { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }

/* Form nhận bản tin chạy bằng Contact Form 7 — giữ đúng diện mạo form cũ:
   ô email dạng pill tối + nút Đăng ký đỏ, hàng ngang ở panel lớn,
   xếp cột trong sidebar bài viết. */
.hthk-cf7-newsletter .wpcf7-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hthk-cf7-newsletter .wpcf7-form > p { margin: 0; display: contents; }
.hthk-cf7-newsletter .wpcf7-form-control-wrap { flex: 1 1 260px; min-width: 0; }
.hthk-cf7-newsletter input[type="email"] {
    width: 100%;
    padding: 14px 22px;
    border-radius: 9999px;
    background: #0b0b0f;
    border: 1px solid #2a2a33;
    color: #ffffff;
    font-size: 15px;
}
.hthk-cf7-newsletter input[type="email"]::placeholder { color: #77777f; }
.hthk-cf7-newsletter input[type="submit"] {
    padding: 14px 32px;
    border: 0;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(230, 33, 23, 0.3);
}
.hthk-cf7-newsletter input[type="submit"]:hover { background: #cc1810; }
.hthk-cf7-newsletter .wpcf7-spinner { display: none; }
.hthk-cf7-newsletter .wpcf7-not-valid-tip { color: #ff7a70; font-size: 12.5px; margin-top: 6px; display: block; text-align: left; }
.hthk-cf7-newsletter .wpcf7-response-output { flex-basis: 100%; border: 0 !important; color: var(--gold); font-size: 14px; margin: 8px 0 0 !important; padding: 0 !important; text-align: center; }
.side-newsletter .hthk-cf7-newsletter .wpcf7-form { flex-direction: column; }
.side-newsletter .hthk-cf7-newsletter .wpcf7-form-control-wrap { flex: none; }
.side-newsletter .hthk-cf7-newsletter input[type="submit"] { width: 100%; }
.side-newsletter .hthk-cf7-newsletter .wpcf7-response-output { text-align: left; }

/* Panel kêu gọi cuối trang chính sách — do template dựng (nằm ngoài nội dung
   bài viết nên không lọt vào mục lục tự động). */
.policy-cta { margin: 34px 0 6px; text-align: center; background: linear-gradient(135deg, #1b1b24, #14141b); border: 1px solid #2c2c33; border-radius: 20px; padding: 36px 28px; }
.policy-cta h2 { margin: 0 0 10px; font-size: 26px; text-transform: uppercase; letter-spacing: 0.4px; }
.policy-cta p { color: var(--muted); max-width: 620px; margin: 0 auto 22px; }
.policy-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Form Liên Hệ (Contact Form 7) — tạo kiểu đồng bộ nền tối của theme.
   Trước đây theme không có CSS cho CF7 nên các ô nhập hiện trắng mặc định. */
.contact-form-body .wpcf7-form p { margin: 0 0 16px; }
.contact-form-body .wpcf7-form label { display: block; font-weight: 600; font-size: 14.5px; color: #ededf2; }
.contact-form-body .wpcf7-form input[type="text"],
.contact-form-body .wpcf7-form input[type="email"],
.contact-form-body .wpcf7-form input[type="tel"],
.contact-form-body .wpcf7-form select,
.contact-form-body .wpcf7-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 13px 16px;
    border-radius: 12px;
    background: #0b0b0f;
    border: 1px solid #2a2a33;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
}
.contact-form-body .wpcf7-form textarea { min-height: 150px; resize: vertical; }
.contact-form-body .wpcf7-form input:focus,
.contact-form-body .wpcf7-form textarea:focus,
.contact-form-body .wpcf7-form select:focus { border-color: var(--gold); outline: none; }
.contact-form-body .wpcf7-form input[type="submit"] {
    padding: 14px 36px;
    border: 0;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-weight: 700;
    font-size: 15.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(230, 33, 23, 0.3);
}
.contact-form-body .wpcf7-form input[type="submit"]:hover { background: #cc1810; }
.contact-form-body .wpcf7-not-valid-tip { color: #ff8a80; font-size: 12.5px; }
.contact-form-body .wpcf7-response-output { border-radius: 12px; font-size: 14px; }

/* ------------------------------------------------- Gói Thành Viên */
.tiers-sub { color: var(--muted); margin: 10px 0 0; }
.tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0 8px; }
.tier-card { position: relative; background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; }
.tier-card.featured { border-color: var(--gold); box-shadow: 0 18px 45px rgba(255, 197, 49, 0.12); }
.tier-pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #131317; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 14px; border-radius: 9999px; white-space: nowrap; }
.tier-name { font-size: 19px; margin: 4px 0 12px; }
.tier-price { margin: 0 0 10px; }
.tier-price strong { font-size: 30px; color: var(--gold); }
.tier-card.featured .tier-price strong { color: var(--gold); }
.tier-price span { color: var(--muted); font-size: 14px; }
.tier-blurb { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.tier-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; color: #cfcfd8; font-size: 14px; }
.tier-features li { display: flex; gap: 8px; align-items: flex-start; }
.tier-features svg { color: var(--gold); flex: none; margin-top: 2px; }
.tier-card .btn-block { margin-top: auto; text-align: center; }
.compare-panel { margin: 34px 0 10px; background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 28px; }
.compare-panel h2 { display: flex; align-items: center; gap: 9px; font-size: 20px; margin: 0 0 18px; }
.compare-panel h2 svg { color: var(--gold); }
.compare-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14.5px; }
.compare-table th, .compare-table td { padding: 12px 14px; border-bottom: 1px solid #26262e; text-align: left; }
.compare-table thead th { color: var(--gold); font-size: 14px; text-transform: uppercase; letter-spacing: 0.03em; }
.compare-table tbody td:first-child { color: var(--muted); font-weight: 600; }
.tiers-note { margin: 18px 0 0; background: rgba(255, 197, 49, 0.08); border: 1px solid rgba(255, 197, 49, 0.35); color: #f3d98a; border-radius: 12px; padding: 13px 16px; font-size: 14px; display: flex; gap: 9px; }
.tiers-note svg { flex: none; margin-top: 2px; }
@media (max-width: 1024px) { .tiers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Thanh Toán + Cảm Ơn */
.steps-row { list-style: none; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 26px 0; padding: 0; }
.steps-row li { display: inline-flex; align-items: center; gap: 9px; background: var(--card); border: 1px solid #26262e; color: var(--muted); border-radius: 9999px; padding: 8px 18px 8px 9px; font-weight: 600; font-size: 14px; }
.steps-row li span { width: 26px; height: 26px; border-radius: 50%; background: #26262e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13.5px; }
.steps-row li.active { color: #fff; border-color: rgba(230, 33, 23, 0.55); }
.steps-row li.active span { background: var(--red); }
.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pay-card { background: var(--card); border: 1px solid #26262e; border-radius: 20px; padding: 28px; }
.pay-card h2 { font-size: 19px; margin: 0 0 14px; }
.pay-item { font-weight: 600; margin: 0 0 6px; }
.pay-amount { font-size: 34px; font-weight: 800; color: var(--gold); margin: 0 0 18px; }
.ck-box { background: #0b0b0f; border: 1px dashed rgba(255, 197, 49, 0.5); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; }
.ck-box span { color: var(--muted); font-size: 13px; }
.ck-code { font-size: 21px; letter-spacing: 0.12em; color: var(--gold); }
.ck-code-inline { color: var(--gold); letter-spacing: 0.06em; }
.pay-notes { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; color: #cfcfd8; font-size: 14px; }
.pay-notes li { display: flex; gap: 8px; align-items: flex-start; }
.pay-notes svg { color: var(--gold); flex: none; margin-top: 2px; }
.pay-notes a { color: var(--gold); }
.qr-box { background: #ffffff; border-radius: 16px; padding: 14px; max-width: 300px; margin: 0 auto 18px; }
.qr-box img { width: 100%; height: auto; display: block; }
.bank-rows { margin: 0; display: grid; gap: 10px; }
.bank-rows > div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #26262e; padding-bottom: 10px; }
.bank-rows dt { color: var(--muted); }
.bank-rows dd { margin: 0; font-weight: 700; text-align: right; }
.pay-note-small { color: var(--muted); font-size: 13.5px; margin: 16px 0 0; }
.pay-nobank { background: rgba(230, 33, 23, 0.08); border: 1px solid rgba(230, 33, 23, 0.4); border-radius: 12px; padding: 14px 16px; }
.pay-nobank a { color: var(--gold); font-weight: 700; }
.pay-invalid { text-align: center; padding: 36px 28px; }
.pay-invalid .policy-cta-btns { margin-top: 18px; }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } }
.camon-panel { text-align: center; max-width: 760px; margin: 8px auto 22px; }
.camon-check { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(46, 204, 113, 0.14); border: 1px solid rgba(46, 204, 113, 0.5); color: #2ecc71; margin-bottom: 16px; }
.camon-item { font-size: 16px; }
.camon-text { color: var(--muted); max-width: 640px; margin: 10px auto 0; }
.camon-form { max-width: 760px; margin: 0 auto; padding: 28px; }
.camon-form h2 { margin: 0 0 16px; font-size: 20px; }
.camon-btns { justify-content: center; margin-top: 24px; }

/* Form xác nhận thanh toán (CF7) — đồng bộ kiểu tối như form Liên Hệ. */
.pay-form-body .wpcf7-form p { margin: 0 0 15px; }
.pay-form-body .wpcf7-form label { display: block; font-weight: 600; font-size: 14.5px; color: #ededf2; }
.pay-form-body .wpcf7-form input[type="text"],
.pay-form-body .wpcf7-form input[type="email"],
.pay-form-body .wpcf7-form input[type="tel"],
.pay-form-body .wpcf7-form input[type="file"],
.pay-form-body .wpcf7-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #0b0b0f;
    border: 1px solid #2a2a33;
    color: #ffffff;
    font-size: 15px;
    font-family: inherit;
}
.pay-form-body .wpcf7-form input[type="submit"] {
    padding: 14px 34px;
    border: 0;
    border-radius: 9999px;
    background: var(--red);
    color: #ffffff;
    font-weight: 700;
    font-size: 15.5px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(230, 33, 23, 0.3);
}
.pay-form-body .wpcf7-form input[type="submit"]:hover { background: #cc1810; }
.pay-form-body .wpcf7-not-valid-tip { color: #ff8a80; font-size: 12.5px; }
.pay-form-body .wpcf7-response-output { border-radius: 12px; font-size: 14px; }

/* --- Khu Tài khoản: Gói Của Tôi (v1.6.0) --- */
.member-box{max-width:640px}
.member-card{background:#1E1E28;border:1px solid rgba(255,197,49,.35);border-radius:16px;padding:26px 28px}
.member-tier{font-size:24px;font-weight:800;color:#FFC531;margin:0 0 10px}
.member-line{color:#C9C9D4;margin:0 0 8px;line-height:1.6}
.member-line strong{color:#fff}
.member-docs{margin:4px 0 14px;padding-left:20px;color:#C9C9D4;line-height:1.7}
.member-card .btn-gold{display:inline-block;margin-top:10px}

/* Cổng tải theo hạng (từ v1.7.0) */
.btn-gold.is-disabled{opacity:.55;filter:grayscale(.25)}
.dl-modal{position:fixed;inset:0;background:rgba(6,6,10,.72);display:flex;align-items:center;justify-content:center;z-index:999;padding:18px}
.dl-modal[hidden]{display:none}
.dl-modal-box{background:#1E1E28;border:1px solid rgba(255,197,49,.35);border-radius:18px;max-width:480px;width:100%;padding:26px 24px;color:#EDEDF2}
.dl-modal-box h3{margin:0 0 10px;font-size:20px;color:#fff}
.dl-modal-box p{margin:0 0 14px;color:#C9C9D4;line-height:1.55}
.dl-ack{display:flex;gap:10px;align-items:flex-start;background:#17171F;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;cursor:pointer;font-size:14.5px;line-height:1.5}
.dl-ack input{margin-top:3px;accent-color:#FFC531;width:17px;height:17px}
.dl-modal-btns{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.dl-modal-btns .btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:#EDEDF2;border-radius:9999px;padding:11px 22px;font-weight:700;cursor:pointer}
.dl-modal-btns .btn-gold{border:none;cursor:pointer}
.dl-modal-btns .btn-gold:disabled{opacity:.45;cursor:not-allowed}

/* Giới thiệu khớp mẫu Stitch export 11 (từ v1.8.0) */
.about-media .media-caption{flex-direction:column;align-items:flex-start;gap:2px}
.media-caption .cap-line1{display:flex;align-items:center;gap:8px;margin:0}
.media-caption .cap-line2{margin:0;padding-left:23px;color:var(--gold);font-size:12.5px;font-weight:600}
.story-photo{position:relative;border-radius:16px;overflow:hidden;min-height:340px;height:100%;border:1px solid rgba(255,255,255,.08)}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;display:block}
.story-photo .quote-card{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(11,11,16,.88);backdrop-filter:blur(4px)}
.quote-mark{display:block;font-size:44px;line-height:.6;color:var(--gold);font-weight:800;margin-bottom:12px}
.info-card-ic{display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;border-radius:12px;margin-bottom:14px}
.info-card-ic.t1{background:rgba(255,197,49,.14);color:var(--gold)}
.info-card-ic.t2{background:rgba(230,33,23,.15);color:#ff6f66}
.info-card-ic.t3{background:rgba(139,195,74,.15);color:#aed581}
.info-card-ic.t4{background:rgba(230,33,23,.10);color:#ff8a80}
.info-card-link{border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.timeline{background:var(--card);border:1px solid #2c2c35;border-radius:20px;padding:36px 26px 30px;margin-top:10px}
.timeline-no{background:var(--card)}
.about-cta-logo{display:block;height:56px;width:auto;margin:0 auto 18px}
@media (max-width:820px){.story-photo{min-height:300px}.timeline{padding:26px 14px 20px}}

/* Fix lỗi icon nút vàng (anh báo 04/11): .btn-gold trước đây là inline-block
   nên icon SVG bị canh theo baseline chữ — nổi lên cao và mảnh. Đưa về
   inline-flex canh giữa như .btn-red, áp dụng cho mọi nút vàng toàn site. */
.btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-block{align-items:center}
.btn-gold svg{flex:none}

/* Popup chúc mừng sau khi gửi form xác minh (mẫu Stitch, v1.8.6) */
.hthk-done-modal{position:fixed;inset:0;z-index:9999;background:rgba(10,10,14,.78);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.hthk-done-modal[hidden]{display:none}
.hthk-done-box{background:#1E1E28;border:1px solid rgba(255,255,255,.08);border-radius:20px;max-width:480px;width:100%;padding:34px 30px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hthk-done-ic{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FFD968,#FFC531 62%,#E8A90C);color:#231a02;box-shadow:0 10px 26px rgba(255,197,49,.35);margin-bottom:16px}
.hthk-done-box h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:27px;font-weight:800;color:#fff;margin:0 0 8px}
.hthk-done-sub{color:#EDEDF2;font-weight:600;margin:0 0 10px}
.hthk-done-body{color:#9A9AA6;line-height:1.65;margin:0 0 18px}
.hthk-done-note{display:flex;gap:10px;align-items:flex-start;text-align:left;background:rgba(255,197,49,.09);border:1px solid rgba(255,197,49,.5);border-radius:12px;padding:12px 14px;color:#FFC531;line-height:1.55;margin:0 0 20px}
.hthk-done-note svg{flex:none;margin-top:2px}
.hthk-done-box .btn-red{margin-bottom:10px}

/* ===== v1.8.9 — Sửa responsive toàn site: header mobile + nút "Đăng Ký",
   panel menu mobile nền đặc, Giới Thiệu khớp mẫu Stitch (badge vàng,
   tiêu đề viết hoa, 4 thẻ 1 hàng, nhịp section gọn), bảng so sánh gói
   cuộn ngang, form tài khoản Woo theo nền tối ===== */

/* Nút CTA header: nhãn rút gọn chỉ hiện trên mobile */
.btn-register .cta-short { display: none; }

@media (max-width: 1024px) {
    /* Panel menu mobile: nền đặc để chữ hero không xuyên qua */
    .main-nav { z-index: 80; }
    .menu-pill { background: #17171d; border: 1px solid #2b2b34; }
}

@media (max-width: 640px) {
    /* Header mobile gọn: logo 40px, nút "Đăng Ký", khoảng cách hẹp */
    .header-inner { gap: 10px; }
    .brand img, .brand .custom-logo, .brand .hthk-logo { height: 40px; }
    .header-actions { gap: 10px; }
    .btn-register { padding: 9px 13px; font-size: 13.5px; }
    .btn-register .cta-full { display: none; }
    .btn-register .cta-short { display: inline; }
    .nav-toggle { width: 38px; height: 38px; }
}

/* Giới Thiệu: nhịp section gọn lại + tiêu đề section viết hoa như mẫu */
.home-section.about-section { padding-top: 32px; padding-bottom: 32px; }
.about-section .section-title { text-transform: uppercase; }
.section-head .panel-badge {
    color: var(--gold);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.why-grid .check-card { max-width: none; margin: 0; }
.zalo-card { justify-content: center; }
.zalo-card .btn-red { margin-top: 18px; }

@media (min-width: 1025px) {
    /* 4 thẻ giá trị nằm 1 hàng ngang trên desktop như mẫu Stitch */
    .cards-values { grid-template-columns: repeat(4, 1fr); }
}

/* Bảng so sánh gói thành viên: cuộn ngang bên trong khung trên mobile */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Form tài khoản WooCommerce theo nền tối của theme */
.woocommerce-account .woocommerce form .form-row label,
.woocommerce-account .woocommerce label { color: #c9c9d2; }
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"] {
    background: #1b1b22;
    border: 1px solid #2c2c35;
    border-radius: 10px;
    color: #ffffff;
    padding: 11px 14px;
}
.woocommerce-account .woocommerce input.input-text:focus,
.woocommerce-account .woocommerce input[type="email"]:focus,
.woocommerce-account .woocommerce input[type="password"]:focus {
    border-color: var(--gold);
    outline: none;
}
.woocommerce-account .woocommerce .woocommerce-form-login,
.woocommerce-account .woocommerce .woocommerce-form-register {
    background: var(--card);
    border: 1px solid #26262e;
    border-radius: 16px;
    padding: 26px;
}
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .button {
    background: var(--red);
    color: #ffffff;
    border-radius: 999px;
    padding: 11px 24px;
    font-weight: 700;
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce .button:hover { background: #f43f2f; color: #ffffff; }

/* ===== v1.8.10 — Căn khung header mobile, footer mobile gọn nhịp,
   banner hội viên xếp dọc trên mobile (bỏ dấu "|" lơ lửng) ===== */

@media (max-width: 1024px) {
    /* Đẩy cụm nút header sát mép phải của khung container */
    .header-actions { margin-left: auto; }
}

/* ===== v1.8.11 — Header mobile: thắng rule ".main-nav + .header-actions"
   (độ ưu tiên cao hơn) để cụm nút bám mép phải khung ===== */
@media (max-width: 1024px) {
    .header-inner .header-actions { margin-left: auto; }
}

@media (max-width: 768px) {
    /* Banner "2 cách sở hữu": mỗi cách 1 dòng, ẩn dấu ngăn cách */
    .member-banner-text { flex-direction: column; align-items: flex-start; gap: 6px; }
    .member-banner-text .sep { display: none; }
}

@media (max-width: 640px) {
    /* Footer mobile: thu hẹp các dải trống giữa các cột và đáy footer */
    .footer-grid { gap: 22px; padding-top: 36px; padding-bottom: 24px; }
    .footer-bottom { padding-top: 20px; padding-bottom: 28px; }
}

/* ===== v1.8.12 — Ô tìm kiếm Tài Liệu giãn hết khung trên mobile ===== */
@media (max-width: 640px) {
    .shop-filter-row .shop-search { flex: 1 1 100%; max-width: none; }
}

/* ===== v1.9.0 — Trạng thái gói theo tài khoản: gói hiện tại / gia hạn /
   nâng cấp / khóa gói thấp hơn khi gói cao đang còn hạn ===== */
.tier-card.tier-current { border-color: rgba(255, 197, 49, 0.65); }
.btn-block.is-disabled { opacity: 0.5; pointer-events: none; }
.my-tier-note strong { color: var(--gold); }
.hthk-done-track{display:flex;gap:9px;align-items:flex-start;text-align:left;color:#9A9AA6;line-height:1.55;margin:-6px 0 16px;font-size:14px}
.hthk-done-track svg{flex:none;margin-top:2px;color:var(--gold)}
.hthk-done-box .btn-gold{margin-bottom:10px}

/* ===== v1.9.2 — Câu châm ngôn tạo niềm tin (trang chủ + trang Tài Liệu) ===== */
.hthk-motto { margin: 28px 0 0; }
.hthk-motto p { margin: 0 auto; max-width: 880px; text-align: center; font-size: 20px; line-height: 1.55; font-weight: 700; color: #F7F2E7; padding: 18px 28px; border: 1px solid rgba(255, 197, 49, .38); border-radius: 14px; background: linear-gradient(180deg, rgba(255, 197, 49, .09), rgba(255, 197, 49, .02)); }
.hthk-motto p::before { content: "“"; color: #FFC531; font-size: 32px; line-height: 0; margin-right: 6px; vertical-align: -8px; }
.hthk-motto p::after { content: "”"; color: #FFC531; font-size: 32px; line-height: 0; margin-left: 6px; vertical-align: -8px; }
.shop-head .hthk-motto { margin-bottom: 6px; }
@media (max-width: 640px) { .hthk-motto p { font-size: 17px; padding: 14px 16px; } }

/* ===== v1.9.4 — Nút nâng hạng nhỏ trong hộp VIP trang sản phẩm (VIP thì không hiện) ===== */
/* v1.9.5: nút bề ngang 100% bằng nút chính phía trên cho cân đối (anh chê lệch 07:20 05/11) */
.btn-upgrade-small { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 16px; border: 1px solid rgba(255, 197, 49, .65); border-radius: 999px; color: #FFC531; font-size: 14px; font-weight: 700; text-decoration: none; background: rgba(255, 197, 49, .06); }
.btn-upgrade-small:hover { background: #FFC531; color: #131317; }

/* ===== v1.9.5 — Khu Tài Khoản (Woo My Account) theo mẫu Stitch "Tài Khoản Thành Viên" ===== */
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 28px; }
.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { flex: 1 1 100%; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { float: none; width: 300px; flex: 0 0 300px; box-sizing: border-box; background: #1E1E28; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 24px 18px; }
.woocommerce-account .woocommerce .woocommerce-MyAccount-content { float: none; width: auto; flex: 1 1 0; min-width: 0; box-sizing: border-box; background: #1E1E28; border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 28px 30px; }
.woocommerce-MyAccount-content .member-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0; }

/* Khối người dùng đầu thẻ điều hướng */
.acct-user { text-align: center; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.acct-avatar { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #3d3a24, #26262E); border: 1px solid rgba(255, 197, 49, .35); color: #FFC531; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.acct-name { margin: 0; font-size: 17px; font-weight: 700; color: #ffffff; }
.acct-email { margin: 3px 0 0; font-size: 13px; color: #9A9AA6; word-break: break-all; }
.acct-badge { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255, 197, 49, .5); background: rgba(255, 197, 49, .1); color: #FFC531; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.acct-badge-free { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #c9c9d2; }

/* Menu tài khoản: hàng có biểu tượng, mục đang chọn pill + thanh vàng */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation ul li { margin: 0 0 4px; }
.woocommerce-MyAccount-navigation ul li a { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 30px 11px 16px; border-radius: 10px; color: #c9c9d2; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.woocommerce-MyAccount-navigation ul li a:hover { background: rgba(255, 255, 255, .05); color: #ffffff; }
.woocommerce-MyAccount-navigation ul li.is-active a { background: #26262F; color: #FFC531; box-shadow: inset 3px 0 0 #FFC531; }
.woocommerce-MyAccount-navigation ul li.is-active a::after { content: "›"; position: absolute; right: 14px; font-size: 18px; line-height: 1; }
.woocommerce-MyAccount-navigation ul li a::before { content: ""; width: 19px; height: 19px; flex: 0 0 19px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.6' fill='%23000'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--goi-cua-toi a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 8.5L8 12l4-6.5L16 12l4.5-3.5L19.2 17.5H4.8z' fill='%23000'/%3E%3Crect x='5' y='19' width='14' height='1.8' rx='.9' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 8.5L8 12l4-6.5L16 12l4.5-3.5L19.2 17.5H4.8z' fill='%23000'/%3E%3Crect x='5' y='19' width='14' height='1.8' rx='.9' fill='%23000'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M5.3 8h13.4l-1.1 12.2H6.4L5.3 8z'/%3E%3Cpath d='M9 10.5V6.8a3 3 0 016 0v3.7' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M5.3 8h13.4l-1.1 12.2H6.4L5.3 8z'/%3E%3Cpath d='M9 10.5V6.8a3 3 0 016 0v3.7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V15m0 0L8 11m4 4l4-4'/%3E%3Cpath d='M4.5 19.5h15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5V15m0 0L8 11m4 4l4-4'/%3E%3Cpath d='M4.5 19.5h15'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 21.2S5.2 15 5.2 9.9a6.8 6.8 0 1113.6 0c0 5.1-6.8 11.3-6.8 11.3z' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9.9' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M12 21.2S5.2 15 5.2 9.9a6.8 6.8 0 1113.6 0c0 5.1-6.8 11.3-6.8 11.3z' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='9.9' r='2.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4.5 7h8M18.5 7H20M4.5 17h2.5M13 17h6.5'/%3E%3Ccircle cx='15.5' cy='7' r='2.3'/%3E%3Ccircle cx='10' cy='17' r='2.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4.5 7h8M18.5 7H20M4.5 17h2.5M13 17h6.5'/%3E%3Ccircle cx='15.5' cy='7' r='2.3'/%3E%3Ccircle cx='10' cy='17' r='2.3'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: #f0a49d; background: rgba(230, 33, 23, .08); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: rgba(230, 33, 23, .16); color: #ffb3ab; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H18a1.8 1.8 0 011.8 1.8v11.4A1.8 1.8 0 0118 19.5h-4.5'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5H18a1.8 1.8 0 011.8 1.8v11.4A1.8 1.8 0 0118 19.5h-4.5'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10.5'/%3E%3C/svg%3E"); }

/* Hộp hỗ trợ cuối thẻ điều hướng */
.acct-help { margin-top: 16px; background: #23232D; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 15px 16px; }
.acct-help-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #ffffff; }
.acct-help-title svg { color: #FFC531; }
.acct-help-text { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #9A9AA6; }
.acct-help-text a { color: #FFC531; text-decoration: none; }
.acct-help-link { font-size: 13.5px; font-weight: 700; color: #FFC531; text-decoration: none; }

/* Panel nội dung: bảng + thông báo */
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { color: #ffffff; }
.woocommerce-MyAccount-content table.shop_table { border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: #23232D; font-size: 14px; width: 100%; }
.woocommerce-MyAccount-content table.shop_table th { background: rgba(255, 255, 255, .04); color: #9A9AA6; text-transform: uppercase; font-size: 11.5px; letter-spacing: .6px; padding: 12px 14px; border: 0; text-align: left; }
.woocommerce-MyAccount-content table.shop_table td { padding: 13px 14px; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); color: #e8e8ee; }
.woocommerce-MyAccount-content .woocommerce-info, .woocommerce-MyAccount-content .woocommerce-message { background: #23232D; border-top: 3px solid #FFC531; border-radius: 10px; color: #e8e8ee; }

/* Panel Gói Của Tôi */
.tier-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #9A9AA6; }
.tier-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.woocommerce-MyAccount-content .member-tier.tier-name { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; font-weight: 800; color: #FFC531; }
.tier-status { padding: 4px 12px; border-radius: 999px; background: rgba(255, 197, 49, .14); border: 1px solid rgba(255, 197, 49, .45); color: #FFC531; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.tier-meta { display: flex; align-items: center; gap: 8px; color: #c9c9d2; }
.tier-meta svg { color: #FFC531; flex: 0 0 auto; }
.quota-card { margin-top: 18px; background: #23232D; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 16px 18px; }
.quota-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.quota-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #e8e8ee; }
.quota-label svg { color: #FFC531; flex: 0 0 auto; }
.quota-left { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #FFC531; font-size: 12.5px; font-weight: 700; }
.quota-bar { margin-top: 12px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.quota-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFC531, #FFD968); }
.member-docs-title { display: flex; align-items: center; gap: 9px; margin: 24px 0 10px; font-size: 16.5px; font-weight: 700; color: #ffffff; }
.member-docs-title svg { color: #FFC531; }
.woocommerce-MyAccount-content .member-docs { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-content .member-docs li { background: #23232D; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; padding: 13px 16px; margin: 0 0 8px; color: #e8e8ee; font-weight: 600; }
.tier-upsell { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: linear-gradient(120deg, rgba(230, 33, 23, .13), rgba(255, 197, 49, .07)), #23232D; border: 1px solid rgba(255, 197, 49, .25); border-radius: 14px; padding: 20px 22px; }
.upsell-title { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #ffffff; }
.upsell-sub { margin: 0; max-width: 46ch; font-size: 13.5px; color: #c9c9d2; }
.tier-upsell .btn-gold { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tier-renew a { color: #FFC531; font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
  .woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) { flex-direction: column; }
  .woocommerce-account .woocommerce .woocommerce-MyAccount-navigation { width: 100%; flex: 1 1 auto; }
  .woocommerce-account .woocommerce .woocommerce-MyAccount-content { width: 100%; padding: 22px 18px; }
  .woocommerce-MyAccount-content .member-tier.tier-name { font-size: 24px; }
}

/* ===== v1.9.6 — Nút vàng trong dải nâng cấp (panel Gói Của Tôi): ép nền vàng + chữ tối, tránh bị rule khác của Woo ghi đè ===== */
.tier-upsell .btn-gold, .tier-upsell .btn-gold:hover { background: #FFC531; color: #131317; }

/* ===== v1.9.8 — Tab Đơn hàng: mục tài liệu đã tải bằng gói ===== */
.acct-plan-downloads { margin-top: 28px; }
.apd-title { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 16.5px; font-weight: 700; color: #ffffff; }
.apd-title svg { color: #FFC531; }
.apd-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.apd-list li a { color: #e8e8ee; text-decoration: none; font-weight: 600; }
.apd-list li a:hover { color: #FFC531; }
.apd-chip { flex: 0 0 auto; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(255, 197, 49, .45); background: rgba(255, 197, 49, .1); color: #FFC531; font-size: 11.5px; font-weight: 700; }
.apd-empty { color: #9A9AA6; font-size: 14px; }
.apd-empty a { color: #FFC531; font-weight: 700; text-decoration: none; }

/* ===== v1.9.9 — Dashboard gợi ý + tab Tải xuống có nút + sửa Địa chỉ & fieldset đổi mật khẩu ===== */
.apd-side { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.apd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: #FFC531; color: #131317 !important; font-size: 12.5px; font-weight: 800; text-decoration: none; }
.apd-btn:hover { background: #FFD968; color: #131317 !important; }

.acct-suggest { margin-top: 26px; }
.acct-suggest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sug-card { display: flex; flex-direction: column; gap: 7px; background: #23232D; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 12px; text-decoration: none; }
.sug-card:hover { border-color: rgba(255, 197, 49, .45); }
.sug-thumb img { width: 100%; height: auto; border-radius: 9px; display: block; }
.sug-name { color: #e8e8ee; font-size: 14px; font-weight: 700; line-height: 1.45; }
.sug-price { color: #FFC531; font-weight: 800; font-size: 15px; }
.sug-btn { margin-top: auto; text-align: center; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 197, 49, .55); color: #FFC531; font-size: 13px; font-weight: 700; }
.sug-card:hover .sug-btn { background: #FFC531; color: #131317; }
.acct-promo { margin-top: 26px; }
.acct-promo .btn-gold { background: #FFC531; color: #131317; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Tab Địa chỉ: hai cột thành thẻ con, tiêu đề vừa mắt */
.woocommerce-MyAccount-content .woocommerce-Addresses { display: flex; gap: 20px; flex-wrap: wrap; }
.woocommerce-MyAccount-content .woocommerce-Address { flex: 1 1 260px; background: #23232D; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; padding: 20px 22px; box-sizing: border-box; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 19px; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address-title .edit { color: #FFC531; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.woocommerce-MyAccount-content .woocommerce-Address address { color: #c9c9d2; font-style: italic; line-height: 1.6; margin: 0; }

/* Form Tài khoản: fieldset đổi mật khẩu theo tông tối (trước đây viền trắng mặc định) */
.woocommerce-MyAccount-content fieldset { border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: #23232D; padding: 20px 22px; margin: 18px 0; }
.woocommerce-MyAccount-content fieldset legend { color: #ffffff; font-weight: 700; font-size: 15.5px; padding: 0 8px; }

/* ===== v1.9.11 — Hàng tài liệu có ảnh đại diện (tab Đơn hàng / Tải xuống / Gói Của Tôi) ===== */
.apd-main { display: inline-flex; align-items: center; gap: 13px; min-width: 0; }
.apd-thumb { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: #131317; }
.apd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.woocommerce-MyAccount-content .member-docs li { display: flex; align-items: center; gap: 13px; }
.woocommerce-MyAccount-content .member-docs li > a { color: #e8e8ee; text-decoration: none; font-weight: 600; }
.woocommerce-MyAccount-content .member-docs li > a:hover { color: #FFC531; }
.apd-list li { justify-content: space-between; }

/* ===== v1.9.12 — Tab Địa chỉ: ép cỡ tiêu đề hai thẻ (bản v1.9.9 chưa trúng selector) ===== */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title h3 { font-size: 19px; line-height: 1.3; letter-spacing: 0; margin: 0; }
.woocommerce-MyAccount-content .woocommerce-Address { padding: 18px 20px; }
.woocommerce-MyAccount-content .woocommerce-Address-title { border-bottom: 1px solid rgba(255, 255, 255, .07); padding-bottom: 10px; margin-bottom: 12px; }

/* v1.9.12 — Nút hiện/ẩn mật khẩu (icon con mắt) trong form Tài khoản: sáng lên cho dễ nhìn trên nền tối */
.woocommerce-MyAccount-content .show-password-input { color: #b9b9c4; background: transparent; }
.woocommerce-MyAccount-content .show-password-input::after { color: #b9b9c4; }
.woocommerce-MyAccount-content .show-password-input:hover, .woocommerce-MyAccount-content .show-password-input:hover::after { color: #FFC531; }

/* ===== v1.9.13 — Icon con mắt mật khẩu: tăng độ ưu tiên CSS thắng rule của Woo ===== */
.woocommerce-account .woocommerce form .woocommerce-MyAccount-content .password-input .show-password-input { color: #d7d7de; opacity: 1; }
.woocommerce-account .woocommerce form .woocommerce-MyAccount-content .password-input .show-password-input::after { color: #d7d7de; opacity: 1; }
.woocommerce-account .woocommerce form .woocommerce-MyAccount-content .password-input .show-password-input:hover::after { color: #FFC531; }

/* ===== v1.9.14 — Địa chỉ: tiêu đề canh trái thẳng hàng; icon con mắt mật khẩu sáng rõ ===== */
.woocommerce-MyAccount-content .woocommerce-Address { text-align: left; }
.woocommerce-MyAccount-content .woocommerce-Address-title { display: block; text-align: left; }
.woocommerce-MyAccount-content .woocommerce-Address-title :is(h2, h3) { text-align: left; }
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input { color: #d7d7de; opacity: 1; }
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input::after { color: #d7d7de; opacity: 1; }
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input:hover::after { color: #FFC531; }


/* ===== v1.9.16 — Mắt mật khẩu: Woo vẽ icon bằng SVG nền fill #111111 (không ăn color)
   nên phải thay chính ảnh SVG sang bản fill sáng; link Thêm địa chỉ: tắt float phải của Woo ===== */
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input::before { background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23d7d7de"/></svg>'); }
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input.display-password::before { background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%23d7d7de"/></svg>'); }
.woocommerce .woocommerce-MyAccount-content .password-input .show-password-input:hover::before { background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%23FFC531"/></svg>'); }
.woocommerce-account .addresses .title .edit.edit { float: none; }

/* ===== v1.9.21: thẻ tài liệu NỔI BẬT (ghim đầu trang Tài Liệu) ===== */
.doc-card--featured {
    border: 2px solid #FFC531;
    box-shadow: 0 14px 46px rgba(255, 197, 49, 0.22);
}
.doc-badge.featured {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    border-radius: 0;
    padding: 8px 10px;
    background: linear-gradient(135deg, #ffc531, #e5a91e);
    color: #131317;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.08em;
}
@media (min-width: 1025px) {
    .shop-grid .doc-card--featured {
        grid-column: 1 / -1;
        flex-direction: row;
    }
    .shop-grid .doc-card--featured .doc-card-media {
        flex: 0 0 44%;
    }
    .shop-grid .doc-card--featured .doc-card-media img {
        height: 100%;
    }
    .shop-grid .doc-card--featured .doc-card-body {
        justify-content: center;
        padding: 26px 30px;
    }
    .shop-grid .doc-card--featured .doc-card-title {
        font-size: 23px;
    }
    .shop-grid .doc-card--featured .doc-card-excerpt {
        font-size: 15.5px;
    }
}

/* ===== v1.9.23: lưới trang Tài Liệu 3 ô mỗi dòng (trang chủ giữ 4 ô) ===== */
.doc-grid.shop-grid, .doc-grid.news-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
    .doc-grid.shop-grid, .doc-grid.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .doc-grid.shop-grid, .doc-grid.news-grid { grid-template-columns: 1fr; }
}

/* ===== v1.9.26: cột bài nhỏ Tiêu Điểm giãn đều khớp chiều cao bài chính ===== */
.news-featured .featured-grid { align-items: stretch; }
.news-featured .featured-side { height: 100%; }
.news-featured .mini-post { height: 100%; }