/*
Theme Name: Tân Doanh 2ND
Description: This is a child theme for Flatsome Theme — premium light + gold storefront (global styles).
Author: UX Themes
Template: flatsome
Version: 4.0
*/

/* =====================================================================
   GLOBAL (loaded on every page): tokens, header, nav/mega, buttons, footer.
   Page-specific CSS is split into /css/home.css and /css/shop.css and
   enqueued conditionally (see functions.php) to keep each page lean (PSI).
   ===================================================================== */

:root {
  --gold:      #C6A15B;
  --gold-deep: #A07B2E;
  --gold-soft: #E7D6AE;
  --ivory:     #FAF7F1;
  --paper:     #FFFFFF;
  --ink:       #17130B;
  --ink-soft:  #524B3E;
  --muted:     #8C8474;
  --line:      rgba(184, 137, 43, 0.28);
  --line-soft: rgba(23, 19, 11, 0.10);
  --charcoal:  #16130D;
  --shadow:    0 22px 50px rgba(23, 19, 11, 0.10);
  --shadow-sm: 0 10px 28px rgba(23, 19, 11, 0.08);
  --fs-color-primary: #C6A15B;
  --fs-color-secondary: #16130D;
  --gold-dots: radial-gradient(rgba(184,137,43,0.10) 1px, transparent 1.4px);
}

/* ---------- Wider container (1600) ---------- */
body .container,
body .row:not(.row-collapse):not([class*="row-inner"]) { max-width: 1600px; }
@media (min-width: 850px) { body .container { padding-left: 30px; padding-right: 30px; } }

/* ---------- Base ---------- */
body {
  background-color: var(--ivory); color: var(--ink-soft);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400; letter-spacing: .1px;
}
#main, .page-wrapper, body #wrapper { background-color: var(--ivory); }
p { color: var(--ink-soft); }
h1, h2, h3, h4, h5, h6, .is-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif !important;
  color: var(--ink); letter-spacing: .2px; font-weight: 700;
}
a { color: var(--gold-deep); }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: #fff; }

/* ---------- Buttons ---------- */
.button, button, input[type="submit"], a.button {
  font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; border-radius: 10px;
}
.button.primary, a.button.primary, button.primary, input[type="submit"] {
  background-color: var(--gold); border-color: var(--gold); color: #fff;
  box-shadow: 0 8px 20px rgba(198,161,91,0.28);
}
.button.primary:hover, a.button.primary:hover, button.primary:hover, input[type="submit"]:hover {
  background-color: var(--gold-deep); border-color: var(--gold-deep); color: #fff;
}
.button.is-outline, a.button.is-outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.button.is-outline:hover, a.button.is-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Header ---------- */
#header, .header, .header-wrapper, .header-main, .header-bottom {
  background-color: var(--ivory) !important; border-color: var(--line-soft);
}
.header-bottom { border-top: 1px solid var(--line-soft); }
#top-bar, .header-top { background-color: var(--charcoal) !important; }
.header-top, .header-top a, .header-top .nav > li > a { color: #cdbf9e !important; font-size: 12px; letter-spacing: .4px; }
.header-top a:hover { color: var(--gold) !important; }
.header-nav a, .nav > li > a { color: var(--ink) !important; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; font-size: 13px; }
.header-nav a:hover, .nav > li > a:hover, .nav > li.active > a { color: var(--gold-deep) !important; }
.nav-line-bottom > li > a:before, .nav-line > li > a:before { background: var(--gold); }
.cart-icon strong:after { border-color: var(--gold); }
.cart-icon .cart-icon-handle, .icon-shopping-cart { color: var(--gold-deep); }
.header .logo a { font-family: "Playfair Display", serif; color: var(--ink); }
.stuck .header-main { background-color: rgba(250,247,241,0.96) !important; backdrop-filter: saturate(140%) blur(6px); box-shadow: var(--shadow-sm); }

/* ---------- Mega menu (header on all pages) ---------- */
.nav-dropdown, ul.nav-dropdown {
  background-color: var(--paper) !important; border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: 12px;
}
.nav-dropdown a, .nav-dropdown li > a { color: var(--ink-soft) !important; }
.nav-dropdown a:hover { color: var(--gold-deep) !important; background: transparent; }
.td-mega { padding: 30px 34px; max-width: 1560px; margin: 0 auto; }
.td-mega .mega-col-title {
  font-family: "Playfair Display", serif; color: var(--gold-deep);
  font-size: 15px; letter-spacing: .4px; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.td-mega ul { list-style: none; margin: 0; padding: 0; }
.td-mega ul li { margin: 0 0 8px; }
.td-mega ul li a { color: var(--ink-soft); font-size: 13.5px; letter-spacing: .2px; transition: color .18s, padding-left .18s; }
.td-mega ul li a:hover { color: var(--gold-deep); padding-left: 4px; }
.td-mega .mega-feature { border-left: 1px solid var(--line); padding-left: 30px; }

/* Logo wordmark fallback */
.td-logo { font-family: "Playfair Display", serif; font-weight: 800; font-size: 26px; color: var(--ink); line-height: 1; }
.td-logo b { color: var(--gold-deep); }

/* ---------- Footer (dark, gold) ---------- */
.footer-wrapper, #footer, .footer, .absolute-footer {
  background-color: var(--charcoal) !important; color: #b7ad97; border-top: 3px solid var(--gold);
}
.footer h3, .footer .widget-title { color: var(--gold) !important; font-family: "Playfair Display", serif; letter-spacing: .3px; }
.footer a { color: #cdc4ae; }
.footer a:hover { color: var(--gold); }
.absolute-footer { color: #8c836e; background-color: #100d08 !important; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: #d8cdb2; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Sticky mobile CTA (SEO/UX #9) ---------- */
.td-mobile-cta { display: none; }
@media (max-width: 849px) {
  .td-mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: var(--charcoal); border-top: 2px solid var(--gold);
  }
  .td-mobile-cta a { flex: 1; text-align: center; padding: 13px 6px; color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; }
  .td-mobile-cta a.is-gold { background: var(--gold); color: #17130B; }
  .td-mobile-cta a + a { border-left: 1px solid rgba(255,255,255,0.12); }
  body { padding-bottom: 50px; }
}

@media only screen and (max-width: 48em) {
  body { letter-spacing: 0; }
  h1 { font-size: 30px; }
  .td-mega { padding: 8px 4px; }
  .td-mega .mega-feature { border-left: 0; padding-left: 0; }
  .td-logo { font-size: 20px; }
}