/*
 Theme Name: Flatsome Child - Tranh Xuân Nguyên
 Theme URI: https://tranhxuannguyen.com
 Template: flatsome
 Author: Tranh Thêu Tay Xuân Nguyên
 Description: Flatsome child theme cho Tranh Thêu Tay Xuân Nguyên - 91 Nguyễn Thái Học, Hà Nội
 Version: 1.0.0
 Text Domain: flatsome-child
*/

/* ===== Google Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

/* ===== CSS Variables ===== */
:root {
    --xn-green-dark: #0D3D1A;
    --xn-green: #339966;
    --xn-green-light: #6FAE00;
    --xn-blue: #2888C4;
    --xn-blue-light: #3695CB;
    --xn-blue-header: #8CA9C1;
    --xn-gold: #B8860B;
    --xn-gold-light: #DAA520;
    --xn-cream: #F0EFE6;
    --xn-bg: #FEFEFE;
    --xn-text: #333;
    --xn-white: #fff;
}

/* ===== Global Overrides ===== */
body {
    font-family: 'Nunito Sans', Tahoma, Arial, sans-serif !important;
    background-color: #f5f4ef !important;
}

h1, h2, h3, h4, h5, h6,
.section-title {
    font-family: 'Playfair Display', 'Times New Roman', serif !important;
}

/* ===== Primary Color Override ===== */
:root {
    --primary-color: #0D3D1A !important;
}
a { color: var(--xn-green); }
a:hover { color: var(--xn-gold); }

/* ===== Topbar ===== */
.header-top {
    background: linear-gradient(135deg, var(--xn-green-dark) 0%, #1a5c2e 100%) !important;
    color: var(--xn-white) !important;
    font-size: 13px;
    border-bottom: 2px solid var(--xn-gold);
}
.header-top a,
.header-top .nav > li > a {
    color: var(--xn-white) !important;
}
.header-top a:hover { opacity: 0.85; }

/* ===== Header ===== */
.header-main {
    background: var(--xn-cream) !important;
    border-bottom: 3px solid var(--xn-green-dark);
}
.logo img {
    max-height: 80px !important;
}

/* ===== Navigation ===== */
.header-nav-main {
    background: linear-gradient(135deg, var(--xn-green-dark) 0%, #1a5c2e 100%) !important;
}
.header-nav-main .nav > li > a {
    color: var(--xn-white) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    font-size: 13px;
}
.header-nav-main .nav > li > a:hover,
.header-nav-main .nav > li.active > a,
.header-nav-main .nav > li.current-menu-item > a {
    color: var(--xn-gold-light) !important;
    background: rgba(255,255,255,0.1) !important;
}
.nav-dropdown {
    border-top: 3px solid var(--xn-gold) !important;
}
.nav-dropdown li a:hover {
    color: var(--xn-green) !important;
}

/* ===== Buttons ===== */
.button.primary,
a.button.primary,
button.primary {
    background: linear-gradient(135deg, var(--xn-green-dark), #1a5c2e) !important;
    border: none !important;
    border-radius: 4px !important;
    color: var(--xn-white) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.button.primary:hover {
    background: linear-gradient(135deg, var(--xn-gold), var(--xn-gold-light)) !important;
}

/* ===== Product Cards ===== */
.product-card {
    background: var(--xn-white);
    border: 1px solid #e0ddd5;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
}
.product-card:hover {
    box-shadow: 0 6px 20px rgba(13,61,26,0.12);
    transform: translateY(-3px);
}
.product-card img {
    transition: transform 0.4s ease;
}
.product-card:hover img {
    transform: scale(1.05);
}

/* ===== Section Title — giống gốc ===== */
.xn-section-title {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: var(--xn-white);
    text-transform: uppercase;
    padding: 8px 25px;
    background: linear-gradient(135deg, var(--xn-green-dark), #1a5c2e);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* ===== Hide Flatsome defaults ===== */
.element-error,
li:has(.element-error),
.header-divider,
.header-newsletter-item {
    display: none !important;
}
.header-social-icons .social-icons a[href='http://url'],
.header-social-icons .social-icons a[href='mailto:your@email'] {
    display: none !important;
}

/* ===== Footer ===== */
.footer-wrapper,
.absolute-footer {
    background: var(--xn-green-dark) !important;
}
.footer-wrapper h3,
.footer-wrapper .widget-title {
    color: var(--xn-gold-light) !important;
    font-family: 'Playfair Display', serif !important;
    border-bottom: 2px solid var(--xn-gold);
    padding-bottom: 10px;
}
.footer-wrapper,
.footer-wrapper p,
.footer-wrapper li {
    color: #ccc !important;
}
.footer-wrapper a {
    color: #bbb !important;
}
.footer-wrapper a:hover {
    color: var(--xn-gold-light) !important;
}
.absolute-footer {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color: #888 !important;
    font-size: 13px;
}

/* ===== Floating CTA ===== */
.xn-float-btns {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xn-float-btns a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.25);
    transition: transform 0.3s;
    position: relative;
}
.xn-float-btns a:hover {
    transform: scale(1.15);
}
.xn-pulse {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation: xn-pulse-anim 1.5s infinite;
    opacity: 0.5;
}
@keyframes xn-pulse-anim {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .xn-section-title { font-size: 16px; padding: 6px 18px; }
}