/* Cầu Vồng storefront: small additions on top of the Flatsome theme CSS (loaded last). */

/* "Xem tất cả" entry of the category fly-out */
.header-vertical-menu__fly-out a.cv-all-link { font-weight: 700; color: #B86E00; }

/* Hero slider: every slide fills the slider width (the demo set this per generated id) */
.slider > .img { width: 100%; }

/* Product cards: a liked heart (toggled by cauvong.js) */
.wishlist-button.is-liked i,
.wishlist-button.is-liked .icon-heart { color: #e3262c; }

/* Form feedback in the login / register popup */
.cv-form-message { margin: .5em 0 0; font-size: .9em; }
.cv-form-message.is-error { color: #b91c1c; }
.cv-form-message.is-ok { color: #256b3a; }
.cv-hint { font-size: .8em; color: #666; margin-bottom: .5em; }

/* Homepage "Bạn đã xem" rows built by cauvong.js */
.mbws-rv-wrap .cv-recent-list { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.mbws-rv-wrap .cv-recent-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #222; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid #eee; }
.mbws-rv-wrap .cv-recent-item img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.mbws-rv-wrap .cv-recent-item b { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbws-rv-wrap .cv-recent-item span { display: block; font-size: 13px; color: #C9461F; font-weight: 700; margin-top: 3px; }

/* ---------------------------------------------------------------------------------------------
   Brand palette taken from the shop's logo: amber (the logo background), coral (its rainbow),
   mint (its clouds). Amber is a light colour: text on it is dark brown, and amber used as TEXT
   on white is the deeper tone so it stays readable.
   --------------------------------------------------------------------------------------------- */
:root {
    --cv-amber: #F2AB1F;
    --cv-amber-deep: #B86E00;
    --cv-ink: #3a2800;
    --cv-coral: #D9552E;
    --cv-coral-text: #C9461F;
    --cv-mint: #84CCB4;
}

/* Logo: the round mark in the header (the theme's "logo" slot was a wide wordmark) */
#logo { width: auto; }
#logo img { padding: 4px 0; max-height: 76px; width: auto; }
.header-main { height: 84px; }
.stuck #logo img { max-height: 60px !important; }
.header-logo-dark { display: none; }
@media (max-width: 549px) { #logo img { max-height: 52px; } .header-main { height: 64px; } }

/* Navigation bar (amber): dark text, the white pill of the current page, coral category button */
.header-bottom .nav > li > a,
.header-bottom .nav > li > a:hover,
.header-bottom .nav-dark .nav > li > a,
.header-bottom .header-vertical-menu__opener,
.header-bottom .nav > li.has-icon-left svg { color: var(--cv-ink); }
.header-bottom .nav > li > a:hover { color: #000; }
.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a { border-color: var(--cv-ink); color: var(--cv-ink); }
.header-vertical-menu__opener,
.header-vertical-menu__opener i { color: #fff !important; }
.header-vertical-menu__fly-out .nav > li > a { color: #222; }
.header-vertical-menu__fly-out .nav > li > a:hover { color: var(--cv-amber-deep); }

/* Buttons filled with amber */
.button.primary:not(.is-outline):not(.is-link),
.button.primary:not(.is-outline):not(.is-link):hover,
.header-main .header-button > .button:not(.is-outline),
.ux-search-submit.button,
.ux-search-submit.button:hover { color: var(--cv-ink); }
.button.primary:not(.is-outline):not(.is-link):hover { background-color: #e19a0c; }
.button.secondary:not(.is-outline):not(.is-link) { color: #fff; }
.button.is-link.primary,
.button.primary.is-link { color: var(--cv-amber-deep); }
.button.is-outline.primary { color: var(--cv-amber-deep); border-color: var(--cv-amber); }

/* Search button, search focus and the cart badge */
.searchform .ux-search-submit { background-color: var(--cv-coral); color: #fff; }
.icon-shopping-bag[data-icon-label]:after,
.header-main .cart-icon strong,
[data-icon-label]:after { background-color: var(--cv-coral); color: #fff; }

/* Prices, sale and links use deeper tones so they read on white */
.price, .price .amount, .price ins, .price ins .amount,
.product-page-price, .woocommerce-Price-amount { color: var(--cv-coral-text); }
.price del, .price del .amount { color: #8a8a8a; }
.discount-badge { background-color: var(--cv-coral); color: #fff; }
.product-small .favourite { background-color: var(--cv-coral); color: #fff; }
.badge-inner, .on-sale { background-color: var(--cv-coral); color: #fff; }
.woocommerce-breadcrumb a:hover, .breadcrumbs a:hover, .nav-dropdown a:hover { color: var(--cv-amber-deep); }
.is-divider { background-color: var(--cv-amber); }
.page-title .woocommerce-breadcrumb, .page-title h1 { color: #222; }
.box-text a:not(.button):hover, .post-title a:hover, .woocommerce-loop-product__link:hover { color: var(--cv-amber-deep); }
.add-to-cart-grid .cart-icon strong, .cart-icon strong { border-color: var(--cv-coral); color: var(--cv-coral); }

/* Amber sections (service strip in the footer): dark text */
#footer .section.dark, #footer .section.dark p, #footer .section.dark a, #footer .section.dark b,
#footer .section.dark .text { color: var(--cv-ink); }
#footer .section.dark a:hover { color: #000; }
#footer a:hover { color: var(--cv-amber-deep); }
.footer-wrapper .absolute-footer { color: #777; }
.footer-wrapper .social-icons .button.icon { background-color: var(--cv-amber); border-color: var(--cv-amber); color: var(--cv-ink); }

/* Floating contact buttons keep their own brand colours (phone green, Zalo blue, Messenger pink) */

/* Form focus */
input:focus, select:focus, textarea:focus { border-color: var(--cv-amber); box-shadow: 0 0 0 1px var(--cv-amber); }
/* Active page in pagination */
.page-numbers li .current, .nav-pagination > li > span.current, .page-number.current { background-color: var(--cv-amber); border-color: var(--cv-amber); color: var(--cv-ink); }
/* Pill / selected states of the shop filters */
.cv-pill.active, .cv-price-filter .cv-price-apply, .cv-empty .cv-empty__reset { color: var(--cv-ink); }
.cv-detail-swatch.selected, .cv-detail-swatch:hover { background: #fff6dd; }