/*
Theme Name: Ngọc Khuê STEM
Theme URI: https://ngockhuestem.vn
Author: Ngọc Khuê STEM
Author URI: https://ngockhuestem.vn
Description: Học viện STEM & Robotics — giao diện theo brand logo.
Version: 4.9.0
Text Domain: ngockhue-stem
*/

:root {
    /* Brand từ logo */
    --brand: #004190;
    --brand-deep: #002e68;
    --sky: #3d8fd1;
    --sky-soft: #8ec4ea;
    /*
     * Palette phân bổ:
     *  Xanh dương = brand / nghiên cứu
     *  Vàng      = sản phẩm / kit
     *  Xanh lá   = nav / tài liệu / học tập
     *  Đỏ        = CTA hành động (hiếm, nổi)
     */
    --ember: #d62828;
    --ember-deep: #a51c1c;
    --gold: #e8a317;
    --gold-deep: #c4840a;
    --sun: #f5c542;
    --leaf: #2f9e6a;
    --leaf-deep: #1f7a50;
    --leaf-soft: #d8f0e4;
    --ink: #0b1f3a;
    --ink-soft: #3d4a5c;
    --muted: #5c6b7e;
    --line: #e6ebf0;
    --paper: #ffffff;
    --surface: #ffffff;
    --mist: #f5f7fa;
    --zone-warm: #fff8ef;
    --zone-deep: #00326e;

    /* Nền gradient xen kẽ từng khối */
    --bg-glow-a: radial-gradient(ellipse 70% 55% at 0% 0%, rgba(142, 196, 234, 0.22), transparent 58%);
    --bg-glow-b: radial-gradient(ellipse 55% 50% at 100% 0%, rgba(0, 65, 144, 0.08), transparent 55%);
    --bg-glow-c: radial-gradient(ellipse 50% 45% at 50% 100%, rgba(142, 196, 234, 0.14), transparent 55%);
    --bg-glow-gold: radial-gradient(ellipse 55% 45% at 100% 0%, rgba(232, 163, 23, 0.14), transparent 55%);
    --bg-glow-ember: radial-gradient(ellipse 50% 45% at 0% 100%, rgba(214, 40, 40, 0.08), transparent 55%);
    --bg-glow-leaf: radial-gradient(ellipse 55% 45% at 0% 0%, rgba(47, 158, 106, 0.12), transparent 55%);
    --bg-zone-white: #ffffff;
    --bg-zone-soft: var(--bg-glow-a), linear-gradient(180deg, #ffffff 0%, #f3f8fc 100%);
    --bg-zone-light: var(--bg-glow-a), linear-gradient(165deg, #ffffff 0%, #eef5fb 55%, #e8f1fa 100%);
    --bg-zone-mist: var(--bg-glow-leaf), linear-gradient(180deg, #f7fcf9 0%, #eef6f2 100%);
    --bg-zone-sky: var(--bg-glow-b), linear-gradient(180deg, #f7fbff 0%, #e8f3fb 48%, #dceaf6 100%);
    --bg-zone-gold: var(--bg-glow-gold), linear-gradient(180deg, #fffcf5 0%, #fff8ea 100%);
    --bg-zone-leaf: var(--bg-glow-leaf), linear-gradient(180deg, #f6fbf8 0%, #eaf6ef 100%);
    --bg-zone-ember: var(--bg-glow-ember), linear-gradient(180deg, #fffaf9 0%, #fff1ef 100%);
    --bg-page: #ffffff;
    --bg-page-hero: linear-gradient(180deg, #ffffff 0%, #eef5fb 100%);

    /* Giữ alias cũ để CSS section không gãy */
    --accent: #004190;
    --accent-hover: #002e68;
    --accent-deep: #004190;
    --accent-deep-hover: #002e68;
    --grad-warm: linear-gradient(135deg, #d62828 0%, #e8a317 100%);
    --grad-warm-hover: linear-gradient(135deg, #a51c1c 0%, #c4840a 100%);
    --grad-cool: linear-gradient(135deg, #004190 0%, #5ba3d9 100%);
    --grad-cool-hover: linear-gradient(135deg, #002e68 0%, #004190 100%);
    --grad-brand: linear-gradient(135deg, #004190 0%, #2f7ec4 55%, #5ba3d9 100%);
    --grad-brand-hover: linear-gradient(135deg, #002e68 0%, #004190 100%);
    --grad-ember: linear-gradient(135deg, #d62828 0%, #e85d2a 100%);
    --grad-ember-hover: linear-gradient(135deg, #a51c1c 0%, #d62828 100%);
    --grad-gold: linear-gradient(135deg, #e8a317 0%, #f5c542 100%);
    --grad-gold-hover: linear-gradient(135deg, #c4840a 0%, #e8a317 100%);
    --grad-leaf: linear-gradient(135deg, #2f9e6a 0%, #4fc48a 100%);
    --grad-leaf-hover: linear-gradient(135deg, #1f7a50 0%, #2f9e6a 100%);
    --grad-section: linear-gradient(135deg, #002554 0%, #004190 48%, #1e6bb8 100%);
    --grad-section-warm: linear-gradient(135deg, #7a1520 0%, #d62828 42%, #e8a317 100%);

    --font-display: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.07);
    --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.09);
    --pad-x: 3%;
    --content-max: 100%;
    --section-y: clamp(56px, 7.5vw, 96px);
}

/* Các trang listing / nội dung: lề vừa phải */
body.page-de-tai-nckh,
body.page-tin-tuc,
body.page-tai-lieu,
body.page-lien-he,
body.page-ve-chung-toi,
body.page-bo-san-pham,
body.page-template-page-tin-tuc,
body.page-template-page-tin-tuc-php,
body.page-template-page-tai-lieu,
body.page-template-page-tai-lieu-php,
body.page-template-page-bo-san-pham,
body.page-template-page-bo-san-pham-php,
body.page-id-7,
body.page-id-8,
body.page-id-9,
body.page-id-13,
body.page-id-16,
body.page-id-17 {
    --pad-x: clamp(16px, 3.5vw, 36px);
}

/* Chi tiết sản phẩm: lề 3% như cũ */
body.nk-catalog-san-pham {
    --pad-x: 3%;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.48;
    -webkit-font-smoothing: antialiased;
}

/* Page shells — cùng hệ gradient */
.bsp-page,
.dap-page,
.nckh-page,
.ct-page,
.about-page,
.dt-page {
    background: var(--bg-page);
}
.bsp-hero,
.dap-hero,
.nckh-hero,
.ct-hero,
.about-hero,
.news-hero {
    background: var(--bg-zone-soft);
    border-bottom: 1px solid var(--line);
}
.bsp-shop,
.dap-table-wrap,
.nckh-table-wrap,
.ct-panel,
.about-panel,
.dt-body {
    background: transparent;
}

/* Section band — tách khối rõ trên toàn site */
.gt-about-wrap,
.sp-section,
.da-section,
.nk-section {
    position: relative;
    border-top: 1px solid rgba(0, 65, 144, 0.1);
}
.gt-about-wrap::before,
.sp-section::before,
.da-section::before,
.nk-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--pad-x);
    width: min(72px, 18vw);
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: var(--grad-brand);
}

/* Kicker đồng bộ — badge nổi */
.gt-eyebrow,
.sp-kicker,
.da-kicker,
.nk-kicker,
.bsp-kicker,
.dap-kicker,
.nckh-kicker,
.ct-kicker,
.about-kicker,
.dt-card--summary .dt-kicker {
    display: inline-flex !important;
    align-items: center;
    font-family: var(--font-display);
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--brand) !important;
    border: 0 !important;
    border-left: 0 !important;
    padding: 6px 12px !important;
    border-radius: 8px;
    margin: 0 0 14px !important;
    box-shadow: 0 6px 16px rgba(0, 65, 144, 0.18);
}

/* Card nổi trên nền */
.sp-card,
.da-card,
.nk-card,
.gt-feature,
.bsp-card,
.dap-table,
.nckh-table,
.ct-grid,
.about-story,
.about-value,
.dt-card {
    border-color: rgba(0, 65, 144, 0.12) !important;
    box-shadow: var(--shadow-md) !important;
}
.sp-card:hover,
.da-card:hover,
.nk-card:hover,
.bsp-card:hover,
.gt-feature:hover {
    box-shadow: var(--shadow-lg) !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    box-sizing: border-box;
}

/* —— Header —— */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background:
        linear-gradient(180deg, rgba(220, 242, 228, 0.95) 0%, rgba(236, 248, 240, 0.92) 55%, rgba(245, 251, 247, 0.98) 100%);
    border-bottom: 1px solid rgba(120, 180, 140, 0.28);
    padding: 12px 0;
    backdrop-filter: blur(8px);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
.site-brand:hover {
    opacity: 0.88;
}
.brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    transition: transform 0.25s ease;
}
.site-brand:hover .brand-logo {
    transform: scale(1.05) rotate(-2deg);
}
.brand-mark { display: none; }
.brand-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.brand-title span { color: var(--brand); }
.brand-slogan {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 8px 12px;
    border-radius: var(--radius);
    transition: color 0.2s ease, background 0.2s ease;
}
.main-nav a:hover,
.main-nav a.active {
    color: var(--leaf-deep);
    background: rgba(47, 158, 106, 0.12);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btn-hotline {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink) !important;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 9px 14px;
    border-radius: var(--radius);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-hotline:hover {
    border-color: var(--brand);
    color: var(--brand) !important;
    background: rgba(0, 65, 144, 0.04);
}
.btn-header-cta {
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    background: var(--grad-brand);
    border: 1px solid transparent;
    padding: 10px 18px;
    border-radius: var(--radius);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-header-cta:hover {
    background: var(--grad-brand-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 65, 144, 0.28);
}

.mobile-toggle-btn {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 20px;
    padding: 8px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mobile-toggle-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(0, 65, 144, 0.04);
}

/* —— Footer —— */
.site-footer {
    background:
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(61, 143, 209, 0.18), transparent 55%),
        #001a3d;
    color: #b7c7db;
    padding: 72px 0 28px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}
.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.footer-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
.footer-brand {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.footer-brand span { color: var(--sky-soft); }
.site-footer p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
}
.footer-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 14px;
}
.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li { margin-bottom: 8px; }
.footer-links-list a {
    font-size: 15px;
    color: #b7c7db;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.footer-links-list a:hover {
    color: var(--sky-soft);
    padding-left: 4px;
}
.site-footer a[href^="tel"]:hover,
.site-footer a[href^="mailto"]:hover {
    color: var(--sky-soft);
}
.footer-bottom-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
    font-size: 13px;
    color: #7f92ab;
}

/* Social icons (Zalo / Facebook) */
.nk-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.nk-social__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 8px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.nk-social__btn img {
    width: 22px;
    height: 22px;
    display: block;
}
.nk-social__btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.nk-social__btn--zalo { background: #0068FF; }
.nk-social__btn--facebook { background: #1877F2; }

.nk-social--light .nk-social__btn {
    box-shadow: 0 2px 8px rgba(0, 65, 144, 0.12);
}

/* Floating round icons — kiểu web VN */
.floating-dock {
    position: fixed;
    bottom: 20px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dock-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease;
}
.dock-icon:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}
.dock-icon--phone:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
}
.dock-icon img,
.dock-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}
.dock-icon--zalo { background: #0068FF; }
.dock-icon--facebook { background: #1877F2; }
.dock-icon--phone {
    background: #fff;
    color: var(--brand);
    border: 1px solid var(--line);
}
@media (max-width: 720px) {
    .floating-dock { bottom: 14px; right: 12px; }
    .dock-icon { width: 44px; height: 44px; }
}

@media (max-width: 992px) {
    .mobile-toggle-btn { display: block; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        padding: 16px var(--pad-x);
        gap: 4px;
        align-items: stretch;
    }
    .main-nav.mobile-open { display: flex; }
    .header-actions .btn-hotline { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* —— Global interactive hover —— */
button,
[type="submit"],
[type="button"] {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.bsp-btn,
.dap-btn,
.nckh-btn,
.dt-btn,
.sp-card-btn,
.gt-btn,
.home-cta-btn,
.about-btn,
.ct-submit {
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.bsp-btn:hover,
.dap-btn:hover,
.nckh-btn:hover,
.dt-btn:hover,
.sp-card-btn:hover,
.gt-btn-primary:hover,
.home-cta-btn:hover,
.about-btn:hover:not(.about-btn-ghost),
.ct-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 65, 144, 0.18);
}

.bsp-card,
.sp-card,
.da-card,
.nk-card,
.dap-item,
.nckh-item,
.about-value,
.about-step,
.dt-card,
.bsp-filters,
.about-story,
.ct-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

/* Bo góc / nút đồng bộ toàn site */
.bsp-card,
.dap-item,
.nckh-item,
.dt-card,
.bsp-filters,
.about-story,
.about-value,
.about-step,
.ct-card,
.ct-field input,
.ct-field select,
.bsp-btn,
.dap-btn,
.nckh-btn,
.dt-btn,
.about-btn,
.ct-submit {
    border-radius: var(--radius);
}
.bsp-card,
.dap-item,
.nckh-item,
.dt-card,
.about-story {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.bsp-card-media img,
.sp-card-media img,
.da-media img,
.dap-thumb img,
.about-story-media img,
.gt-about-photo img {
    transition: transform 0.45s ease;
}
.bsp-card:hover .bsp-card-media img,
.sp-card:hover .sp-card-media img,
.da-card:hover .da-media img,
.dap-item:hover .dap-thumb img,
.about-story:hover .about-story-media img,
.gt-about-photo:hover img {
    transform: scale(1.04);
}

.bsp-check,
.dap-check {
    transition: color 0.15s ease;
}
.bsp-check:hover,
.dap-check:hover {
    color: var(--brand);
}

.ct-field input,
.ct-field select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ct-field input:hover,
.ct-field select:hover {
    border-color: rgba(0, 65, 144, 0.35);
}

.bsp-sort select {
    transition: border-color 0.2s ease;
}
.bsp-sort select:hover {
    border-color: var(--brand);
}