/* ============================================================
   KIDOHOMES 22ND ANNIVERSARY — STYLESHEET v2
   Color: Red #af1f24 / White / Black — NO GOLD
   Font: Inter — BEM: xc-*
   ============================================================ */

:root {
    --red:       #af1f24;
    --red-dark:  #8B0000;
    --red-light: #d4393f;
    --black:     #111111;
    --dark-bg:   #141414;
    --white:     #ffffff;
    --off-white: #f7f7f7;
    --gray:      #666666;
    --gray-light:#eeeeee;
    --shadow:     0 4px 20px rgba(0,0,0,.08);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.15);
    --radius:     10px;
    --radius-lg:  16px;
    --ease:       .3s cubic-bezier(.4,0,.2,1);
    --font:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);color:var(--black);line-height:1.6;background:var(--white);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Override Flatsome default entry-content padding */
.entry-content,
.page-inner .entry-content,
.content-area .entry-content,
article .entry-content,
div.entry-content{
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* ─── HELPERS ─── */
.xc-text--red{color:var(--red)}

/* ============================================================
   CONFETTI & BALLOONS
   ============================================================ */
.xc-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}

.xc-balloons{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}

.xc-balloon{
    position:absolute;bottom:-140px;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity:.75;
    animation:xc-float linear infinite;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.xc-balloon::before{
    content:'';position:absolute;top:18%;left:28%;
    width:30%;height:20%;border-radius:50%;
    background:rgba(255,255,255,.45);transform:rotate(-30deg);
}
.xc-balloon::after{
    content:'';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
    width:1.5px;height:22px;background:rgba(0,0,0,.2);
}

@keyframes xc-float{
    0%  {transform:translateY(0) translateX(0) rotate(0deg);opacity:.75}
    20% {transform:translateY(-22vh) translateX(18px) rotate(6deg)}
    40% {transform:translateY(-44vh) translateX(-14px) rotate(-4deg)}
    60% {transform:translateY(-66vh) translateX(10px) rotate(5deg)}
    80% {transform:translateY(-88vh) translateX(-8px) rotate(-3deg)}
    100%{transform:translateY(-115vh) translateX(5px) rotate(2deg);opacity:0}
}

/* ============================================================
   STICKY TOP BAR WITH MINI COUNTDOWN
   ============================================================ */
.xc-topbar{
    position:fixed;top:-80px;left:0;right:0;
    background:linear-gradient(135deg, #7c1418 0%, #af1f24 50%, #7c1418 100%);
    color:var(--white);padding:8px 0;z-index:1000;
    transition:top var(--ease);
    box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.xc-topbar.is-visible{top:0}
.xc-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.xc-topbar__title{display:flex;align-items:center;gap:10px}
.xc-topbar__badge{
    background:rgba(255,255,255,.2);color:var(--white);
    padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:800;
    letter-spacing:.5px;border:1px solid rgba(255,255,255,.3);white-space:nowrap;
}
.xc-topbar__text{font-size:.86rem;font-weight:600;white-space:nowrap}
.xc-topbar__countdown{display:flex;align-items:center;gap:8px}
.xc-topbar__cd-label{font-size:.76rem;text-transform:uppercase;color:rgba(255,255,255,.9);font-weight:700;letter-spacing:.3px;white-space:nowrap}
.xc-topbar__cd-boxes{display:flex;align-items:center;gap:4px}
.xc-topbar__cd-item{display:inline-flex;align-items:center;gap:2px}
.xc-topbar__cd-num{
    background:var(--white);color:var(--red);font-weight:900;
    font-size:.9rem;padding:3px 6px;border-radius:4px;line-height:1;min-width:26px;text-align:center;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.xc-topbar__cd-u{font-size:.65rem;color:rgba(255,255,255,.8);margin-left:1px;margin-right:2px;font-weight:700}
.xc-topbar__cd-sep{font-weight:900;font-size:.85rem;color:rgba(255,255,255,.85);margin:0 1px}
.xc-topbar__cta,
a.xc-topbar__cta,
a.xc-topbar__cta:visited{
    background:var(--white) !important;
    color:var(--red) !important;
    padding:6px 18px;border-radius:50px;
    font-weight:800;font-size:.8rem;transition:var(--ease);white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    text-decoration:none !important;
}
.xc-topbar__cta:hover,
a.xc-topbar__cta:hover,
a.xc-topbar__cta:focus,
a.xc-topbar__cta:active{
    background:var(--off-white) !important;
    color:var(--red) !important;
    transform:scale(1.05);
    text-decoration:none !important;
}

/* Lazy Loading Styles */
img.xc-lazy{opacity:0;transition:opacity .4s ease}
img.xc-lazy.is-loaded{opacity:1}
iframe.xc-lazy{background:#1a1a1a}

/* ============================================================
   HERO
   ============================================================ */
.xc-hero{position:relative}
.xc-hero__banner{width:100%;overflow:hidden}
.xc-hero__banner img{width:100%;display:block}

/* Countdown */
.xc-countdown{
    background:var(--red);padding:16px 0;position:relative;overflow:hidden;
}
.xc-countdown::before{
    content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
    animation:xc-shimmer 3s infinite;
}
@keyframes xc-shimmer{0%{transform:translateX(-50%)}100%{transform:translateX(50%)}}

.xc-countdown__inner{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.xc-countdown__label{color:rgba(255,255,255,.9);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.xc-countdown__label::before{content:'🎁';font-size:1.8rem}
.xc-countdown__timer{display:flex;align-items:center;gap:5px}
.xc-countdown__item{display:flex;flex-direction:column;align-items:center}
.xc-countdown__number{
    background:var(--white);color:var(--red);font-weight:900;font-size:1.5rem;
    min-width:50px;text-align:center;padding:5px 8px;border-radius:6px;
    box-shadow:0 3px 10px rgba(0,0,0,.2);line-height:1;
}
.xc-countdown__unit{color:rgba(255,255,255,.8);font-size:.65rem;margin-top:3px;font-weight:600;text-transform:uppercase}
.xc-countdown__sep{color:rgba(255,255,255,.8);font-size:1.6rem;font-weight:900;margin-bottom:12px}

/* ============================================================
   DUAL PROMO BANNERS (2 COLUMNS)
   ============================================================ */
.xc-dual-banners{padding:32px 0 10px}
.xc-dual-banners__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.xc-dual-banners__item{
    border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:var(--shadow);transition:var(--ease);
}
.xc-dual-banners__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.xc-dual-banners__item img{width:100%;height:auto;display:block}

/* ============================================================
   CTA BUTTONS
   ============================================================ */
.xc-btn,
a.xc-btn,
button.xc-btn,
input.xc-btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--font);font-weight:700;font-size:.9rem;
    padding:13px 30px;border-radius:50px;border:none;cursor:pointer;
    transition:var(--ease);text-transform:uppercase;letter-spacing:.5px;
    text-align:center;justify-content:center;line-height:1.3;
    text-decoration:none !important;
}
.xc-btn:hover,
a.xc-btn:hover,
button.xc-btn:hover,
input.xc-btn:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:var(--shadow-lg);
    text-decoration:none !important;
}
.xc-btn:active,
a.xc-btn:active,
button.xc-btn:active,
input.xc-btn:active{
    transform:translateY(0) scale(.98);
}

/* Red button: strictly white text on all states (normal, hover, focus, active, visited) */
.xc-btn--red,
a.xc-btn--red,
a.xc-btn--red:visited,
button.xc-btn--red,
input.xc-btn--red{
    background:var(--red) !important;
    color:#ffffff !important;
    text-decoration:none !important;
}
.xc-btn--red:hover,
a.xc-btn--red:hover,
a.xc-btn--red:focus,
a.xc-btn--red:active,
button.xc-btn--red:hover,
button.xc-btn--red:focus,
input.xc-btn--red:hover,
input.xc-btn--red:focus{
    background:#8e181c !important;
    color:#ffffff !important;
    text-decoration:none !important;
}
.xc-btn--red *,
a.xc-btn--red *,
a.xc-btn--red:hover *{
    color:#ffffff !important;
}

/* White button */
.xc-btn--white,
a.xc-btn--white,
a.xc-btn--white:visited,
button.xc-btn--white{
    background:var(--white) !important;
    color:var(--red) !important;
    text-decoration:none !important;
}
.xc-btn--white:hover,
a.xc-btn--white:hover,
a.xc-btn--white:focus,
a.xc-btn--white:active,
button.xc-btn--white:hover,
button.xc-btn--white:focus,
button.xc-btn--white:active{
    background:var(--off-white) !important;
    color:var(--red-dark) !important;
    text-decoration:none !important;
}

/* Dark button */
.xc-btn--dark,
a.xc-btn--dark,
a.xc-btn--dark:visited,
button.xc-btn--dark{
    background:var(--black) !important;
    color:#ffffff !important;
    text-decoration:none !important;
}
.xc-btn--dark:hover,
a.xc-btn--dark:hover,
a.xc-btn--dark:focus,
a.xc-btn--dark:active,
button.xc-btn--dark:hover,
button.xc-btn--dark:focus,
button.xc-btn--dark:active{
    background:#333333 !important;
    color:#ffffff !important;
    text-decoration:none !important;
}

.xc-btn--lg{padding:15px 36px;font-size:1rem}
.xc-btn--full{width:100%}

/* ============================================================
   SECTION COMMON
   ============================================================ */
.xc-section{padding:64px 0 72px;position:relative}
.xc-section--white{background:var(--white)}
.xc-section--light{background:var(--off-white)}
.xc-section--dark{background:var(--dark-bg)}

.xc-section__banner{margin-bottom:36px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.xc-section__banner img{width:100%;height:auto;display:block;object-fit:contain}

.xc-section__header{text-align:center;margin-bottom:44px}
.xc-section__title{font-weight:900;font-size:2rem;line-height:1.25;margin-bottom:10px}
.xc-section__title--light{color:var(--white)}
.xc-section__desc{font-size:1rem;color:var(--gray);max-width:760px;margin:0 auto}
.xc-section__desc--light{color:rgba(255,255,255,.6)}
.xc-section__cta{text-align:center;margin-top:44px}

/* Badge */
.xc-badge{
    display:inline-block;padding:5px 18px;border-radius:50px;
    font-weight:800;font-size:.78rem;text-transform:uppercase;
    letter-spacing:1.5px;margin-bottom:14px;
}
.xc-badge--red{background:var(--red);color:var(--white)}
.xc-badge--dark{background:var(--black);color:var(--white)}
.xc-badge--white{background:var(--white);color:var(--black)}

/* No emoji dividers between sections */

/* ============================================================
   PRODUCT CARDS with Birthday Frame Image
   ============================================================ */
.xc-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}

.xc-product{
    background:var(--white);border-radius:var(--radius);
    overflow:hidden;position:relative;transition:var(--ease);
    box-shadow:var(--shadow);display:block;color:inherit;
}
.xc-product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.xc-product--dark{background:#1e1e2e}

/* Frame image covers entire card */
.xc-product__frame-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;z-index:5;pointer-events:none;mix-blend-mode:multiply;opacity:1;filter:contrast(1.06) saturate(1.25)}
.xc-product__frame{position:relative;aspect-ratio:1/1;overflow:hidden}
.xc-product__photo{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1;background:#fff;overflow:hidden}
.xc-product__photo img{width:100%;height:100%;object-fit:contain;padding:8%}
.xc-product--dark .xc-product__photo{background:#2a2a3a}
.xc-product__emoji{font-size:3.5rem}

/* Ribbon */
.xc-product__ribbon{
    position:absolute;top:12px;left:-6px;
    padding:3px 14px 3px 10px;font-weight:800;font-size:.82rem;
    color:var(--white);z-index:4;
    background:var(--red);
    clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
}
.xc-product__ribbon--dark{background:var(--black)}

/* Tag */
.xc-product__tag{
    position:absolute;top:12px;right:10px;
    padding:2px 8px;border-radius:50px;font-size:.7rem;font-weight:700;
    background:rgba(175,31,36,.12);color:var(--red);z-index:4;
}
.xc-product__tag--dark{background:rgba(0,0,0,.1);color:var(--black)}

/* Body */
.xc-product__body{padding:12px 14px 16px}
.xc-product__brand{display:none}
.xc-product--dark .xc-product__brand{color:rgba(255,255,255,.5)}
.xc-product__name{font-weight:700;font-size:.88rem;line-height:1.35;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xc-product--dark .xc-product__name{color:var(--white)}
.xc-product__prices{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.xc-product__price-old{color:#999;font-size:.78rem;text-decoration:line-through}
.xc-product__price-new{color:var(--red);font-weight:800;font-size:.98rem}
.xc-product__discount{background:var(--red);color:var(--white);font-weight:800;font-size:.72rem;padding:1px 5px;border-radius:4px;line-height:1.2;display:inline-block}

/* ============================================================
   BENEFITS TIERS
   ============================================================ */
.xc-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:780px;margin:0 auto}

.xc-tier{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:var(--ease);position:relative}
.xc-tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

.xc-tier--hot{border:2px solid var(--red);transform:scale(1.04)}
.xc-tier--hot:hover{transform:scale(1.04) translateY(-4px)}

.xc-tier__flag{position:absolute;top:0;right:20px;background:var(--red);color:var(--white);padding:3px 12px 5px;border-radius:0 0 6px 6px;font-weight:800;font-size:.72rem}

.xc-tier__header{background:var(--off-white);padding:24px 20px;text-align:center;border-bottom:1px solid var(--gray-light)}
.xc-tier__header--hot{background:var(--red);color:var(--white);border-bottom:none}

.xc-tier__icon{font-size:2rem;margin-bottom:6px}
.xc-tier__label{font-weight:600;font-size:.85rem;margin-bottom:4px}
.xc-tier__amount{font-weight:900;font-size:2.2rem;line-height:1.1}
.xc-tier__amount small{font-size:.5em;font-weight:700}

.xc-tier__list{padding:20px;display:flex;flex-direction:column;gap:12px}
.xc-tier__list li{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;line-height:1.5}
.xc-tier__check{color:var(--red);font-weight:700;font-size:1.1rem;flex-shrink:0}

/* ============================================================
   REFERRAL CARDS
   ============================================================ */
.xc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:780px;margin:0 auto}

.xc-card{background:var(--white);border-radius:var(--radius-lg);padding:32px 24px;box-shadow:var(--shadow);text-align:center;transition:var(--ease);border:1px solid var(--gray-light)}
.xc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.xc-card__icon{font-size:2.8rem;margin-bottom:14px}
.xc-card__title{font-weight:800;font-size:1.1rem;margin-bottom:10px}
.xc-card__desc{font-size:.9rem;color:var(--gray);margin-bottom:16px;line-height:1.6}
.xc-card__highlight{background:var(--red);color:var(--white);padding:8px 18px;border-radius:50px;font-weight:700;font-size:.82rem;display:inline-block}
.xc-card__duo{display:flex;flex-direction:column;gap:8px}
.xc-card__duo-item{background:var(--off-white);padding:8px 14px;border-radius:6px;font-size:.85rem;text-align:left;display:flex;gap:6px}
.xc-card__duo-item strong{color:var(--red);white-space:nowrap}

/* ============================================================
   CONTACT FORM (xc-birthday-form — BEM for CF7)
   ============================================================ */
.xc-form-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;max-width:1000px;margin:0 auto}

.xc-birthday-form{background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.xc-birthday-form__form{display:flex;flex-direction:column;gap:0}
.xc-birthday-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.xc-birthday-form__field{display:flex;flex-direction:column}
.xc-birthday-form__field--full{margin-bottom:18px}
.xc-birthday-form__label{font-weight:600;font-size:.82rem;margin-bottom:5px;color:var(--black)}
.xc-birthday-form__required{color:var(--red)}
.xc-birthday-form__input,
.xc-birthday-form__select,
.xc-birthday-form__textarea{
    font-family:var(--font);font-size:.9rem;padding:11px 14px;
    border:2px solid var(--gray-light);border-radius:8px;
    transition:var(--ease);outline:none;background:#fafafa;
}
.xc-birthday-form input[type="text"],
.xc-birthday-form input[type="email"],
.xc-birthday-form input[type="tel"],
.xc-birthday-form__input{
    height:46px !important;min-height:46px !important;box-sizing:border-box !important;
}
/* Dropdown select: padding-top/bottom 0 to prevent Flatsome height clipping */
.xc-birthday-form select,
.xc-birthday-form__select,
.xc-birthday-form .wpcf7-select,
.xc-birthday-form select.wpcf7-form-control{
    padding:0 14px !important;
    padding-right:36px !important;
    height:46px !important;
    min-height:46px !important;
    line-height:44px !important;
    vertical-align:middle !important;
    box-sizing:border-box !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    background-color:#fafafa !important;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 14px center !important;
    background-size:14px !important;
}
.xc-birthday-form__input:focus,
.xc-birthday-form__select:focus,
.xc-birthday-form__textarea:focus{border-color:var(--red);background:var(--white);box-shadow:0 0 0 3px rgba(175,31,36,.1)}
.xc-birthday-form__textarea{resize:vertical}
.xc-birthday-form__submit{margin-top:4px}
.xc-birthday-form__note{text-align:center;margin-top:12px;font-size:.78rem;color:var(--gray)}

/* Contact Form 7 integration */
.xc-birthday-form p{margin:0}
.xc-birthday-form .wpcf7-form-control-wrap{display:block;width:100%;position:relative}
.xc-birthday-form .wpcf7-form-control-wrap .xc-birthday-form__input,
.xc-birthday-form .wpcf7-form-control-wrap .xc-birthday-form__select,
.xc-birthday-form .wpcf7-form-control-wrap .xc-birthday-form__textarea{width:100%}
.xc-birthday-form input[type="submit"].xc-btn{display:block;width:100%}
.xc-birthday-form .wpcf7-not-valid-tip{color:var(--red);font-size:.76rem;font-weight:600;margin-top:4px}
.xc-birthday-form .wpcf7-response-output{
    margin:14px 0 0 !important;padding:12px 16px !important;
    border-radius:var(--radius) !important;font-size:.85rem !important;
    font-weight:600 !important;text-align:center;
}
.xc-birthday-form form.sent .wpcf7-response-output{
    border-color:#28a745 !important;background:#e8f5e9 !important;color:#1b5e20 !important;
}
.xc-birthday-form form.invalid .wpcf7-response-output,
.xc-birthday-form form.unaccepted .wpcf7-response-output{
    border-color:var(--red) !important;background:#fdf2f2 !important;color:var(--red) !important;
}
.xc-birthday-form .wpcf7-spinner{display:inline-block;margin-left:8px;vertical-align:middle}

/* Showroom info */
.xc-showroom{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:28px 24px;color:var(--white);align-self:start}
.xc-showroom__logo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.xc-showroom__logo img{border-radius:8px}
.xc-showroom__logo strong{font-size:1.2rem;color:var(--white)}
.xc-showroom__title{font-size:1.1rem;font-weight:800;margin-bottom:18px;color:var(--white)}
.xc-showroom__item{margin-bottom:14px;font-size:.9rem;line-height:1.6}
.xc-showroom__item strong{display:block;color:rgba(255,255,255,.5);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.xc-showroom__item a{color:var(--white);font-weight:700;font-size:1.15rem;text-decoration:underline;text-underline-offset:3px}

/* Form success */
.xc-birthday-form__success{text-align:center;padding:50px 16px}
.xc-birthday-form__success-icon{font-size:3.5rem;margin-bottom:14px}
.xc-birthday-form__success-title{font-weight:800;font-size:1.4rem;color:var(--red);margin-bottom:8px}
.xc-birthday-form__success-text{color:var(--gray);font-size:.95rem}

/* ============================================================
   FOOTER
   ============================================================ */
.xc-footer{background:var(--black);color:rgba(255,255,255,.5);padding:24px 0;text-align:center}
.xc-footer__inner{display:flex;flex-direction:column;gap:4px}
.xc-footer__brand{font-size:.85rem}
.xc-footer__brand strong{color:var(--white)}
.xc-footer__copy{font-size:.75rem}

/* ============================================================
   FIXED CONTACT BAR — xc-ld-contact-bar (vertical, right)
   ============================================================ */
.xc-ld-contact-bar{
    position:fixed;right:16px;bottom:24px;
    display:flex;flex-direction:column;gap:10px;
    z-index:999;
    opacity:0;pointer-events:none;
    transform:translateX(20px);
    transition:opacity .4s ease,transform .4s ease;
}
.xc-ld-contact-bar.is-visible{opacity:1;pointer-events:auto;transform:translateX(0)}

.xc-ld-contact-bar__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:52px;height:52px;border-radius:50%;
    background:var(--white);color:var(--black);
    box-shadow:0 3px 14px rgba(0,0,0,.15);
    transition:var(--ease);cursor:pointer;
    border:none;font-size:0;
    position:relative;
}
.xc-ld-contact-bar__item span{
    position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
    background:var(--black);color:var(--white);
    padding:8px 16px;border-radius:8px;
    font-family:var(--font);font-size:.82rem;font-weight:700;line-height:1.4;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 4px 14px rgba(0,0,0,.25);
    display:inline-flex;align-items:center;justify-content:center;
    box-sizing:border-box;
}
.xc-ld-contact-bar__item span::after{
    content:'';position:absolute;left:100%;top:50%;transform:translateY(-50%);
    border-width:5px 0 5px 6px;border-style:solid;
    border-color:transparent transparent transparent var(--black);
}
.xc-ld-contact-bar__item:hover span{opacity:1}
.xc-ld-contact-bar__item:hover{transform:scale(1.08)}
.xc-ld-contact-bar__item svg{stroke:var(--black)}

/* Zalo */
.xc-ld-contact-bar__item--zalo{background:#0068FF}
.xc-ld-contact-bar__item--zalo:hover{background:#0055dd}
.xc-ld-contact-bar__item--zalo span{background:#0068FF}
.xc-ld-contact-bar__item--zalo span::after{border-color:transparent transparent transparent #0068FF}

/* Phone */
.xc-ld-contact-bar__item--phone{background:var(--red);animation:xc-pulse-phone 2s infinite}
.xc-ld-contact-bar__item--phone svg{stroke:var(--white)}
.xc-ld-contact-bar__item--phone:hover{background:var(--red-light)}
.xc-ld-contact-bar__item--phone span{background:var(--red)}
.xc-ld-contact-bar__item--phone span::after{border-color:transparent transparent transparent var(--red)}

@keyframes xc-pulse-phone{
    0%,100%{box-shadow:0 0 0 0 rgba(175,31,36,.5)}
    50%{box-shadow:0 0 0 14px rgba(175,31,36,0)}
}

/* ============================================================
   HIDE EXTERNAL CHAT WIDGETS (Avoid overlapping with contact bar)
   ============================================================ */
.chat-widget,
#chat-widget,
div.chat-widget,
div#chat-widget,
[class*="chat-widget"],
[id*="chat-widget"],
.ah-widget,
#ah-widget,
.zalo-chat-widget,
.fb-customerchat {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Back to top */
.xc-ld-contact-bar__item--top{background:var(--black)}
.xc-ld-contact-bar__item--top svg{stroke:var(--white)}
.xc-ld-contact-bar__item--top:hover{background:#333}
.xc-ld-contact-bar__item--top span{background:var(--black)}

@media (max-width:768px){
    .xc-ld-contact-bar{right:10px;bottom:16px;gap:8px}
    .xc-ld-contact-bar__item{width:46px;height:46px}
    .xc-ld-contact-bar__item span{display:none}
}

/* ============================================================
   DARK BG SECTION
   ============================================================ */
.xc-section--dark-bg{background:var(--dark-bg);color:var(--white)}
.xc-section--dark-bg .xc-section__title{color:var(--white)}

/* ============================================================
   COLLECTIONS (Banner Grid 2 cols)
   ============================================================ */
.xc-collections{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.xc-collection{display:block;position:relative;border-radius:var(--radius);overflow:hidden;transition:var(--ease)}
.xc-collection:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.xc-collection__img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
.xc-collection__overlay{
    position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(transparent,rgba(0,0,0,.65));
    padding:20px 16px 14px;
}
.xc-collection__name{color:var(--white);font-weight:700;font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.4)}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.xc-about{max-width:1040px;margin:0 auto}

.xc-about__card{
    background:var(--white);border-radius:var(--radius-lg);
    padding:40px 36px;box-shadow:var(--shadow);margin-bottom:32px;
    border:1px solid rgba(175,31,36,.08);text-align:center;
}
.xc-about__logo{max-width:240px;margin:0 auto 22px;display:block}
.xc-about__text{max-width:840px;margin:0 auto 28px;font-size:1rem;line-height:1.8;color:#333}

.xc-about__stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
    padding-top:24px;border-top:1px dashed #e2e2e2;
}
.xc-about__stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.xc-about__stat-icon{
    width:56px;height:56px;border-radius:50%;background:rgba(175,31,36,.07);
    color:var(--red);display:flex;align-items:center;justify-content:center;
    margin-bottom:12px;transition:var(--ease);border:1px solid rgba(175,31,36,.12);
}
.xc-about__stat:hover .xc-about__stat-icon{background:var(--red);color:var(--white);transform:scale(1.08)}
.xc-about__stat-num{display:block;font-size:2rem;font-weight:900;color:var(--red);line-height:1.2;margin-bottom:4px}
.xc-about__stat-label{font-size:.85rem;color:var(--gray);font-weight:600}

.xc-about__video{
    margin:0 auto 36px;width:100%;max-width:100%;aspect-ratio:16/9;
    border-radius:var(--radius-lg);overflow:hidden;
    box-shadow:0 14px 40px rgba(0,0,0,.12);
    border:4px solid var(--white);
}
.xc-about__video iframe{width:100%;height:100%;display:block}

.xc-about__values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
.xc-about__value{
    background:var(--white);border-radius:var(--radius-lg);padding:26px 18px;
    text-align:center;box-shadow:var(--shadow);transition:var(--ease);
    border:1px solid rgba(0,0,0,.04);display:flex;flex-direction:column;align-items:center;
}
.xc-about__value:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(175,31,36,.25)}
.xc-about__value-icon{
    width:64px;height:64px;margin-bottom:12px;background:rgba(175,31,36,.06);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.xc-about__value-icon img{width:38px;height:38px;object-fit:contain;display:block}
.xc-about__value h4{font-size:.95rem;font-weight:800;color:var(--black);margin-bottom:6px}
.xc-about__value p{font-size:.76rem;color:var(--gray);line-height:1.45}

.xc-about__box{
    background:var(--white);border-radius:var(--radius-lg);padding:32px 28px;
    box-shadow:var(--shadow);margin-bottom:32px;border:1px solid rgba(0,0,0,.04);
    text-align:center;
}
.xc-about__box-title{
    font-size:1.15rem;font-weight:800;margin-bottom:20px;color:var(--black);
    text-transform:uppercase;letter-spacing:.5px;position:relative;display:inline-block;
}
.xc-about__box-title::after{
    content:'';display:block;width:40px;height:3px;background:var(--red);
    margin:8px auto 0;border-radius:2px;
}
.xc-about__media-wrap{display:flex;justify-content:center;align-items:center;width:100%}
.xc-about__media-wrap img{max-width:100%;height:auto;margin:0 auto;display:block;border-radius:var(--radius)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.xc-reveal{opacity:0;transform:translateY(36px);transition:opacity .65s ease,transform .65s ease}
.xc-reveal.is-revealed{opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
    .xc-products{grid-template-columns:repeat(2,1fr)}
    .xc-section__title{font-size:1.7rem}
}

@media (max-width:768px){
    .container{padding:0 14px}
    .xc-section{padding:36px 0 44px}
    .xc-section__title{font-size:1.3rem}
    .xc-section__desc{font-size:.85rem}
    .xc-section__header{margin-bottom:24px}

    /* Hero & Section Banners - Full banners visible without cropping */
    .xc-hero__banner img{width:100% !important;height:auto !important;min-height:unset !important;object-fit:contain !important;display:block}
    .xc-section__banner{margin-bottom:20px}
    .xc-section__banner img{width:100% !important;height:auto !important;object-fit:contain !important;display:block}

    /* Countdown */
    .xc-countdown{padding:10px 0}
    .xc-countdown__inner{gap:8px;justify-content:center}
    .xc-countdown__label{font-size:.7rem}
    .xc-countdown__label::before{font-size:1.2rem}
    .xc-countdown__number{font-size:1.1rem;min-width:36px;padding:6px 4px}
    .xc-countdown__unit{font-size:.55rem}
    .xc-countdown__sep{font-size:.9rem}

    /* Dual Banners */
    .xc-dual-banners{padding:18px 0 4px}
    .xc-dual-banners__grid{grid-template-columns:1fr;gap:12px}

    /* Product grid */
    .xc-products{grid-template-columns:repeat(2,1fr);gap:10px}
    .xc-product__body{padding:8px 10px 12px}
    .xc-product__name{font-size:.75rem;-webkit-line-clamp:2}
    .xc-product__price-old{font-size:.68rem}
    .xc-product__price-new{font-size:.8rem}
    .xc-product__prices{gap:4px}
    .xc-product__discount{font-size:.62rem;padding:1px 4px}
    .xc-product__ribbon{font-size:.65rem;padding:2px 8px 2px 6px;top:6px;left:-4px}
    .xc-product__emoji{font-size:2.5rem}

    /* Tiers & Cards */
    .xc-tiers,.xc-cards{grid-template-columns:1fr;gap:18px}
    .xc-tier--hot{transform:none}
    .xc-tier--hot:hover{transform:translateY(-4px)}

    /* Form */
    .xc-form-wrap{grid-template-columns:1fr;gap:20px}
    .xc-birthday-form__row{grid-template-columns:1fr}
    .xc-birthday-form{padding:20px 14px}

    /* Buttons */
    .xc-btn--lg{padding:12px 24px;font-size:.85rem}
    .xc-btn{padding:10px 20px;font-size:.82rem}

    /* Topbar - Compact, button restored, text label below number */
    .xc-topbar{padding:5px 0}
    .xc-topbar__inner{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:0 10px}
    .xc-topbar__title{display:flex;align-items:center;gap:4px;flex-shrink:0}
    .xc-topbar__badge{font-size:.65rem;padding:2px 6px}
    .xc-topbar__text{display:none}
    .xc-topbar__cta{
        display:inline-flex !important;
        padding:5px 12px !important;
        font-size:.7rem !important;
        font-weight:800 !important;
        border-radius:50px !important;
        white-space:nowrap !important;
        line-height:1 !important;
        flex-shrink:0 !important;
        letter-spacing:0 !important;
    }
    .xc-topbar__cd-label{display:none}
    .xc-topbar__countdown{display:flex;align-items:center;gap:0}
    .xc-topbar__cd-boxes{display:flex;align-items:center;gap:3px}
    .xc-topbar__cd-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:1px}
    .xc-topbar__cd-num{font-size:.76rem;padding:2px 4px;min-width:20px;border-radius:3px;line-height:1}
    .xc-topbar__cd-u{font-size:.5rem;color:rgba(255,255,255,.9);margin:0;line-height:1;text-transform:uppercase;letter-spacing:.2px}
    .xc-topbar__cd-sep{font-size:.7rem;margin:0 1px;margin-bottom:7px}

    /* Scroll offset so topbar never covers section tops */
    .xc-section{scroll-margin-top:50px}
    .xc-hero{scroll-margin-top:50px}
    .xc-dual-banners{scroll-margin-top:50px}

    /* Badge */
    .xc-badge{font-size:.72rem;padding:6px 16px}

    /* Showroom */
    .xc-showroom{padding:20px 16px}
    .xc-showroom__title{font-size:1rem}

    /* Contact bar */
    .xc-ld-contact-bar{right:10px;bottom:16px;gap:8px}
    .xc-ld-contact-bar__item{width:44px;height:44px}
    .xc-ld-contact-bar__item span{display:none}

    /* Collections */
    .xc-collections{grid-template-columns:1fr;gap:12px}
    .xc-collection__name{font-size:.82rem}

    /* About */
    .xc-about__values{grid-template-columns:repeat(2,1fr);gap:14px}
    .xc-about__value img{width:48px;height:48px}
    .xc-about__logo{max-width:150px}
    .xc-about__text{font-size:.85rem}

    /* CTA spacing */
    .xc-section__cta{margin-top:24px}
}

@media (max-width:480px){
    .xc-hero__banner img{width:100% !important;height:auto !important;min-height:unset !important;object-fit:contain !important}
    .xc-section{padding:28px 0 36px}
    .xc-section__title{font-size:1.1rem}
    .xc-products{gap:8px}
    .xc-product__body{padding:6px 8px 10px}
    .xc-product__name{font-size:.7rem}
    .xc-product__price-old{font-size:.62rem}
    .xc-product__price-new{font-size:.72rem}
    .xc-product__ribbon{font-size:.6rem;padding:2px 6px 2px 4px}
    .xc-countdown__label{display:none}
    .xc-countdown__number{font-size:1rem;min-width:32px}
    .xc-badge{font-size:.65rem;padding:5px 12px}
    .xc-topbar__inner{gap:8px;padding:0 4px}
    .xc-topbar__badge{font-size:.6rem;padding:2px 4px}
    .xc-topbar__cd-num{font-size:.72rem;padding:1px 3px;min-width:18px}
    .xc-topbar__cd-u{font-size:.46rem}
    .xc-topbar__cd-sep{font-size:.65rem;margin-bottom:6px}
    .xc-topbar__cta{
        display:inline-flex !important;
        padding:4px 9px !important;
        font-size:.65rem !important;
        border-radius:50px !important;
        white-space:nowrap !important;
        line-height:1 !important;
        flex-shrink:0 !important;
    }
    .xc-footer__brand{font-size:.78rem}
    .xc-footer__copy{font-size:.68rem}
}