/* Design hooks: a store's own design CSS may set --sid-button, --sid-button-text (Add to Cart,
   Proceed to Checkout, Place Order) and --sid-accent (selected option). Unset: black, white, #3340d3. */
/* Store look from snippet #21 (fonts, product page, cart, checkout, footer). Was inline on every page. */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
.button, .heading-font, .nav > li > a, .breadcrumbs, .price, .amount {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}
/* Footer dung Barlow Condensed dung nhu store BigCommerce */
body .footer-wrapper, body .footer-wrapper *,
body #footer, body #footer *,
body .absolute-footer, body .absolute-footer * {
    font-family: 'Barlow Condensed', Arial, sans-serif !important;
}
/* Trang san pham: tieu de, gia va cac nut dung Montserrat nhu store mau */
body.single-product .product-title.product_title,
body.single-product .price-wrapper .price,
body.single-product .price-wrapper .price .amount,
body.single-product .price-wrapper .price bdi,
body.single-product .single_add_to_cart_button,
body.single-product .go-to-checkout {
    font-family: 'Montserrat', Arial, sans-serif !important;
}
body.single-product .product-title.product_title {
    font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.56px !important; color: #000 !important; line-height: 1.28 !important;
}
body.single-product .price-wrapper .price,
body.single-product .price-wrapper .price .amount,
body.single-product .product-price-container .price bdi {
    font-size: 24px !important; font-weight: 700 !important; color: #000 !important;
}
body.single-product .single_add_to_cart_button,
body.single-product form.cart .single_add_to_cart_button {
    display: block !important; width: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important;
    background-color: #000 !important; color: #fff !important; border: 1px solid #000 !important;
    font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.45px !important;
    border-radius: 9px !important; padding: 16px 24px !important; min-height: 58px !important; line-height: 1.2 !important;
    box-shadow: none; transition: opacity .15s ease;
}
body.single-product .single_add_to_cart_button:hover { opacity: .85; background-color: #000 !important; color: #fff !important; }
/* cart icon draws in currentColor but carries its own colour class: white like the label */
body.single-product .single_add_to_cart_button svg { color: #fff !important; }
body.single-product .woocommerce-variation-add-to-cart,
body.single-product form.cart .cart-inner,
body.single-product form.cart:not(.variations_form) {
    display: block !important;
}
body.single-product .woocommerce-variation-add-to-cart > .quantity,
body.single-product form.cart > .quantity { display: flex !important; width: max-content !important; margin: 0 0 12px !important; }
/* beats the child theme rule that forces a transparent background */
body.single-product section.main-single-product .row.content-single-product .add-to-cart-container button.single_add_to_cart_button,
body.single-product section.main-single-product .row.content-single-product .add-to-cart-container button.single_add_to_cart_button.button.alt {
    background: var(--sid-button, #000) !important; background-color: var(--sid-button, #000) !important; color: var(--sid-button-text, #fff) !important;
    border: 1px solid var(--sid-button, #000) !important; border-radius: 9px !important;
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important;
    letter-spacing: 0.45px !important; padding: 16px 24px !important; min-height: 58px !important;
}
/* ---- Checkout page -> trang/den, cung cong thuc voi cart ---- */
body.woocommerce-checkout {
    --fs-color-primary: #000;
    --fs-color-secondary: #000;
    --fs-experimental-link-color: #000;
    --fs-experimental-link-color-hover: #555;
}
body.woocommerce-checkout #place_order {
    background: var(--sid-button, #000) !important; background-color: var(--sid-button, #000) !important; color: var(--sid-button-text, #fff) !important;
    border: 1px solid var(--sid-button, #000) !important; border-radius: 9px !important;
    font-size: 15px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.45px !important;
    min-height: 58px !important; box-shadow: none !important;
}
body.woocommerce-checkout #place_order:hover {
    background: #222 !important; background-color: #222 !important; color: #fff !important;
}
body.woocommerce-checkout main,
body.woocommerce-checkout #content,
body.woocommerce-checkout .shop-container,
body.woocommerce-checkout .page-title,
body.woocommerce-checkout .checkout-page-title,
body.woocommerce-checkout .breadcrumbs,
body.woocommerce-checkout form.checkout,
body.woocommerce-checkout .shop_table thead th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .order-total,
body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout h3,
body.woocommerce-checkout label { color: #000 !important; }
body.woocommerce-checkout .widget-title,
body.woocommerce-checkout .widget-title span,
body.woocommerce-checkout .icon-angle-right,
body.woocommerce-checkout .divider { color: #000 !important; fill: #000 !important; border-color: #000 !important; }
body.woocommerce-checkout a { color: #000 !important; }
body.woocommerce-checkout a:hover { color: #555 !important; }
body.woocommerce-cart {
    --fs-color-primary: #000;
    --fs-color-secondary: #000;
    --fs-experimental-link-color: #000;
    --fs-experimental-link-color-hover: #555;
}
body.woocommerce-cart .checkout-button,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart a.button.checkout {
    background: var(--sid-button, #000) !important; background-color: var(--sid-button, #000) !important; color: var(--sid-button-text, #fff) !important;
    border: 1px solid var(--sid-button, #000) !important; border-radius: 9px !important;
    font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.45px !important;
}
body.woocommerce-cart .checkout-button:hover,
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: #222 !important; background-color: #222 !important; color: #fff !important;
}
body.woocommerce-cart button[name=update_cart],
body.woocommerce-cart .actions .button {
    background: #fff !important; color: #000 !important; border: 2px solid #000 !important;
}
body.woocommerce-cart .shop_table thead th,
body.woocommerce-cart .cart_totals,
body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td,
body.woocommerce-cart .cart_totals h3,
body.woocommerce-cart .product-name a,
body.woocommerce-cart .woocommerce-cart-form a:not(.remove) { color: #000 !important; }
body.woocommerce-cart main,
body.woocommerce-cart #content,
body.woocommerce-cart .shop-container,
body.woocommerce-cart .page-title,
body.woocommerce-cart .checkout-page-title,
body.woocommerce-cart .breadcrumbs { color: #000 !important; }
body.woocommerce-cart .widget-title,
body.woocommerce-cart .widget-title span,
body.woocommerce-cart .icon-tag { color: #000 !important; fill: #000 !important; }
body.woocommerce-cart a.remove { color: #000 !important; border-color: #000 !important; }
body.woocommerce-cart a.remove:hover { background: #000 !important; color: #fff !important; }
/* 1. Bo section Happy Customers duoi trang san pham */
body.single-product .section.review-single-product { display: none !important; }
/* 2. Bo not phan Additional information (Description da chuyen xuong full-width) */
body.single-product .product-page-accordian { display: none !important; }
/* 3. Nut Check Out: cung kich thuoc Add to Cart, nen trang chu den */
body.single-product .go-to-checkout,
body.single-product section.main-single-product .row.content-single-product .add-to-cart-container .go-to-checkout {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    margin: 10px 0 0 !important;
    background: #fff !important; background-color: #fff !important; color: #000 !important;
    border: 1px solid #000 !important; border-radius: 9px !important;
    font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important;
    letter-spacing: 0.45px !important; padding: 16px 24px !important; min-height: 58px !important;
    line-height: 1.2 !important; text-align: center !important; box-shadow: none !important;
}
body.single-product .go-to-checkout:hover {
    background: #f2f2f2 !important; background-color: #f2f2f2 !important; color: #000 !important;
}
/* ---- Moi o search phai la chu den. Flatsome co san vai o search dung
   chu trang tren nen trang mo (bien the cho header toi) - vo hinh khi go. ---- */
input[type=search],
.search-field,
.searchform input[type=search],
.searchform-wrapper input,
#ttg-dresora-header-v3 .ttg-v3-search-form input {
    color: #111 !important;
    background-color: #fff !important;
    caret-color: #111 !important;
}
/* Flatsome ep .form-flat input { color: currentcolor !important } roi to trang
   qua .dark - nen phai vua tang do uu tien, vua ep mau cho ca container. */
body .searchform-wrapper .form-flat input:not([type=submit]),
body .searchform-wrapper input[type=search],
body .searchform input[type=search],
body .search-field {
    color: #111 !important; background-color: #fff !important; caret-color: #111 !important;
}
body .searchform-wrapper, body .searchform, body .header-search-form { color: #111 !important; }
/* Snippet 19 dat -webkit-text-fill-color: #fff !important cho o search
   (viet cho header nen den ban dau). Thuoc tinh nay GHI DE color khi
   trinh duyet ve chu -> go vao thi chu trang tren nen trang, vo hinh.
   Phai ep rieng no, sua color thoi la khong du. */
#ttg-dresora-header-v3 .ttg-v3-search-form input[type=search],
#ttg-dresora-header-v3 .ttg-v3-search-form input,
input[type=search],
.search-field,
.searchform-wrapper input,
body .searchform input[type=search] {
    -webkit-text-fill-color: #111 !important;
}
#ttg-dresora-header-v3 .ttg-v3-search-form input[type=search]::placeholder,
input[type=search]::placeholder {
    -webkit-text-fill-color: #6b6b6b !important;
}
/* #6b6b6b: 5.3:1 on white (WCAG AA); the lighter grey was 2.7:1 and hard to read */
input[type=search]::placeholder,
.search-field::placeholder,
.searchform-wrapper input::placeholder { color: #6b6b6b !important; }
/* Cart / checkout steps: Flatsome greys the steps ahead #ccc (1.6:1) */
.checkout-breadcrumbs a:not(.current) { color: #767676 !important; }
.live-search-results, .autocomplete-suggestions,
.live-search-results *, .autocomplete-suggestions * { color: #111 !important; }
.live-search-results { background: #fff !important; }

/* ---- Thanh menu header: nen den, chu trang 12px/700 uppercase ----
   LUU Y: o <=849px .ttg-v3-nav la display:none va chi mo bang class
   .is-open tu nut hamburger. TUYET DOI khong dat display tren
   .ttg-v3-nav ngoai media query, se lam menu mobile bung ra vinh vien. */
body #ttg-dresora-header-v3 .ttg-v3-bottom {
    background: #000 !important; background-color: #000 !important;
    border-top: 0 !important;
}
body #ttg-dresora-header-v3 .ttg-v3-nav a {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
}
body #ttg-dresora-header-v3 .ttg-v3-nav a:hover { color: #b7b7b7 !important; }
@media (min-width: 850px) {
    body #ttg-dresora-header-v3 .ttg-v3-bottom { min-height: 48px !important; }
    body #ttg-dresora-header-v3 .ttg-v3-nav {
        max-width: 1250px !important; width: 100% !important; margin: 0 auto !important;
        padding: 0 16px !important; justify-content: center !important;
        min-height: 48px !important;
    }
    body #ttg-dresora-header-v3 .ttg-v3-nav a { padding: 0 21px !important; min-height: 46px !important; }
}
@media (max-width: 849px) {
    body #ttg-dresora-header-v3 .ttg-v3-nav a {
        padding: 0 16px !important;
        border-bottom: 1px solid rgba(255,255,255,.12) !important;
    }
}

/* ---- An icon Apple Pay va PayPal trong dai payment icons cua Flatsome ----
   Dai nay render o 2 cho: day cart drawer va footer. Thu tu co dinh theo
   tuy chon theme: 1 amex, 2 mastercard, 3 visa, 4 APPLE PAY, 5 gpay, 6 PAYPAL.
   Neu sau nay doi danh sach icon trong Customize thi phai chinh lai so thu tu. */
.payment-icons .payment-icon:nth-child(4),
.payment-icons .payment-icon:nth-child(6) { display: none !important; }

/* ---- Cart drawer: khoang cach meta, nen trang, icon payment xuong day ----
   1. Plugin Custom Product Addons dat min-height: 80px cho moi dong meta
      (.wcpa_cart_meta_item) -> hai dong custom name/number chiem ~160px
      chu yeu la khoang trong. Ep ve auto.
   2. #cart-popup von trong suot nen lop overlay xam lo ra o phan duoi.
   3. .cart-popup-inner la flex column -> margin-top:auto day icon xuong day. */
#cart-popup .wcpa_cart_meta_item {
    min-height: 0 !important;
    margin: 0 0 2px !important;
    padding-right: 30px !important;
}
#cart-popup .wcpa_cart_meta_item p,
#cart-popup .wcpa_cart_meta_item-label,
#cart-popup .wcpa_cart_meta_item-value,
#cart-popup .wcpa_cart_meta_item-value p {
    margin: 0 !important; line-height: 1.4 !important;
}
#cart-popup .wcpa_cart_meta { margin: 0 0 4px !important; }

#cart-popup, .cart-popup-inner {
    background: #fff !important; background-color: #fff !important;
    min-height: 100% !important; box-sizing: border-box !important;
}
/* ---- Danh sach san pham trong drawer khong bi cat khi nhieu hang ----
   Flatsome khoa ul.woocommerce-mini-cart o max-height: 300px + overflow auto,
   nen item thu 4 tro di bi cat ngang trong khi phia duoi nut CHECKOUT van con
   mot khoang trang lon. Go tran va cho khung cha chieu cao xac dinh de danh
   sach co gian chiem het cho, chi cuon khi that su qua nhieu hang. */
#cart-popup, .cart-popup-inner { height: 100% !important; }
#cart-popup ul.woocommerce-mini-cart,
#cart-popup .widget_shopping_cart_content ul.cart_list {
    max-height: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
/* Subtotal + 2 nut + icon giu nguyen chieu cao, khong bi co lai */
#cart-popup .woocommerce-mini-cart__total,
#cart-popup .woocommerce-mini-cart__buttons,
#cart-popup .payment-icons { flex: 0 0 auto !important; }

#cart-popup .payment-icons {
    margin: auto 0 0 !important;
    padding-top: 18px !important;
    width: 100% !important;
    text-align: center !important;
}
/* ---- Cart drawer (Flatsome off-canvas) phai nam TREN header. ----
   Flatsome dat .mfp-bg 1042 / .mfp-wrap 1043, con header snippet 19 la
   9999 -> header phu len panel gio hang khi vua them san pham. */
.mfp-bg { z-index: 10500 !important; }
.mfp-wrap { z-index: 10501 !important; }

/* ---- Nut trong cart drawer -> trang/den giong trang san pham ---- */
#cart-popup .button,
.cart-popup-inner .button {
    border-radius: 9px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.45px !important;
    box-shadow: none !important;
}
#cart-popup .button.checkout,
.cart-popup-inner .button.checkout {
    background: var(--sid-button, #000) !important; background-color: var(--sid-button, #000) !important;
    color: var(--sid-button-text, #fff) !important; border: 1px solid var(--sid-button, #000) !important;
}
#cart-popup .button:not(.checkout),
.cart-popup-inner .button:not(.checkout) {
    background: #fff !important; background-color: #fff !important;
    color: #000 !important; border: 1px solid #000 !important;
}
#cart-popup, .cart-popup-inner, #cart-popup * { color: #111 !important; }
#cart-popup .button.checkout { color: #fff !important; }

/* ---- Checkout: an cac muc da bo ---- */
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .ship-to-different-address,
body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout #shipping_insurance_field,
body.woocommerce-checkout .woocommerce-additional-fields:empty { display: none !important; }

/* ---- An header o trang cart (desktop + mobile) theo yeu cau ---- */
body.woocommerce-cart .ttg-topbar,
body.woocommerce-cart #ttg-dresora-header-v3 { display: none !important; }

/* ---- Ep chu den, dung tien to #footer ----
   Rule thang truoc do la .footer-wrapper p, ... #footer p { color: #fff }.
   #footer la selector ID nen manh hon moi selector class. Phai dung chinh
   #footer lam tien to thi moi thang duoc. */
#footer .dresora-faq-section, #footer .ttgs-faq-section, #footer .tgx-faq-section, #footer .dresora-faq-section *, #footer .ttgs-faq-section *, #footer .tgx-faq-section *, #footer .bae-community-gallery, #footer .bae-community-gallery * { color: #000 !important; }
#footer .dresora-faq-eyebrow, #footer .ttgs-faq-eyebrow, #footer .tgx-faq-eyebrow { color: #111 !important; }
#footer .dresora-faq-subtitle, #footer .ttgs-faq-subtitle, #footer .tgx-faq-subtitle { color: #111 !important; }
#footer .dresora-faq-answer, #footer .ttgs-faq-answer, #footer .tgx-faq-answer { color: #111 !important; }
#footer .dresora-faq-badge, #footer .ttgs-faq-badge, #footer .tgx-faq-badge { color: #000 !important; background: #fff !important; border-color: #000 !important; }
#footer .dresora-faq-icon, #footer .ttgs-faq-icon, #footer .tgx-faq-icon { color: #000 !important; border-color: #000 !important; }
#footer .dresora-faq-section, #footer .ttgs-faq-section, #footer .tgx-faq-section { background: #fff !important; }
#footer .bae-community-gallery { background: #f7f7f7 !important; }
#footer .dresora-faq-item, #footer .ttgs-faq-item, #footer .tgx-faq-item { background: #f8f8f8 !important; }
#footer .dresora-faq-item[open], #footer .ttgs-faq-item[open], #footer .tgx-faq-item[open] { background: #fff !important; }
#footer .dresora-faq-plus::before, #footer .ttgs-faq-plus::before, #footer .tgx-faq-plus::before, #footer .dresora-faq-plus::after, #footer .ttgs-faq-plus::after, #footer .tgx-faq-plus::after { background: #000 !important; }

/* ---- Section Join Our Jersey Community (dai anh cuon ngang) ---- */
.bae-community-gallery { width: 100%; background: #f7f7f7; padding: 36px 0 40px; overflow: hidden; }
.bae-community-gallery__inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.bae-community-gallery__title { margin: 0 0 24px; text-align: center; font-size: 18px; line-height: 1.2;
    font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #111; }
.bae-community-gallery__viewport { position: relative; width: 100%; overflow: hidden; }
.bae-community-gallery__track { display: flex; gap: 14px; width: max-content;
    animation: baeCommunityScroll 55s linear infinite; will-change: transform; }
.bae-community-gallery:hover .bae-community-gallery__track { animation-play-state: paused; }
.bae-community-gallery__card { flex: 0 0 auto; width: 180px; height: 260px; overflow: hidden; background: #fff; }
.bae-community-gallery__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes baeCommunityScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .bae-community-gallery__track { animation: none; }
    .bae-community-gallery__viewport { overflow-x: auto; }
}
@media (max-width: 1024px) {
    .bae-community-gallery { padding: 28px 0 32px; }
    .bae-community-gallery__inner { padding: 0 16px; }
    .bae-community-gallery__card { width: 150px; height: 220px; }
}
@media (max-width: 800px) {
    .bae-community-gallery { padding: 24px 0 28px; }
    .bae-community-gallery__title { margin-bottom: 18px; font-size: 16px; }
    .bae-community-gallery__inner { padding: 0 12px; }
    .bae-community-gallery__track { gap: 10px; animation-duration: 40s; }
    .bae-community-gallery__card { width: 120px; height: 170px; }
}
@media (max-width: 380px) { .bae-community-gallery__card { width: 110px; height: 155px; } }

/* ---- Section Dresora Limited Tier + FAQ ---- */
.dresora-faq-section, .ttgs-faq-section, .tgx-faq-section { width: 100%; padding: 72px 20px 82px; box-sizing: border-box; background: #fff; }
.dresora-faq-container, .ttgs-faq-container, .tgx-faq-container { width: 100%; max-width: 1080px; margin: 0 auto; }
.dresora-faq-eyebrow, .ttgs-faq-eyebrow, .tgx-faq-eyebrow { margin: 0 0 12px; text-align: center; color: #666; font-size: 11px;
    line-height: 1; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.dresora-faq-title, .ttgs-faq-title, .tgx-faq-title { text-align: center; letter-spacing: -0.025em; text-transform: uppercase;
    margin: 0 0 12px !important; padding: 0 !important; color: #111 !important;
    font-size: 30px !important; line-height: 1.12 !important; font-weight: 800 !important; }
.dresora-faq-subtitle, .ttgs-faq-subtitle, .tgx-faq-subtitle { max-width: 720px; text-align: center; margin: 0 auto 20px !important;
    padding: 0 !important; color: #555 !important; font-size: 15px !important;
    line-height: 1.65 !important; font-weight: 400 !important; }
.dresora-faq-subtitle strong, .ttgs-faq-subtitle strong, .tgx-faq-subtitle strong { color: #111; font-weight: 800; }
.dresora-faq-badges, .ttgs-faq-badges, .tgx-faq-badges { display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 8px; margin: 0 0 38px; }
.dresora-faq-badge, .ttgs-faq-badge, .tgx-faq-badge { display: inline-flex; align-items: center; justify-content: center;
    min-height: 28px; padding: 6px 11px; border: 1px solid #111; border-radius: 3px;
    color: #111; background: #fff; font-size: 10px; line-height: 1; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; }
.dresora-faq-list, .ttgs-faq-list, .tgx-faq-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dresora-faq-item, .ttgs-faq-item, .tgx-faq-item { width: 100%; box-sizing: border-box; overflow: hidden; border-radius: 8px;
    background: #f8f8f8; margin: 0 !important; padding: 0 !important;
    border: 1px solid #e5e5e5 !important; transition: border-color .18s, background-color .18s; }
.dresora-faq-item:hover, .ttgs-faq-item:hover, .tgx-faq-item:hover { background: #f5f5f5; border-color: #ccc !important; }
.dresora-faq-item[open], .ttgs-faq-item[open], .tgx-faq-item[open] { background: #fff; border-color: #c9c9c9 !important; }
.dresora-faq-question, .ttgs-faq-question, .tgx-faq-question { list-style: none !important; display: flex; align-items: center;
    justify-content: space-between; width: 100%; min-height: 70px; box-sizing: border-box;
    cursor: pointer; user-select: none; margin: 0 !important; padding: 20px 25px !important; }
.dresora-faq-question::-webkit-details-marker, .ttgs-faq-question::-webkit-details-marker, .tgx-faq-question::-webkit-details-marker { display: none !important; }
.dresora-faq-question::marker, .ttgs-faq-question::marker, .tgx-faq-question::marker { content: ''; }
.dresora-faq-question-left, .ttgs-faq-question-left, .tgx-faq-question-left { display: flex; align-items: center; gap: 14px; min-width: 0; padding-right: 25px; }
.dresora-faq-icon, .ttgs-faq-icon, .tgx-faq-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 21px;
    width: 21px; height: 21px; border: 1px solid #111; border-radius: 50%; box-sizing: border-box;
    color: #111; font-size: 11px; line-height: 1; font-weight: 800; }
.dresora-faq-question-text, .ttgs-faq-question-text, .tgx-faq-question-text { text-align: left; letter-spacing: 0.005em; color: #151515 !important;
    font-size: 14px !important; line-height: 1.45 !important; font-weight: 800 !important; }
.dresora-faq-plus, .ttgs-faq-plus, .tgx-faq-plus { position: relative; display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.dresora-faq-plus::before, .ttgs-faq-plus::before, .tgx-faq-plus::before { content: ''; position: absolute; top: 50%; left: 50%; width: 14px;
    height: 1.5px; background: #111; transform: translate(-50%, -50%); }
.dresora-faq-plus::after, .ttgs-faq-plus::after, .tgx-faq-plus::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.5px;
    height: 14px; background: #111; transform: translate(-50%, -50%); transition: opacity .18s, transform .18s; }
.dresora-faq-item[open] .dresora-faq-plus::after, .ttgs-faq-item[open] .ttgs-faq-plus::after, .tgx-faq-item[open] .tgx-faq-plus::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.dresora-faq-item[open] .dresora-faq-question, .ttgs-faq-item[open] .ttgs-faq-question, .tgx-faq-item[open] .tgx-faq-question { padding-bottom: 12px !important; }
.dresora-faq-answer, .ttgs-faq-answer, .tgx-faq-answer { padding: 0 60px 26px; box-sizing: border-box; text-align: left;
    color: #555 !important; font-size: 14px !important; line-height: 1.75 !important; font-weight: 400 !important; }
.dresora-faq-answer strong, .ttgs-faq-answer strong, .tgx-faq-answer strong { color: #171717; font-weight: 800; }
@media (max-width: 900px) {
    .dresora-faq-section, .ttgs-faq-section, .tgx-faq-section { padding: 55px 22px 65px; }
    .dresora-faq-title, .ttgs-faq-title, .tgx-faq-title { font-size: 25px !important; }
    .dresora-faq-subtitle, .ttgs-faq-subtitle, .tgx-faq-subtitle { font-size: 14px !important; }
}
@media (max-width: 600px) {
    .dresora-faq-section, .ttgs-faq-section, .tgx-faq-section { padding: 42px 14px 50px; }
    .dresora-faq-eyebrow, .ttgs-faq-eyebrow, .tgx-faq-eyebrow { margin-bottom: 10px; font-size: 9.5px; letter-spacing: 0.16em; }
    .dresora-faq-title, .ttgs-faq-title, .tgx-faq-title { margin-bottom: 9px !important; font-size: 21px !important; line-height: 1.18 !important; }
    .dresora-faq-subtitle, .ttgs-faq-subtitle, .tgx-faq-subtitle { margin-bottom: 17px !important; font-size: 13.5px !important; line-height: 1.55 !important; }
    .dresora-faq-badges, .ttgs-faq-badges, .tgx-faq-badges { gap: 6px; margin-bottom: 27px; }
    .dresora-faq-badge, .ttgs-faq-badge, .tgx-faq-badge { min-height: 26px; padding: 6px 8px; font-size: 9px; }
    .dresora-faq-list, .ttgs-faq-list, .tgx-faq-list { gap: 8px; }
    .dresora-faq-question, .ttgs-faq-question, .tgx-faq-question { min-height: 64px; padding: 17px !important; }
    .dresora-faq-answer, .ttgs-faq-answer, .tgx-faq-answer { padding: 0 17px 20px; }
}

/* ---- Footer 2 cot rieng, an khoi UX Builder cu ---- */
body .footer-wrapper .section.footer-main { display: none !important; }
.ttg-footer { background: #000; color: #fff; padding: 67px 0; }
.ttg-footer-inner { max-width: 1522px; margin: 0 auto; padding: 0 20px;
    display: flex; flex-wrap: wrap; gap: 40px; }
.ttg-footer-col { flex: 1 1 320px; min-width: 260px; }
.ttg-footer-heading { color: #fff !important; font-size: 16px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 1.2px !important; margin: 0 0 14px !important; }
.ttg-footer-list { list-style: none; margin: 0; padding: 0; }
.ttg-footer-list li { margin: 0 0 8px; }
.ttg-footer a, .ttg-footer-list a { color: #fff !important; font-size: 14px !important;
    font-weight: 600 !important; text-decoration: none !important; }
.ttg-footer a:hover { color: #b7b7b7 !important; }
.ttg-footer-line { color: #fff !important; font-size: 14px !important; line-height: 1.7; margin: 0 0 8px !important; }
@media (max-width: 849px) {
    .ttg-footer { padding: 40px 0; }
    .ttg-footer-inner { gap: 28px; }
}

.ttg-topbar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 14px; color: #000; }
.ttg-topbar-inner { max-width: 1500px; margin: 0 auto; padding: 7px 20px; display: flex;
    align-items: center; justify-content: space-between; gap: 16px; line-height: 28px; min-height: 28px; }
.ttg-topbar-right { display: flex; align-items: center; gap: 18px; }
.ttg-topbar a { color: #000; text-decoration: none; }
.ttg-topbar a:hover { text-decoration: underline; }
@media (max-width: 849px) { .ttg-topbar-addr { display: none; }
    .ttg-topbar-inner { justify-content: flex-end; font-size: 13px; } }

/* ---- Custom header -> Dresora white ---- */
#ttg-dresora-header-v3,
#ttg-dresora-header-v3 .ttg-v3-main {
    background: #fff !important; background-color: #fff !important; color: #131313 !important;
}
#ttg-dresora-header-v3 a,
#ttg-dresora-header-v3 .ttg-v3-action { color: #131313 !important; }
/* Snippet 19 sets -webkit-text-fill-color: #fff on .ttg-v3-action; it overrides color, so set it too. */
#ttg-dresora-header-v3 .ttg-v3-action { -webkit-text-fill-color: #131313 !important; }
#ttg-dresora-header-v3 .ttg-v3-action:hover { color: #555 !important; -webkit-text-fill-color: #555 !important; }
/* Heart/cart are outline icons: stroke in the text colour, no fill. */
#ttg-dresora-header-v3 .ttg-v3-action svg { fill: none !important; stroke: currentColor !important; }
/* Hamburger bars (snippet 19 paints them white). */
#ttg-dresora-header-v3 .ttg-v3-mobile-toggle span { background: #131313 !important; }
#ttg-dresora-header-v3 .ttg-v3-cart-count { background: #000 !important; color: #fff !important; }
#ttg-dresora-header-v3 .ttg-v3-search-form input { border: 1px solid #c8c8c8 !important;
    border-radius: 5px !important; color: #111 !important; background: #fff !important; }

/* ---- Footer -> Dresora black ---- */
.footer-wrapper, #footer,
.footer-wrapper .section, #footer .section,
.footer-wrapper .section-bg, #footer .section-bg {
    background: #000 !important; background-color: #000 !important; color: #fff !important;
}
.footer-wrapper h1, .footer-wrapper h2, .footer-wrapper h3, .footer-wrapper h4, .footer-wrapper h5,
.footer-wrapper .widget-title, #footer .widget-title, .footer-wrapper .ux-menu-title {
    color: #fff !important; font-size: 16px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 1.2px !important; margin-bottom: 14px !important;
}
.footer-wrapper a, #footer a { color: #fff !important; font-size: 14px !important;
    font-weight: 600 !important; text-decoration: none !important; }
.footer-wrapper a:hover, #footer a:hover { color: #b7b7b7 !important; }
.footer-wrapper p, .footer-wrapper li, .footer-wrapper span, .footer-wrapper td,
#footer p, #footer li, #footer span { color: #fff !important; font-size: 14px !important; }
.absolute-footer { background: #000 !important; color: #fff !important; text-align: center !important;
    border-top: 1px solid rgba(255,255,255,.15) !important; }
.absolute-footer a { color: #fff !important; }
/* moi thu trong dai copyright phai trang - .copyright-footer tu dat mau navy
   nen se chim hoan toan tren nen den neu khong ep */
.absolute-footer *, .copyright-footer, .copyright-footer * { color: #fff !important; }
.ttg-cnn { margin: 20px 0; flex: 1 1 100% !important; width: 100% !important; box-sizing: border-box; }
.ttg-cnn__title { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 700; color: #111; margin: 0 0 12px; }
.ttg-cnn__free { font-weight: 600; }
.ttg-cnn__required { font-weight: 700; }
.ttg-cnn__help { display: flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-left: 2px; border-radius: 50%; background: #666; color: #fff; font: 700 12px/1 Arial, sans-serif; cursor: help; }
/* Yes/No look like the Type/Size chips (WCPA color-group, below) */
.ttg-cnn__choices { display: flex; flex-wrap: wrap; gap: 10px; }
.ttg-cnn__choice { display: inline-flex; align-items: center; justify-content: center; min-width: 72px; min-height: 0; height: 44px; padding: 0 14px; margin: 0; box-sizing: border-box; cursor: pointer; background: #fff; border: 1px solid #eee; border-radius: 5px; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: normal; text-transform: none; color: #4a4a4a; }
/* :focus too: Flatsome drops the outline of a clicked button (button:focus:not(:focus-visible)) */
.ttg-cnn__choice.is-selected, .ttg-cnn__choice.is-selected:focus { outline: 2px solid var(--sid-accent, #3340d3); }
.ttg-cnn__fields { margin-top: 16px; }
.ttg-cnn__field { margin-bottom: 14px; }
.ttg-cnn__label { display: block; margin: 0 0 7px; font-size: 14px; font-weight: 600; color: #111; }
.ttg-cnn__input { display: block; width: 100%; height: 46px; padding: 0 14px; background: #fff; border: 1px solid #cfcfcf; border-radius: 6px; font-size: 15px; font-weight: 400; color: #111; box-shadow: none; }
.ttg-cnn__input:focus { border-color: #222; outline: none; }
.ttg-cnn__notice { margin-top: 16px; padding: 13px 14px; background: #fff; border: 1px solid #d8d8d8; border-radius: 7px; font-size: 13px; line-height: 1.55; color: #444; }
.ttg-cnn__notice-title { display: block; font-weight: 700; color: #111; margin-bottom: 4px; }
.ttg-cnn__error { margin: 10px 0 0; color: #c0392b; font-size: 13px; font-weight: 600; }
.ttg-pdp-desc { width: 100%; max-width: 1290px; margin: 40px auto 0; padding: 0 15px; background: #fff; color: #131313; font-size: 14px; line-height: 1.6; }
.ttg-pdp-banner { margin: 0 0 24px; }
.ttg-pdp-banner img { display: block; width: 100%; height: auto; }
.ttg-pdp-desc__heading { font-size: 18px; font-weight: 700; color: #000; margin: 0 0 14px; }
.ttg-pdp-desc__content { font-size: 14px; line-height: 1.6; }
.ttg-pdp-desc__content h2, .ttg-pdp-desc__content h3 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; color: #000; }
.ttg-pdp-desc__content ul { margin: 0 0 16px 18px; }
@media (max-width: 849px) {
    body.single-product .product-title.product_title { font-size: 22px !important; }
    .ttg-pdp-desc { margin-top: 24px; }
}

/* Type/Size options (WCPA) are drawn only after every deferred script has run; until then WCPA
   shows its skeleton. Hold Add to cart meanwhile (an early tap reloads the page with "Field Type
   is required"), and give the skeleton the drawn form's height so nothing jumps.
   Browsers without :has() keep the button active, as before. */
.single-product form.cart:has(.wcpa_skeleton_loader_area) .single_add_to_cart_button,
.single-product form.cart:has(.wcpa_skeleton_loader_area) .go-to-checkout {
    opacity: .45;
    pointer-events: none;
}
.single-product .wcpa_skeleton_loader_area { height: 154px; overflow: hidden; }
/* Type/Size options: WCPA gives each field 4 of 6 columns and size chips a fixed 140 px, so sizes
   stacked one per row (up to 8 rows for 2 fields). Full width, chips sized to their text. */
.single-product .wcpa_field_wrap.wcpa_type_color-group { flex: 0 0 100%; max-width: 100%; width: 100%; }
.single-product .wcpa_type_color-group .wcpa_field { gap: 10px; }
.single-product .wcpa_type_color-group .wcpa_color_wrap { width: auto !important; height: 44px !important; }
.single-product .wcpa_type_color-group .wcpa_color_bg { min-width: 72px; padding: 0 14px; justify-content: center; }
/* Quantity (product page and cart): one box in the option-chip look (Type/Size, WCPA color-group) */
form.cart .ux-quantity, .woocommerce-cart-form .ux-quantity {
    display: inline-flex; align-items: stretch; height: 44px; border: 1px solid #eee; border-radius: 5px; overflow: hidden; background: #fff; }
form.cart .ux-quantity .ux-quantity__button, .woocommerce-cart-form .ux-quantity .ux-quantity__button {
    width: 40px; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
    background: #fff; color: #4a4a4a; font-size: 18px; font-weight: 700; line-height: 1; }
@media (hover: hover) {
    form.cart .ux-quantity .ux-quantity__button:hover, .woocommerce-cart-form .ux-quantity .ux-quantity__button:hover { background: #f5f5f5; color: #111; }
}
form.cart .ux-quantity input.qty, .woocommerce-cart-form .ux-quantity input.qty {
    width: 44px; max-width: none; height: auto; min-height: 0; margin: 0; padding: 0; border: 0; border-left: 1px solid #eee; border-right: 1px solid #eee;
    border-radius: 0; box-shadow: none; background: #fff; color: #4a4a4a; font-size: 14px; font-weight: 700; text-align: center; -moz-appearance: textfield; }
form.cart .ux-quantity input.qty::-webkit-inner-spin-button, form.cart .ux-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form .ux-quantity input.qty::-webkit-inner-spin-button, .woocommerce-cart-form .ux-quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Option groups evenly spaced: WCPA's margins below the last field (32 + 15 + 5 + 2px) doubled the
   gap above Size Chart; what is left matches Type to Size */
.single-product form.cart .wcpa_form_outer { margin-bottom: 0; }
.single-product form.cart .wcpa_form_outer .wcpa_section { margin-bottom: 0; }
/* last section: WCPA puts an empty price summary after it */
.single-product form.cart .wcpa_wrap > .wcpa_section:nth-last-child(2) .wcpa_row:last-child .wcpa_field_wrap { margin-bottom: 0; }
/* Offer line (SidStudio): the store's light card */
body .sid-offer {
    padding: 12px 14px; background: #f7f7f7; border: 1px solid #eee; border-radius: 5px;
    color: #131313; font-size: 14px; font-weight: 600; line-height: 1.5; }
/* "Added to cart" notice: Flatsome printed it in light green on white, hard to read */
.woocommerce-message.message-wrapper { background: #f7f7f7; border-bottom: 1px solid #eee; }
.woocommerce-message .message-container { color: #131313; font-size: 14px; font-weight: 600; line-height: 1.5; }
.woocommerce-message .message-container .icon-checkmark { color: #2e7d32; }
@media (min-width: 550px) {
    /* Add to cart and Check Out side by side (Flatsome floated them, stacked) */
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .single_add_to_cart_button.button.alt,
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .go-to-checkout {
        float: none !important; display: inline-flex !important; align-items: center; justify-content: center;
        width: calc(50% - 6px) !important; margin: 0 !important; vertical-align: top; }
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .go-to-checkout { margin-left: 12px !important; }
}
.ttg-buybar { display: none; }
/* YITH's wishlist button under the gallery, where Flatsome's heart on the image already does it */
.product-gallery:has(.wishlist-icon) > .yith-wcwl-add-to-wishlist { display: none; }
/* Place Order until the required fields are filled (functions.php) */
#place_order.is-incomplete { opacity: .45; }
@media (max-width: 549px) {
    .single-product .wcpa_skeleton_loader_area { height: 184px; }
    /* Smaller gallery thumbnails and a tighter gap, so the price shows on a phone's first screen. */
    .single-product .product-thumbnails .flickity-slider > .col,
    .single-product .product-thumbnails.row > .col { flex-basis: 17%; max-width: 17%; }
    .single-product .content-single-product > .col:has(.product-thumbnails) { padding-bottom: 12px; }
    /* Price on the badge row instead of under the title, and no top strip (USD / Create Account /
       Sign In, also in the footer): with Safari's toolbars an iPhone 14 shows ~660 px, and the
       price was at ~870 px. */
    .single-product .col-inner:has(> .product-price-container) { position: relative; }
    .single-product .col-inner > .product-price-container { position: absolute; top: 0; right: 0; margin: 0; padding: 0; }
    .single-product .col-inner > .product-price-container .price-wrapper .price { margin: 0; line-height: 27px; }
    .single-product .ttg-topbar { display: none; }
    /* Add to cart and Check Out (buy now) pinned to the bottom of the screen, side by side, on a
       white strip. They stay in the product form, so the options, the hold above and buy-now keep
       working. The strip, not the buttons, touches the screen edge: iOS 26 Safari stretches
       whatever touches it under its toolbar, and stretched buttons looked like they grew.
       Product page: dresora's UX Builder layout (section.main-single-product) and Flatsome's
       standard one (.product-main .product-info). */
    body.single-product:has(section.main-single-product .add-to-cart-container form.cart .single_add_to_cart_button) .ttg-buybar,
    body.single-product:has(.product-main .product-info form.cart .single_add_to_cart_button) .ttg-buybar,
    body.woocommerce-cart:has(.wc-proceed-to-checkout .checkout-button) .ttg-buybar,
    body.woocommerce-checkout:has(#place_order) .ttg-buybar {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 989;
        height: calc(64px + env(safe-area-inset-bottom)); background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
    }
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .single_add_to_cart_button.button.alt,
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .go-to-checkout,
    html body.single-product .product-main .product-info form.cart .single_add_to_cart_button.button.alt,
    html body.single-product .product-main .product-info form.cart .go-to-checkout {
        position: fixed !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; z-index: 990 !important;
        width: calc(50% - 16px) !important; min-height: 0 !important; height: 44px !important;
        margin: 0 !important; padding: 0 8px !important; border-radius: 9px !important;
        display: flex !important; align-items: center; justify-content: center; line-height: 1.2 !important;
    }
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .single_add_to_cart_button.button.alt,
    html body.single-product .product-main .product-info form.cart .single_add_to_cart_button.button.alt { left: 12px; }
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .go-to-checkout,
    html body.single-product .product-main .product-info form.cart .go-to-checkout { right: 12px; }
    /* Flatsome's z-index here kept the pinned buttons in the section's layer, under the strip. */
    .single-product section.main-single-product > .section-content { z-index: auto; }
    /* Cart's Proceed to Checkout and checkout's Place Order pinned the same way, full width */
    html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
    html body.woocommerce-checkout #payment #place_order {
        position: fixed !important; left: 12px !important; right: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important; z-index: 990;
        width: calc(100% - 24px) !important; min-width: 0 !important; max-width: none !important; height: 44px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
        display: flex !important; align-items: center; justify-content: center; border-radius: 9px; line-height: 1.2 !important; }
    body.single-product:has(section.main-single-product .add-to-cart-container form.cart .single_add_to_cart_button),
    body.single-product:has(.product-main .product-info form.cart .single_add_to_cart_button),
    body.woocommerce-cart:has(.wc-proceed-to-checkout .checkout-button),
    body.woocommerce-checkout:has(#place_order) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}
@media (max-width: 374px) {
    /* half-width buttons: keep "ADD TO CART" on one line */
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .single_add_to_cart_button.button.alt,
    html body.single-product section.main-single-product .row.content-single-product .add-to-cart-container form.cart .go-to-checkout,
    html body.single-product .product-main .product-info form.cart .single_add_to_cart_button.button.alt,
    html body.single-product .product-main .product-info form.cart .go-to-checkout { font-size: 13px !important; letter-spacing: 0 !important; }
    .single-product form.cart .single_add_to_cart_button svg { width: 20px; height: 20px; margin-right: 4px !important; }
}
@media (max-width: 359px) {
    .single-product .wcpa_type_color-group .wcpa_field { gap: 8px; }
    .single-product .wcpa_type_color-group .wcpa_color_bg { min-width: 60px; padding: 0 10px; }
    .ttg-cnn__choices { gap: 8px; }
    .ttg-cnn__choice { min-width: 60px; padding: 0 10px; }
}