/*
 Theme Name: Phụ kiện
 Template: flatsome
 Version: 1.5.0
*/

.home .hero-slider .banner-layers h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.home .section-title-center .section-title-main {
  font-size: clamp(1.35rem, 2.2vw, 1.85rem) !important;
  color: #1a1a1a;
}
.home .product-small {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.home .product-small:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.home .product-small .box-text { padding: 12px 14px 16px; }
.home .product-small .product-title {
  font-size: .95rem;
  line-height: 1.35;
  min-height: 2.7em;
}
.home .star-rating { margin: 4px 0 6px; font-size: .75rem; }
.home .star-rating span:before { color: #ffbe01; }
.home .price { color: #ec5e00; font-weight: 700; }

.footer-section .ft-info,
.footer-section .ft-links { list-style: none; margin: 0 0 1rem; padding: 0; }
.footer-section .ft-info li,
.footer-section .ft-links li { margin: 0 0 .45rem; line-height: 1.45; }
.footer-section .button { margin: 0 .4rem .5rem 0; }
.absolute-footer { background: #2f2f31 !important; color: #ddd; }
.footer-wrapper .block-error { display: none !important; }

/* Floating contact bar — replace missing PNG icons */
.giuseart-nav ul>li a i.ticon-heart,
.giuseart-nav ul>li a i.ticon-zalo-circle2,
.giuseart-nav ul>li a i.ticon-messenger,
.giuseart-nav ul>li a i.ticon-chat-sms,
.giuseart-nav ul>li a i.ticon-angle-up,
.giuseart-nav ul>li a i.icon-phone-w {
  background-image: none !important;
  background: none !important;
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 4px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative;
}
.giuseart-nav ul>li a i.ticon-heart::before,
.giuseart-nav ul>li a i.ticon-zalo-circle2::before,
.giuseart-nav ul>li a i.ticon-messenger::before,
.giuseart-nav ul>li a i.ticon-chat-sms::before,
.giuseart-nav ul>li a i.ticon-angle-up::before,
.giuseart-nav ul>li a i.icon-phone-w::before {
  content: "" !important;
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* map / heart (directions) */
.giuseart-nav ul>li a i.ticon-heart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec5e00'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") !important;
}
/* zalo */
.giuseart-nav ul>li a i.ticon-zalo-circle2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%230068ff'/%3E%3Ctext x='24' y='29' text-anchor='middle' font-size='14' font-family='Arial,sans-serif' font-weight='700' fill='white'%3EZalo%3C/text%3E%3C/svg%3E") !important;
}
/* messenger */
.giuseart-nav ul>li a i.ticon-messenger::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230086FF' d='M12 2C6.48 2 2 6.14 2 11.25c0 2.9 1.44 5.49 3.7 7.2V22l3.38-1.86c.93.26 1.91.4 2.92.4 5.52 0 10-4.14 10-9.29S17.52 2 12 2zm1.06 12.5l-2.55-2.72-4.98 2.72 5.48-5.82 2.61 2.72 4.92-2.72-5.48 5.82z'/%3E%3C/svg%3E") !important;
}
/* sms */
.giuseart-nav ul>li a i.ticon-chat-sms::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2303a9f4'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E") !important;
}
/* phone */
.giuseart-nav ul>li a i.icon-phone-w::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.4 21 3 13.6 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.25 1.02l-2.2 2.19z'/%3E%3C/svg%3E") !important;
}
/* angle up */
.giuseart-nav ul>li a i.ticon-angle-up::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E") !important;
}

/* Desktop floating bar polish */
@media (min-width: 601px) {
  .giuseart-nav {
    right: 0 !important;
    left: auto !important;
    top: 40% !important;
    bottom: auto !important;
    width: 72px !important;
    height: auto !important;
    border-radius: 10px 0 0 10px !important;
    padding: 8px 4px !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.15) !important;
  }
  .giuseart-nav li {
    float: none !important;
    width: 100% !important;
    height: auto !important;
    text-align: center;
    margin: 0 0 8px !important;
  }
  .giuseart-nav ul>li a {
    display: block;
    font-size: 11px;
    color: #333 !important;
    line-height: 1.2;
    padding: 4px 2px !important;
  }
  .giuseart-nav .phone-mobile,
  .giuseart-nav .chat_animation,
  .giuseart-nav .to-top-pc { display: none !important; }
}

/* Hero slider: force background images without waiting for lazy bg-loaded */
.hero-slider .banner-bg .bg.fill,
.hero-slider .banner .bg.fill {
  /* bg-loaded class normally required — force any banner rule that targets .bg.bg-loaded */
}
.home .hero-slider .slider-wrapper {
  background-color: #1a1a1a !important;
}
.home .hero-slider .flickity-page-dots {
  bottom: 16px !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  position: absolute !important;
  transform: none !important;
  z-index: 5;
}
.home .hero-slider .flickity-page-dots .dot {
  display: inline-block !important;
  float: none !important;
  list-style: none !important;
  margin: 0 4px !important;
}


/* Force Flatsome lazy backgrounds on homepage hero */
.home .hero-slider .bg.fill.bg-fill {
  opacity: 1 !important;
}

/* ===== Site content width ~90% centered ===== */
:root {
  --ks-content-max: min(90vw, 1320px);
}
body .container,
body .header-inner.container,
body .flex-row.container,
#header .container,
.page-title .page-title-inner,
#main > .row,
#main > .container,
.page-wrapper > .row,
.page-wrapper > .container,
article .entry-content,
.product-footer .container,
.shop-page-title .page-title-inner {
  max-width: var(--ks-content-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Keep hero/slider full-bleed */
.home .hero-slider,
.home .hero-slider .row,
.home .hero-slider .col,
.home .hero-slider .col-inner,
.home .hero-slider .slider-wrapper,
.home .hero-slider .banner {
  max-width: 100% !important;
  width: 100%;
}
.home .hero-slider > .section-content > .row {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Readable page body */
.page-content,
.entry-content {
  max-width: var(--ks-content-max);
  margin-left: auto;
  margin-right: auto;
}
.entry-content [class*="vc_"],
.entry-content .wpb_wrapper {
  max-width: 100%;
}

/* ===== KS global content width (v1.3) ===== */
:root { --ks-content-max: min(90vw, 1320px); }

body .container,
body .header-inner.container,
body .flex-row.container,
#header .container,
.page-title .page-title-inner,
.shop-page-title .page-title-inner,
.product-footer .container,
.blog-wrapper .container,
#main .container,
.page-wrapper > .row > .col > .col-inner,
article .article-inner,
.entry-content,
.page-content,
.woocommerce-products-header,
.archive .container {
  max-width: var(--ks-content-max) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Woo shop row uses container-ish cols — constrain outer */
.shop-container,
.category-page-row,
.page-wrapper.shop-page {
  max-width: 100%;
}
#row-product-grid,
.row.category-page-row,
.row.product-container {
  max-width: var(--ks-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Hero full-bleed only */
.home .hero-slider,
.home .hero-slider .row,
.home .hero-slider .col,
.home .hero-slider .col-inner,
.home .hero-slider .slider-wrapper,
.home .hero-slider .banner,
.home .hero-slider > .section-content > .row {
  max-width: 100% !important;
  width: 100%;
}
.home .hero-slider > .section-content > .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hide Flatsome empty-sidebar admin hint for visitors if any leftover */
.sidebar-inner > p a[href*="widgets.php"] { /* keep visible only for logged-in admins via WP */ }

/* Shop sidebar polish */
#shop-sidebar .widget {
  margin-bottom: 1.25rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px 14px;
}
#shop-sidebar .widget-title,
#shop-sidebar .widgettitle {
  font-size: 1rem;
  font-weight: 700;
  color: #ec5e00;
  margin-bottom: .75rem;
}
#shop-sidebar .ks-sidebar-contact a {
  color: #ec5e00;
  font-weight: 700;
}

/* ===== KS homepage premium (v1.4) ===== */
:root {
  --ks-orange: #ec5e00;
  --ks-orange-dark: #d45100;
  --ks-ink: #1a1a1a;
  --ks-muted: #6b6b6b;
  --ks-content-max: min(90vw, 1320px);
  --ks-radius: 12px;
}

.home .ks-hero,
.home .ks-hero .row,
.home .ks-hero .col,
.home .ks-hero .col-inner,
.home .ks-hero .slider-wrapper,
.home .ks-hero .banner,
.home .ks-hero > .section-content > .row {
  max-width: 100% !important;
  width: 100%;
}
.home .ks-hero > .section-content > .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
.home .ks-hero .ux-slider,
.home .ks-hero .flickity-viewport,
.home .ks-hero .banner-layers {
  border-radius: 0 !important;
}
.home .ks-hero-eyebrow {
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .35rem;
  opacity: .95;
}
.home .ks-hero-title {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 .5rem !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
.home .ks-hero-sub {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  margin-bottom: 1rem;
  opacity: .95;
}
.home .ks-hero .button {
  margin: .25rem .35rem;
  min-width: 9.5rem;
}

.home .ks-trust {
  border-bottom: 1px solid #eee;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.home .ks-trust-item {
  margin: 0;
  font-size: .92rem;
  color: var(--ks-ink);
  line-height: 1.35;
}
.home .ks-trust-item span { color: var(--ks-muted); font-size: .85rem; }
.home .ks-trust-item a { color: var(--ks-orange); font-weight: 700; }

.home .ks-cat-label,
.home .ks-promo-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 .25rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.home .ks-cat-col .banner,
.home .ks-promo .banner {
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.home .ks-cat-col .banner:hover,
.home .ks-promo .banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.home .ks-product-grid .product-small.box,
.home .product-small.box {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: var(--ks-radius);
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.home .ks-product-grid .product-small.box:hover,
.home .product-small.box:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.home .product-small .box-text {
  padding: 12px 14px 16px !important;
}
.home .product-small .product-title {
  font-size: .95rem;
  font-weight: 600;
  min-height: 2.6em;
  line-height: 1.3;
  color: var(--ks-ink);
}
.home .product-small .price {
  color: var(--ks-orange) !important;
  font-weight: 700;
  font-size: 1rem;
}
.home .section-title-container .section-title span,
.home .section-title-normal span,
.home h2 {
  letter-spacing: 0;
}

.home .ks-contact-cta .button { margin-bottom: .35rem; }

@media (max-width: 549px) {
  .home .ks-trust .col { margin-bottom: 10px; }
  .home .ks-hero-title { font-size: 1.55rem !important; }
}

/* KS-BARON-UI */
.ks-baron-hero-wrap .container{max-width:min(90vw,1320px)}
.ks-baron-cats{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;height:100%;min-height:420px}
.ks-baron-cats-head{background:#ec5e00;color:#fff;font-weight:700;letter-spacing:.04em;padding:12px 14px;font-size:14px}
.ks-baron-cats-list{list-style:none;margin:0;padding:0}
.ks-baron-cats-list li{border-bottom:1px solid #f0f0f0;margin:0}
.ks-baron-cats-list a{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;color:#222;text-decoration:none;font-size:14px}
.ks-baron-cats-list a:hover{background:#fff7f0;color:#ec5e00}
.ks-baron-cats-list em{font-style:normal;color:#999;font-size:12px;background:#f5f5f5;border-radius:99px;padding:2px 8px}
.ks-baron-slider .flickity-page-dots{bottom:12px!important;left:0!important;right:0!important;width:100%!important;display:flex!important;flex-direction:row!important;justify-content:center!important}
.ks-collage-card{border-radius:10px;overflow:hidden}
.ks-hero-eyebrow{letter-spacing:.12em;font-size:12px;opacity:.95;margin:0 0 6px;font-weight:600}
.ks-hero-title{font-size:clamp(1.5rem,2.6vw,2.35rem);line-height:1.2;margin:0 0 8px;font-weight:800}
.ks-hero-sub{margin:0 0 14px;opacity:.95}
.ks-trust-item{margin:0;font-size:14px;line-height:1.35}
.ks-trust-item strong{display:block;font-size:15px;margin-bottom:2px}
.ks-cat-products .product-small{background:#fff;border-radius:10px;overflow:hidden}
/* Force product/blog left sidebar visible */
.single-product .product-footer #product-sidebar,
#product-sidebar,
.left-sidebar #shop-sidebar,
.left-sidebar #secondary,
#secondary{display:block!important;visibility:visible!important}
body.single-product.left-sidebar #main .row > .large-3,
body.single-product .product-footer .large-3{display:block!important}
/* Hide empty contact block leftovers */
.product-section .block-nut-contact:empty,
#nut-contact:empty{display:none!important}
@media(max-width:849px){
  .ks-baron-cats{min-height:0;margin-bottom:12px}
  .ks-baron-cats-list{display:grid;grid-template-columns:1fr 1fr}
  .ks-baron-cats-list li:nth-child(n+7){display:none}
}

/* KS-SIDEBAR-FORCE */
body.single-post.right-sidebar #main > .row,
body.blog.right-sidebar #main > .row,
body.archive.right-sidebar #main > .row{flex-direction:row-reverse}
body.single-product #product-sidebar,
body.single-product .product-footer #product-sidebar{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
/* On product pages Flatsome sometimes parks sidebar in footer — pin visible column */
@media (min-width:850px){
  body.single-product.product-no-sidebar .product-footer .large-3,
  body.single-product .no-sidebar .product-footer #product-sidebar{
    display:block !important;
  }
}


/* KS-LEFT-SIDEBAR-LAYOUT */
@media (min-width: 850px) {
  body.single-product .product-footer .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  body.single-product .product-footer .large-3 {
    order: -1;
    flex: 0 0 25%;
    max-width: 25%;
  }
  body.single-product .product-footer .large-9 {
    order: 1;
    flex: 0 0 75%;
    max-width: 75%;
  }
  body.single-product #product-sidebar {
    display: block !important;
  }
  body.single-post #main > .row,
  body.blog #main > .row,
  body.archive:not(.woocommerce) #main > .row,
  body.left-sidebar #main > .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  body.single-post #main > .row > .large-3,
  body.blog #main > .row > .large-3,
  body.archive:not(.woocommerce) #main > .row > .large-3,
  body.left-sidebar #main > .row > .large-3 {
    order: -1;
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 20px;
  }
  body.single-post #main > .row > .large-9,
  body.blog #main > .row > .large-9,
  body.archive:not(.woocommerce) #main > .row > .large-9,
  body.left-sidebar #main > .row > .large-9 {
    order: 1;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 849px) {
  body.single-product #product-sidebar,
  body.single-post #secondary {
    display: block !important;
    margin: 16px 0;
  }
}


/* KS-RESPONSIVE-WIDTHS */
:root{
  --ks-content-max: min(90vw, 1320px); /* desktop ~10% side margins */
}
@media (max-width: 849px){
  :root{
    --ks-content-max: 95vw; /* mobile ~5% side margins */
  }
}
.container,
.container-width,
.page-wrapper > .row,
#wrapper > .container,
.footer-wrapper > .container,
.header-inner.container,
.header-wrapper .container,
.header-bottom .container,
.header-main .container,
.product-container > .row,
.product-footer > .container,
.ks-baron-hero-wrap .container,
.row.row-full-width > .col > .col-inner > .container{
  max-width: var(--ks-content-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Keep full-bleed header bars + dark nav if theme wants; content inside stays constrained */
.header.show-on-scroll .header-wrapper,
#top-bar .flex-row,
.header-main .flex-row,
.header-bottom .flex-row{
  max-width: var(--ks-content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Mobile menu + search fixes */
@media (max-width: 849px){
  /* Ensure hamburger visible and clickable */
  .mobile-nav,
  .nav-icon,
  .icon-menu,
  button[data-open="#main-menu"],
  .header-button[data-open="#main-menu"],
  a[data-open="#main-menu"]{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
  }
  /* Off-canvas drawer must be able to open */
  .off-canvas,
  .mfp-content,
  #main-menu,
  .mobile-sidebar,
  .nav-sidebar{
    z-index: 9999 !important;
  }
  .off-canvas .nav-sidebar,
  .off-canvas .sidebar-menu,
  #main-menu .nav-sidebar{
    display: block !important;
    visibility: visible !important;
  }
  /* When opened, show panel */
  .off-canvas.active,
  .off-canvas.mfp-ready,
  html.has-off-canvas .off-canvas,
  .mfp-ready .mfp-content{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Search usable on mobile header */
  .header-search,
  .searchform,
  .header .search-form,
  .mobile-nav .searchform{
    display: block !important;
    max-width: 100%;
  }
  .header .searchform{
    width: 100%;
  }
  .header .searchform .search-field,
  .header .searchform input[type="search"],
  .header .searchform input[type="text"]{
    width: 100% !important;
    min-height: 42px;
    font-size: 16px !important; /* avoid iOS zoom */
  }
  .header-main .flex-col.flex-grow{
    min-width: 0;
  }
  /* Product page: stack cleanly */
  body.single-product .product-gallery,
  body.single-product .product-info{
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.single-product .product-main .row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Hide critical-error leftover text if still injected as content */
  .woocommerce-error.critical,
  p:has(> a[href*="faq-troubleshooting"]){
    /* fallback handled in JS/MU if :has unsupported */
  }
}


/* KS-MOBILE-PRODUCT-UI */
@media (max-width: 849px) {
  :root { --ks-content-max: 95vw; }
  .container, .container-width, .header-main .container, .header-bottom .container,
  .product-footer > .container {
    max-width: var(--ks-content-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.single-product #product-sidebar,
  body.single-product .widget_product_categories,
  body.single-product .widget_product_search,
  body.single-product .widget_products {
    display: none !important;
  }
  body.single-product .product_title,
  body.single-product h1.product-title {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    padding: 0 12px !important;
  }
  .products .product-small .product-title,
  .products .box-text .name {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
    padding: 0 8px !important;
    text-align: left !important;
  }
  .header img[src=""], .header img:not([src]) { display: none !important; }
}
@media (min-width: 850px) {
  :root { --ks-content-max: min(90vw, 1320px); }
  .container, .container-width, .header-main .container, .header-bottom .container {
    max-width: var(--ks-content-max) !important;
  }
}