: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:       'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
}
.landing-promo,.landing-promo *,.landing-promo *::before,.landing-promo *::after{box-sizing:border-box}

.landing-promo{font-family:var(--font);color:var(--black);line-height:1.6;background:#f8fafc;overflow-x:clip}
.landing-promo img{max-width:100%;height:auto;display:block}
.landing-promo a{color:inherit;text-decoration:none}
.landing-promo ul{list-style:none;margin:0;padding:0}
.landing-promo .container{max-width:1260px;margin:0 auto;padding:0 20px}

.km-text--red{color:var(--red)}
.km-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.km-balloons{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}
.km-balloon{
position:absolute;bottom:-140px;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
opacity:.75;
animation: k2010-float linear infinite;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.km-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);
}
.km-balloon::after{
content:'';position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
width:1.5px;height:22px;background:rgba(0,0,0,.2);
}
@keyframes k2010-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}
}
.km-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);
}
.km-topbar.is-visible{top:0}
.km-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.km-topbar__title{display:flex;align-items:center;gap:10px}
.km-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;
}
.km-topbar__text{font-size:.86rem;font-weight:600;white-space:nowrap}
.km-topbar__countdown{display:flex;align-items:center;gap:8px}
.km-topbar__cd-label{font-size:.76rem;text-transform: none ;color:rgba(255,255,255,.9);font-weight:700;letter-spacing:.3px;white-space:nowrap}
.km-topbar__cd-boxes{display:flex;align-items:center;gap:4px}
.km-topbar__cd-item{display:inline-flex;align-items:center;gap:2px}
.km-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);
}
.km-topbar__cd-u{font-size: 0.75rem;color:rgba(255,255,255,.8);margin-left:1px;margin-right:2px;font-weight:700}
.km-topbar__cd-sep{font-weight:900;font-size:.85rem;color:rgba(255,255,255,.85);margin:0 1px}
.km-topbar__cta,
a.km-topbar__cta,
a.km-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;
}
.km-topbar__cta:hover,
a.km-topbar__cta:hover,
a.km-topbar__cta:focus,
a.km-topbar__cta:active{
background:var(--off-white) !important;
color:var(--red) !important;
transform:scale(1.05);
text-decoration:none !important;
}
img.km-lazy{opacity:0;transition:opacity .4s ease}
img.km-lazy.is-loaded{opacity:1}
iframe.km-lazy{background:#1a1a1a}
.km-hero{position:relative}
.km-hero__banner{width:100%;overflow:hidden}
.km-hero__banner img{width:100%;display:block}
.km-countdown{
background:var(--red);padding:16px 0;position:relative;overflow:hidden;
}
.km-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: k2010-shimmer 3s infinite;
}
@keyframes k2010-shimmer{0%{transform:translateX(-50%)}100%{transform:translateX(50%)}}
.km-countdown__inner{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.km-countdown__label{color:rgba(255,255,255,.9);font-weight:700;font-size:.9rem;text-transform: none ;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.km-countdown__label::before { display: none !important; }
.km-countdown__timer{display:flex;align-items:center;gap:5px}
.km-countdown__item{display:flex;flex-direction:column;align-items:center}
.km-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;
}
.km-countdown__unit{color:rgba(255,255,255,.8);font-size: 0.75rem;margin-top:3px;font-weight:600;text-transform:uppercase}
.km-countdown__sep{color:rgba(255,255,255,.8);font-size:1.6rem;font-weight:900;margin-bottom:12px}
.km-dual-banners{padding:32px 0 10px}
.km-dual-banners__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.km-dual-banners__item{
border-radius:var(--radius-lg);overflow:hidden;
box-shadow:var(--shadow);transition:var(--ease);
}
.km-dual-banners__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.km-dual-banners__item img{width:100%;height:auto;display:block}
.km-btn,
a.km-btn,
button.km-btn,
input.km-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: none ;letter-spacing:.5px;
text-align:center;justify-content:center;line-height:1.3;
text-decoration:none !important;
}
.km-btn:hover,
a.km-btn:hover,
button.km-btn:hover,
input.km-btn:hover{
transform:translateY(-2px) scale(1.03);
box-shadow:var(--shadow-lg);
text-decoration:none !important;
}
.km-btn:active,
a.km-btn:active,
button.km-btn:active,
input.km-btn:active{
transform:translateY(0) scale(.98);
}
.km-btn--red,
a.km-btn--red,
a.km-btn--red:visited,
button.km-btn--red,
input.km-btn--red{
background:var(--red) !important;
color:#ffffff !important;
text-decoration:none !important;
}
.km-btn--red:hover,
a.km-btn--red:hover,
a.km-btn--red:focus,
a.km-btn--red:active,
button.km-btn--red:hover,
button.km-btn--red:focus,
input.km-btn--red:hover,
input.km-btn--red:focus{
background:#8e181c !important;
color:#ffffff !important;
text-decoration:none !important;
}
.km-btn--red *,
a.km-btn--red *,
a.km-btn--red:hover *{
color:#ffffff !important;
}
.km-btn--white,
a.km-btn--white,
a.km-btn--white:visited,
button.km-btn--white{
background:var(--white) !important;
color:var(--red) !important;
text-decoration:none !important;
}
.km-btn--white:hover,
a.km-btn--white:hover,
a.km-btn--white:focus,
a.km-btn--white:active,
button.km-btn--white:hover,
button.km-btn--white:focus,
button.km-btn--white:active{
background:var(--off-white) !important;
color:var(--red-dark) !important;
text-decoration:none !important;
}
.km-btn--dark,
a.km-btn--dark,
a.km-btn--dark:visited,
button.km-btn--dark{
background:var(--black) !important;
color:#ffffff !important;
text-decoration:none !important;
}
.km-btn--dark:hover,
a.km-btn--dark:hover,
a.km-btn--dark:focus,
a.km-btn--dark:active,
button.km-btn--dark:hover,
button.km-btn--dark:focus,
button.km-btn--dark:active{
background:#333333 !important;
color:#ffffff !important;
text-decoration:none !important;
}
.km-btn--lg{padding:15px 36px;font-size:1rem}
.km-btn--full{width:100%}
.km-section{padding:64px 0 72px;position:relative}
.km-section--white{background:var(--white)}
.km-section--light{background:var(--off-white)}
.km-section--dark{background:var(--dark-bg)}
.km-section__banner{margin-bottom:36px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.km-section__banner img{width:100%;height:auto;display:block;object-fit:contain}
.km-section__header{text-align:center;margin-bottom:44px}
.km-section__title{font-weight:900;font-size:2rem;line-height:1.25;margin-bottom:10px}
.km-section__title--light{color:var(--white)}
.km-section__desc{font-size:1rem;color:var(--gray);max-width:760px;margin:0 auto}
.km-section__desc--light{color:rgba(255,255,255,.6)}
.km-section__cta{text-align:center;margin-top:44px}
.km-badge{
display:inline-block;padding:5px 18px;border-radius:50px;
font-weight:800;font-size:.78rem;text-transform: none ;
letter-spacing:1.5px;margin-bottom:14px;
}
.km-badge--red{background:var(--red);color:var(--white)}
.km-badge--dark{background:var(--black);color:var(--white)}
.km-badge--white{background:var(--white);color:var(--black)}
.km-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.km-product{
background:var(--white);border-radius:var(--radius);
border:1px solid #e5e7eb;padding:0;
overflow:hidden;position:relative;transition:border-color .18s ease,box-shadow .18s ease;
box-shadow:var(--shadow);display:block;color:inherit;
}
.km-product:hover{transform:none;border-color:var(--red,#af1f24);box-shadow:0 0 0 1px rgba(175,31,36,.15)}
.km-product--dark{background:#1e1e2e}
.km-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)}
.km-product__frame{position:relative;aspect-ratio:1/1;overflow:hidden;padding:0;margin:0}
.km-product__photo { position: relative !important; width: 100% !important; aspect-ratio: 1/1 !important; display: block !important; background: #ffffff !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.km-product__photo img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: top center !important; display: block !important; padding: 0 !important; margin: 0 !important; transform: none !important; }
.km-product--dark .km-product__photo { position: relative !important; width: 100% !important; aspect-ratio: 1/1 !important; display: block !important; background: #ffffff !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; }
.km-product__emoji{font-size:3.5rem}
.km-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%);
}
.km-product__ribbon--dark{background:var(--black)}
.km-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;
}
.km-product__tag--dark{background:rgba(0,0,0,.1);color:var(--black)}
.km-product__body{padding:12px 14px 16px}
.km-product__brand{display:none}
.km-product--dark .km-product__brand{color:rgba(255,255,255,.5)}
.km-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}
.km-product--dark .km-product__name{color:var(--white)}
.km-product__prices{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.km-product__price-old{color:#999;font-size:.78rem;text-decoration:line-through}
.km-product__price-new{color:var(--red);font-weight:800;font-size:.98rem}
.km-product__discount{background:var(--red);color:var(--white);font-weight:800;font-size: 0.75rem;padding:1px 5px;border-radius:4px;line-height:1.2;display:inline-block}
.km-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:780px;margin:0 auto}
.km-tier{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;transition:var(--ease);position:relative}
.km-tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.km-tier--hot{border:2px solid var(--red);transform:scale(1.04)}
.km-tier--hot:hover{transform:scale(1.04) translateY(-4px)}
.km-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: 0.75rem}
.km-tier__header{background:var(--off-white);padding:24px 20px;text-align:center;border-bottom:1px solid var(--gray-light)}
.km-tier__header--hot{background:var(--red);color:var(--white);border-bottom:none}
.km-tier__icon{font-size:2rem;margin-bottom:6px}
.km-tier__label{font-weight:600;font-size:.85rem;margin-bottom:4px}
.km-tier__amount{font-weight:900;font-size:2.2rem;line-height:1.1}
.km-tier__amount small{font-size:.5em;font-weight:700}
.km-tier__list{padding:20px;display:flex;flex-direction:column;gap:12px}
.km-tier__list li{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;line-height:1.5}
.km-tier__check{color:var(--red);font-weight:700;font-size:1.1rem;flex-shrink:0}
.km-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:780px;margin:0 auto}
.km-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)}
.km-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.km-card__icon{font-size:2.8rem;margin-bottom:14px}
.km-card__title{font-weight:800;font-size:1.1rem;margin-bottom:10px}
.km-card__desc{font-size:.9rem;color:var(--gray);margin-bottom:16px;line-height:1.6}
.km-card__highlight{background:var(--red);color:var(--white);padding:8px 18px;border-radius:50px;font-weight:700;font-size:.82rem;display:inline-block}
.km-card__duo{display:flex;flex-direction:column;gap:8px}
.km-card__duo-item{background:var(--off-white);padding:8px 14px;border-radius:6px;font-size:.85rem;text-align:left;display:flex;gap:6px}
.km-card__duo-item strong{color:var(--red);white-space:nowrap}
.km-form-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;max-width:1000px;margin:0 auto}
.km-birthday-form{background:var(--white);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-lg)}
.km-birthday-form__form{display:flex;flex-direction:column;gap:0}
.km-birthday-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.km-birthday-form__field{display:flex;flex-direction:column}
.km-birthday-form__field--full{margin-bottom:18px}
.km-birthday-form__label{font-weight:600;font-size:.82rem;margin-bottom:5px;color:var(--black)}
.km-birthday-form__required{color:var(--red)}
.km-birthday-form__input,
.km-birthday-form__select,
.km-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;
}
.km-birthday-form input[type="text"],
.km-birthday-form input[type="email"],
.km-birthday-form input[type="tel"],
.km-birthday-form__input{
height:46px !important;min-height:46px !important;box-sizing:border-box !important;
}
.km-birthday-form select,
.km-birthday-form__select,
.km-birthday-form .wpcf7-select,
.km-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;
}
.km-birthday-form__input:focus,
.km-birthday-form__select:focus,
.km-birthday-form__textarea:focus{border-color:var(--red);background:var(--white);box-shadow:0 0 0 3px rgba(175,31,36,.1)}
.km-birthday-form__textarea{resize:vertical}
.km-birthday-form__submit{margin-top:4px}
.km-birthday-form__note{text-align:center;margin-top:12px;font-size:.78rem;color:var(--gray)}
.km-birthday-form p{margin:0}
.km-birthday-form .wpcf7-form-control-wrap{display:block;width:100%;position:relative}
.km-birthday-form .wpcf7-form-control-wrap .km-birthday-form__input,
.km-birthday-form .wpcf7-form-control-wrap .km-birthday-form__select,
.km-birthday-form .wpcf7-form-control-wrap .km-birthday-form__textarea{width:100%}
.km-birthday-form input[type="submit"].km-btn{display:block;width:100%}
.km-birthday-form .wpcf7-not-valid-tip{color:var(--red);font-size:.76rem;font-weight:600;margin-top:4px}
.km-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;
}
.km-birthday-form form.sent .wpcf7-response-output{
border-color:#28a745 !important;background:#e8f5e9 !important;color:#1b5e20 !important;
}
.km-birthday-form form.invalid .wpcf7-response-output,
.km-birthday-form form.unaccepted .wpcf7-response-output{
border-color:var(--red) !important;background:#fdf2f2 !important;color:var(--red) !important;
}
.km-birthday-form .wpcf7-spinner{display:inline-block;margin-left:8px;vertical-align:middle}
.km-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}
.km-showroom__logo{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.km-showroom__logo img{border-radius:8px}
.km-showroom__logo strong{font-size:1.2rem;color:var(--white)}
.km-showroom__title{font-size:1.1rem;font-weight:800;margin-bottom:18px;color:var(--white)}
.km-showroom__item{margin-bottom:14px;font-size:.9rem;line-height:1.6}
.km-showroom__item strong{display:block;color:rgba(255,255,255,.5);font-size:.75rem;text-transform: none ;letter-spacing:.5px;margin-bottom:2px}
.km-showroom__item a{color:var(--white);font-weight:700;font-size:1.15rem;text-decoration:underline;text-underline-offset:3px}
.km-birthday-form__success{text-align:center;padding:50px 16px}
.km-birthday-form__success-icon{font-size:3.5rem;margin-bottom:14px}
.km-birthday-form__success-title{font-weight:800;font-size:1.4rem;color:var(--red);margin-bottom:8px}
.km-birthday-form__success-text{color:var(--gray);font-size:.95rem}
.km-footer{background:var(--black);color:rgba(255,255,255,.5);padding:24px 0;text-align:center}
.km-footer__inner{display:flex;flex-direction:column;gap:4px}
.km-footer__brand{font-size:.85rem}
.km-footer__brand strong{color:var(--white)}
.km-footer__copy{font-size:.75rem}
.km-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;
}
.km-ld-contact-bar.is-visible{opacity:1;pointer-events:auto;transform:translateX(0)}
.km-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;
}
.km-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;
}
.km-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);
}
.km-ld-contact-bar__item:hover span{opacity:1}
.km-ld-contact-bar__item:hover{transform:scale(1.08)}
.km-ld-contact-bar__item svg{stroke:var(--black)}
.km-ld-contact-bar__item--zalo{background:#0068FF}
.km-ld-contact-bar__item--zalo:hover{background:#0055dd}
.km-ld-contact-bar__item--zalo span{background:#0068FF}
.km-ld-contact-bar__item--zalo span::after{border-color:transparent transparent transparent #0068FF}
.km-ld-contact-bar__item--phone{background:var(--red);animation: kkm-pulse-phone 2s infinite}
.km-ld-contact-bar__item--phone svg{stroke:var(--white)}
.km-ld-contact-bar__item--phone:hover{background:var(--red-light)}
.km-ld-contact-bar__item--phone span{background:var(--red)}
.km-ld-contact-bar__item--phone span::after{border-color:transparent transparent transparent var(--red)}
@keyframes kkm-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)}
}
.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;
}
.km-ld-contact-bar__item--top{background:var(--black)}
.km-ld-contact-bar__item--top svg{stroke:var(--white)}
.km-ld-contact-bar__item--top:hover{background:#333}
.km-ld-contact-bar__item--top span{background:var(--black)}
@media (max-width:768px){
.km-ld-contact-bar{right:10px;bottom:16px;gap:8px}
.km-ld-contact-bar__item{width:46px;height:46px}
.km-ld-contact-bar__item span{display:none}
}
.km-section--dark-bg{background:var(--dark-bg);color:var(--white)}
.km-section--dark-bg .km-section__title{color:var(--white)}
.km-collections{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.km-collection{display:block;position:relative;border-radius:var(--radius);overflow:hidden;transition:var(--ease)}
.km-collection:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.km-collection__img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
.km-collection__overlay{
position:absolute;bottom:0;left:0;right:0;
background:linear-gradient(transparent,rgba(0,0,0,.65));
padding:20px 16px 14px;
}
.km-collection__name{color:var(--white);font-weight:700;font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.km-about{max-width:1040px;margin:0 auto}
.km-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;
}
.km-about__logo{max-width:240px;margin:0 auto 22px;display:block}
.km-about__text{max-width:840px;margin:0 auto 28px;font-size:1rem;line-height:1.8;color:#333}
.km-about__stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
padding-top:24px;border-top:1px dashed #e2e2e2;
}
.km-about__stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.km-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);
}
.km-about__stat:hover .km-about__stat-icon{background:var(--red);color:var(--white);transform:scale(1.08)}
.km-about__stat-num{display:block;font-size:2rem;font-weight:900;color:var(--red);line-height:1.2;margin-bottom:4px}
.km-about__stat-label{font-size:.85rem;color:var(--gray);font-weight:600}
.km-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);
}
.km-about__video iframe{width:100%;height:100%;display:block}
.km-about__values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:36px}
.km-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;
}
.km-about__value:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(175,31,36,.25)}
.km-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;
}
.km-about__value-icon img{width:38px;height:38px;object-fit:contain;display:block}
.km-about__value h4{font-size:.95rem;font-weight:800;color:var(--black);margin-bottom:6px}
.km-about__value p{font-size:.76rem;color:var(--gray);line-height:1.45}
.km-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;
}
.km-about__box-title{
font-size:1.15rem;font-weight:800;margin-bottom:20px;color:var(--black);
text-transform: none ;letter-spacing:.5px;position:relative;display:inline-block;
}
.km-about__box-title::after{
content:'';display:block;width:40px;height:3px;background:var(--red);
margin:8px auto 0;border-radius:2px;
}
.km-about__media-wrap{display:flex;justify-content:center;align-items:center;width:100%}
.km-about__media-wrap img{max-width:100%;height:auto;margin:0 auto;display:block;border-radius:var(--radius)}
.km-reveal{opacity:0;transform:translateY(36px);transition:opacity .65s ease,transform .65s ease}
.km-reveal.is-revealed{opacity:1;transform:translateY(0)}
@media (max-width:1024px){
.km-products{grid-template-columns:repeat(2,1fr)}
.km-section__title{font-size:1.7rem}
}
@media (max-width: 768px) {
.landing-promo .container {padding:0 14px}
.km-section{padding:36px 0 44px}
.km-section__title{font-size:1.3rem}
.km-section__desc{font-size:.85rem}
.km-section__header{margin-bottom:24px}
.km-hero__banner img{width:100% !important;height:auto !important;min-height:unset !important;object-fit:contain !important;display:block}
.km-section__banner{margin-bottom:20px}
.km-section__banner img{width:100% !important;height:auto !important;object-fit:contain !important;display:block}
.km-countdown{padding:10px 0}
.km-countdown__inner{gap:8px;justify-content:center}
.km-countdown__label{font-size:.7rem}
.km-countdown__label::before { display: none !important; }
.km-countdown__number{font-size:1.1rem;min-width:36px;padding:6px 4px}
.km-countdown__unit{font-size: 0.75rem}
.km-countdown__sep{font-size:.9rem}
.km-dual-banners{padding:18px 0 4px}
.km-dual-banners__grid{grid-template-columns:1fr;gap:12px}
.km-products{grid-template-columns:repeat(2,1fr);gap:10px}
.km-product__body{padding:8px 10px 12px}
.km-product__name{font-size:.75rem;-webkit-line-clamp:2}
.km-product__price-old{font-size: 0.75rem}
.km-product__price-new{font-size:.8rem}
.km-product__prices{gap:4px}
.km-product__discount{font-size: 0.75rem;padding:1px 4px}
.km-product__ribbon{font-size: 0.75rem;padding:2px 8px 2px 6px;top:6px;left:-4px}
.km-product__emoji{font-size:2.5rem}
.km-tiers,.km-cards{grid-template-columns:1fr;gap:18px}
.km-tier--hot{transform:none}
.km-tier--hot:hover{transform:translateY(-4px)}
.km-form-wrap{grid-template-columns:1fr;gap:20px}
.km-birthday-form__row{grid-template-columns:1fr}
.km-birthday-form{padding:20px 14px}
.km-btn--lg{padding:12px 24px;font-size:.85rem}
.km-btn{padding:10px 20px;font-size:.82rem}
.km-topbar{padding:5px 0}
.km-topbar__inner{flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:0 10px}
.km-topbar__title{display:flex;align-items:center;gap:4px;flex-shrink:0}
.km-topbar__badge{font-size: 0.75rem;padding:2px 6px}
.km-topbar__text{display:none}
.km-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;
}
.km-topbar__cd-label{display:none}
.km-topbar__countdown{display:flex;align-items:center;gap:0}
.km-topbar__cd-boxes{display:flex;align-items:center;gap:3px}
.km-topbar__cd-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:1px}
.km-topbar__cd-num{font-size:.76rem;padding:2px 4px;min-width:20px;border-radius:3px;line-height:1}
.km-topbar__cd-u{font-size: 0.75rem;color:rgba(255,255,255,.9);margin:0;line-height:1;text-transform: none ;letter-spacing:.2px}
.km-topbar__cd-sep{font-size:.7rem;margin:0 1px;margin-bottom:7px}
.km-section{scroll-margin-top:50px}
.km-hero{scroll-margin-top:50px}
.km-dual-banners{scroll-margin-top:50px}
.km-badge{font-size: 0.75rem;padding:6px 16px}
.km-showroom{padding:20px 16px}
.km-showroom__title{font-size:1rem}
.km-ld-contact-bar{right:10px;bottom:16px;gap:8px}
.km-ld-contact-bar__item{width:44px;height:44px}
.km-ld-contact-bar__item span{display:none}
.km-collections{grid-template-columns:1fr;gap:12px}
.km-collection__name{font-size:.82rem}
.km-about__values{grid-template-columns:repeat(2,1fr);gap:14px}
.km-about__value img{width:48px;height:48px}
.km-about__logo{max-width:150px}
.km-about__text{font-size:.85rem}
.km-section__cta{margin-top:24px}
}
@media (max-width:480px){
.km-hero__banner img{width:100% !important;height:auto !important;min-height:unset !important;object-fit:contain !important}
.km-section{padding:28px 0 36px}
.km-section__title{font-size:1.1rem}
.km-products{gap:8px}
.km-product__body{padding:6px 8px 10px}
.km-product__name{font-size:.7rem}
.km-product__price-old{font-size: 0.75rem}
.km-product__price-new{font-size: 0.75rem}
.km-product__ribbon{font-size: 0.75rem;padding:2px 6px 2px 4px}
.km-countdown__label{display:none}
.km-countdown__number{font-size:1rem;min-width:32px}
.km-badge{font-size: 0.75rem;padding:5px 12px}
.km-topbar__inner{gap:8px;padding:0 4px}
.km-topbar__badge{font-size: 0.75rem;padding:2px 4px}
.km-topbar__cd-num{font-size: 0.75rem;padding:1px 3px;min-width:18px}
.km-topbar__cd-u{font-size:.46rem}
.km-topbar__cd-sep{font-size: 0.75rem;margin-bottom:6px}
.km-topbar__cta{
display:inline-flex !important;
padding:4px 9px !important;
font-size: 0.75rem !important;
border-radius:50px !important;
white-space:nowrap !important;
line-height:1 !important;
flex-shrink:0 !important;
}
.km-footer__brand{font-size:.78rem}
.km-footer__copy{font-size: 0.75rem}
}
:root {
--red: #af1f24;
--red-bright: #d70018;
--red-dark: #7a1117;
--rose-bg: #fff5f6;
--rose-border: #fecdd3;
--gold-accent: #ffe082;
}
.km-lazy,
img.km-lazy,
iframe.km-lazy,
.km-product__photo img,
.km-product__photo img.lazy-load,
.km-about img,
.km-about iframe {
opacity: 1 !important;
visibility: visible !important;
}
.km-reveal {
opacity: 1 !important;
transform: none !important;
}
[id="2010-balloons"], [id="2010-confetti"], [class*="2010-balloon"],
#xc-site-balloons, .xc-site-balloons, .xc-site-balloon {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ============================================================
COUNTDOWN COLON FIX & HERO BANNER
============================================================ */
.km-countdown__colon {
color: #ffe082 !important;
font-weight: 900 !important;
font-size: 1.4rem !important;
margin: 0 3px 14px !important;
line-height: 1 !important;
}
/* ============================================================
SECTION BACKGROUNDS & TYPOGRAPHY (WARM CUOI NAM UX/UI PALETTE)
============================================================ */
.km-section {
padding: 52px 0 60px !important;
position: relative;
overflow-x: hidden;
}
.km-section--white {
background: #ffffff !important;
}
.km-section--light {
background: #fff6f7 !important;
}
.km-section--dark,
.km-section--dark-bg {
background: linear-gradient(135deg, #5e0b10 0%, #8a141b 50%, #4d080c 100%) !important;
color: #ffffff !important;
}
.km-section__header {
text-align: center !important;
margin-bottom: 26px !important;
}
.km-section__tag {
display: inline-block;
background: #fff0f2;
color: #af1f24;
border: 1px solid #fecdd3;
font-weight: 800;
font-size: 12.5px;
letter-spacing: 1px;
text-transform: none ;
padding: 5px 16px;
border-radius: 50px;
margin-bottom: 8px;
box-shadow: 0 2px 6px rgba(175, 31, 36, 0.08);
}
.km-section__title {
font-size: 28px;
font-weight: 900;
color: #8b1116;
margin: 4px 0 8px;
text-transform: none ;
letter-spacing: -0.3px;
line-height: 1.25;
}
.km-section__desc {
font-size: 15px;
color: #5c4043;
margin: 0 auto !important;
text-align: center !important;
max-width: 760px;
}
/* Dark / Burgundy Section Header Contrast Fix (100% Crisp White & Gold) */
.km-section__title--light,
.km-section--dark .km-section__title,
.km-section--dark-bg .km-section__title {
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.km-section--dark .km-text--red,
.km-section--dark-bg .km-text--red {
color: #ffe082 !important;
}
.km-section__desc--light,
.km-section--dark .km-section__desc,
.km-section--dark-bg .km-section__desc {
color: rgba(255, 245, 245, 0.9) !important;
}
.km-section--dark .km-badge--white,
.km-section--dark-bg .km-badge--white {
background: #ffffff !important;
color: #af1f24 !important;
border: 2px solid #ffe082 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.km-showroom {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 224, 130, 0.35) !important;

}
/* ============================================================
ABOUT SECTION & YOUTUBE VIDEO EMBED FIX
============================================================ */
.km-about__video {
position: relative !important;
margin: 0 auto 32px !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
min-height: 215px !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 12px 34px rgba(175, 31, 36, 0.14) !important;
border: 4px solid #ffffff !important;
background: #111111 !important;
cursor: pointer !important;
}
.km-about__video-thumb {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.35s ease !important;
}
.km-about__video:hover .km-about__video-thumb {
transform: scale(1.03) !important;
}
.km-about__video-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.45) 100%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
z-index: 2 !important;
padding: 16px !important;
}
.km-about__video-play {
width: 68px !important;
height: 48px !important;
background: #ff0000 !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
transition: transform 0.25s ease, background 0.25s ease !important;
}
.km-about__video:hover .km-about__video-play {
transform: scale(1.1) !important;
background: #d70018 !important;
}
.km-about__video-play svg {
width: 26px !important;
height: 26px !important;
fill: #ffffff !important;
margin-left: 3px !important;
}
.km-about__video-caption {
position: absolute !important;
top: 12px !important;
left: 14px !important;
right: 14px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
text-shadow: 0 2px 6px rgba(0,0,0,0.75) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
pointer-events: none !important;
}
.km-about__video iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 5 !important;
}
.km-about__logo {
max-width: 220px !important;
height: auto !important;
margin: 0 auto 18px !important;
display: block !important;
}
.km-about__value-icon img {
width: 38px !important;
height: 38px !important;
object-fit: contain !important;
display: block !important;
}
/* ============================================================
2-ROW x 5-COL PRODUCT SLIDER & FULL-BLEED PHOTOS + BADGES
============================================================ */
.km-slider {
position: relative;
width: 100%;
margin: 12px 0 18px;
padding: 0;
}
.km-slider__track {
display: grid !important;
grid-template-rows: repeat(2, auto) !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - 40px) / 5) !important;
gap: 10px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
padding: 6px 2px 14px 2px !important;
align-items: stretch !important;
}
.km-slider__track::-webkit-scrollbar {
display: none;
}
.km-slider__track br,
.km-slider__track > p {
display: none !important;
}
.km-slider__track > .km-product {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
scroll-snap-align: start;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
background: #ffffff !important;
border: 1px solid #f1d4d7 !important;
border-radius: 10px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
cursor: pointer !important;
box-shadow: 0 2px 10px rgba(175, 31, 36, 0.05) !important;
}
.km-slider__track > .km-product:hover {
transform: translateY(-4px) !important;
box-shadow: 0 10px 24px rgba(175, 31, 36, 0.16) !important;
border-color: #af1f24 !important;
}
.km-product__photo {
position: relative !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
display: block !important;
background: #ffffff !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
top: auto !important;
left: auto !important;
border-radius: 0 !important;
}
.km-product__photo > img.km-product__main-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
display: block !important;
transition: transform 0.3s ease !important;
}
.km-product:hover .km-product__photo > img.km-product__main-img {
transform: scale(1.04) !important;
}
/* Overlay Badge 1: Quà cho nàng - 50% (Bottom full-width strip on Nắp rửa điện tử) */
.km-product__photo > img.km-product__badge-2010 {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
max-height: 25% !important;
object-fit: contain !important;
object-position: bottom center !important;
z-index: 6 !important;
pointer-events: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
transform: none !important;
}
/* Overlay Badge 2: Kỹ thuật chuẩn TOTO (Top-right badge on TOTO products) */
.km-product__photo > img.km-product__badge-toto {
position: absolute !important;
top: 6px !important;
right: 6px !important;
width: 58% !important;
max-width: 138px !important;
height: auto !important;
max-height: 32px !important;
object-fit: contain !important;
object-position: top right !important;
z-index: 7 !important;
pointer-events: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
transform: none !important;
}
.km-product__body {
padding: 10px 10px 12px !important;
background: #ffffff !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
position: relative !important;
z-index: 2 !important;
box-sizing: border-box !important;
border-top: 1px solid #fce7e9 !important;
}
.km-product__name {
color: #221012 !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.38 !important;
margin: 0 0 8px 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
height: 37px !important;
text-align: left !important;
}
.km-product__prices {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
margin-top: auto !important;
}
.km-product__price-new {
color: #d70018 !important;
font-weight: 800 !important;
font-size: 15.5px !important;
line-height: 1 !important;
}
.km-product__price-old {
color: #94a3b8 !important;
font-size: 12px !important;
text-decoration: line-through !important;
line-height: 1 !important;
}
.km-product__discount {
background: #d70018 !important;
color: #ffffff !important;
font-weight: 800 !important;
font-size: 12px !important;
padding: 2px 5px !important;
border-radius: 4px !important;
line-height: 1.15 !important;
display: inline-block !important;
}
.km-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background: #ffffff;
color: #d70018;
border: 2px solid #d70018;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.25s ease;
padding: 0;
outline: none;
}
.km-slider__arrow:hover {
background: #d70018;
color: #ffffff;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
}
.km-slider__arrow:disabled,
.km-slider__arrow.is-disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.km-slider__arrow--prev {
left: -20px;
}
.km-slider__arrow--next {
right: -20px;
}
/* ============================================================
6 COLLECTIONS GRID
============================================================ */
.km-collections-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin-top: 24px !important;
}
.km-collections-grid br {
display: none !important;
}
.km-collection-card {
display: block;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
border: 2px solid rgba(255, 224, 130, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: #ffffff;
}
.km-collection-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
border-color: #ffe082;
}
.km-collection-card img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1 !important;
object-fit: contain;
display: block;
transition: transform 0.4s ease;
}
.km-collection-card:hover img {
transform: scale(1.02);
}
/* ============================================================
PROGRAM OFFERS (6 OFFERS: 3 ORDER TIERS + 3 SPECIAL PRIVILEGES)
============================================================ */
.km-tiers-3col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
margin-top: 24px !important;
margin-bottom: 26px !important;
}
.km-privs-3col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
}
.km-tier-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
border: 1.5px solid #f1d4d7;
box-shadow: 0 6px 22px rgba(175, 31, 36, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
}
.km-tier-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 32px rgba(175, 31, 36, 0.15);
border-color: #af1f24;
}
.km-tier-card--vip {
border: 2px solid #af1f24;
box-shadow: 0 10px 28px rgba(175, 31, 36, 0.16);
}
.km-tier-card__head {
background: linear-gradient(135deg, #fff0f2 0%, #ffe4e8 100%);
padding: 20px 18px;
text-align: center;
border-bottom: 1px solid #fecdd3;
}
.km-tier-card--vip .km-tier-card__head {
background: linear-gradient(135deg, #af1f24 0%, #d70018 100%);
color: #ffffff;
border-bottom: none;
}
.km-tier-card__sub {
display: block;
font-size: 12px;
font-weight: 800;
letter-spacing: 1px;
text-transform: none ;
color: #af1f24;
margin-bottom: 4px;
}
.km-tier-card--vip .km-tier-card__sub {
color: #ffe082;
}
.km-tier-card__title {
font-size: 22px;
font-weight: 900;
color: #8b1116;
margin: 0;
}
.km-tier-card--vip .km-tier-card__title {
color: #ffffff;
}
.km-tier-card__body {
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 12px;
flex-grow: 1;
}
.km-tier-card__item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14.5px;
color: #2d1a1c;
line-height: 1.5;
}
.km-tier-card__check {
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff0f2;
color: #d70018;
font-weight: 900;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
border: 1px solid #fecdd3;
}
.km-priv-card {
background: #ffffff;
border-radius: 16px;
padding: 24px 22px;
border: 1.5px solid #f1d4d7;
box-shadow: 0 6px 20px rgba(175, 31, 36, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.km-priv-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(175, 31, 36, 0.14);
border-color: #af1f24;
}
.km-priv-card__badge {
display: inline-block;
align-self: flex-start;
background: #af1f24;
color: #ffffff;
font-size: 12px;
font-weight: 800;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 12px;
letter-spacing: 0.5px;
text-transform: none ;
}
.km-priv-card__title {
font-size: 17.5px;
font-weight: 800;
color: #8b1116;
margin: 0 0 10px 0;
}
.km-priv-card__text {
font-size: 14px;
color: #4a3336;
line-height: 1.6;
margin: 0;
}
/* ============================================================
FLOATING QUICK MENU WITH ARROWS AT BOTH ENDS + 2 ROWS/COLS
============================================================ */
.km-quick-nav {
position: fixed !important;
right: 8px !important;
top: 52% !important;
transform: translateY(-50%) !important;
z-index: 9995 !important;
width: 192px !important;
background: rgba(255, 248, 249, 0.96) !important;

padding: 6px !important;
border-radius: 12px !important;
border: 1.5px solid #f87171 !important;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14) !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
.km-quick-nav__head {
background: #8b1116;
color: #ffe082;
font-size: 12px;
font-weight: 900;
text-align: center;
padding: 5px 4px;
border-radius: 6px;
letter-spacing: 0.4px;
text-transform: none ;
}
.km-quick-nav__arrow {
background: #fff0f2 !important;
color: #af1f24 !important;
border: 1px solid #fca5a5 !important;
border-radius: 6px !important;
height: 22px !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 12px !important;
font-weight: 900 !important;
padding: 0 !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.km-quick-nav__arrow:hover {
background: #af1f24 !important;
color: #ffffff !important;
}
.km-quick-nav__track {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 4px !important;
max-height: 68vh !important;
overflow-y: auto !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.km-quick-nav__track::-webkit-scrollbar {
display: none;
}
.km-quick-nav__link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #e11d24 0%, #af1f24 100%) !important;
color: #ffffff !important;
border: 1px solid #991b1b !important;
border-radius: 6px !important;
padding: 6px 3px !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
text-align: center !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.km-quick-nav__link:last-child {
grid-column: 1 / -1 !important;
background: linear-gradient(135deg, #8b1116 0%, #5e0b10 100%) !important;
color: #ffe082 !important;
border-color: #ffe082 !important;
font-weight: 800 !important;
padding: 7px 6px !important;
}
.km-quick-nav__link:hover,
.km-quick-nav__link.is-active {
background: #ffffff !important;
color: #af1f24 !important;
border-color: #af1f24 !important;
font-weight: 800 !important;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14) !important;
}
/* Move Floating Contact Bar to Bottom-Left on Desktop so Right Quick Menu is unobstructed */
.km-ld-contact-bar {
position: fixed !important;
left: 16px !important;
right: auto !important;
bottom: 24px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
z-index: 9996 !important;
opacity: 0;
pointer-events: none;
transform: translateX(-20px);
transition: opacity .4s ease, transform .4s ease;
}
.km-ld-contact-bar.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateX(0) !important;
}
.km-ld-contact-bar__item span {
left: calc(100% + 12px) !important;
right: auto !important;
}
.km-ld-contact-bar__item span::after {
left: auto !important;
right: 100% !important;
border-width: 5px 6px 5px 0 !important;
border-color: transparent var(--black) transparent transparent !important;
}
.km-footer {
background: #3b070a !important;
color: rgba(255,255,255,0.8) !important;
padding: 30px 0 !important;
text-align: center !important;
display: block !important;
position: relative !important;
z-index: 10 !important;
}
.km-footer__inner {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.km-footer__brand {
font-size: 14px;
color: #ffe4e6;
}
.km-footer__brand strong {
color: #ffe082;
}
.km-footer__copy {
font-size: 13px;
color: rgba(255, 228, 230, 0.7);
}

/* ============================================================
COMPREHENSIVE TABLET & MOBILE RESPONSIVE FIXES (NO BROKEN FRAMES)
============================================================ */
@media (max-width: 1024px) {
.km-slider__track {
grid-auto-columns: calc((100% - 16px) / 3) !important;
gap: 8px !important;
}
/* Bottom 2-Row Quick Nav with Left/Right Arrows at Both Ends */
.km-quick-nav {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
width: 100% !important;
max-height: none !important;
flex-direction: row !important;
align-items: stretch !important;
border-radius: 14px 14px 0 0 !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
padding: 6px 6px 8px !important;
gap: 5px !important;
box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.14) !important;
}
.km-quick-nav__head {
display: none !important;
}
.km-quick-nav__arrow {
width: 28px !important;
height: auto !important;
min-height: 60px !important;
border-radius: 8px !important;
font-size: 16px !important;
background: #8b1116 !important;
color: #ffe082 !important;
border: 1px solid #af1f24 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.km-quick-nav__arrow span {
display: inline-block !important;
transform: rotate(-90deg) !important;
}
.km-quick-nav__track {
display: grid !important;
grid-template-columns: none !important;
grid-template-rows: repeat(2, auto) !important;
grid-auto-flow: column !important;
grid-auto-columns: max-content !important;
gap: 5px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
max-height: none !important;
flex: 1 1 auto !important;
padding: 1px 2px !important;
align-items: center !important;
}
.km-quick-nav__link,
.km-quick-nav__link:last-child {
grid-column: auto !important;
padding: 6px 11px !important;
font-size: 12px !important;
border-radius: 16px !important;
white-space: nowrap !important;
}
.km-ld-contact-bar {
left: auto !important;
right: 10px !important;
bottom: 90px !important;
}
.km-footer {
padding-bottom: 96px !important;
}
}
@media (max-width: 900px) {
.km-tiers-3col,
.km-privs-3col {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
}
@media (max-width: 768px) {
.landing-promo .container {
padding: 0 12px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.km-section {
padding: 32px 0 38px !important;
}
.km-section__header {
margin-bottom: 18px !important;
}
.km-section__tag {
font-size: 12px !important;
padding: 4px 12px !important;
margin-bottom: 6px !important;
}
.km-section__title {
font-size: 20px !important;
line-height: 1.3 !important;
margin: 2px 0 6px !important;
}
.km-section__desc {
font-size: 13.5px !important;
line-height: 1.45 !important;
}
/* Countdown on Mobile */
.km-countdown {
padding: 10px 0 !important;
}
.km-countdown__inner {
flex-direction: column !important;
gap: 6px !important;
}
.km-countdown__label {
display: block !important;
font-size: 12px !important;
text-align: center !important;
letter-spacing: 0.4px !important;
}
.km-countdown__number {
font-size: 1.15rem !important;
min-width: 38px !important;
padding: 5px 6px !important;
}
.km-countdown__colon {
font-size: 1.1rem !important;
margin: 0 2px 12px !important;
}
/* Dual Banners on Mobile */
.km-dual-banners {
padding: 16px 0 8px !important;
}
.km-dual-banners__grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* 6 Collections on Mobile */
.km-collections-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
margin-top: 16px !important;
}
/* Program Offers on Mobile */
.km-tier-card__head {
padding: 14px 14px !important;
}
.km-tier-card__title {
font-size: 18px !important;
}
.km-tier-card__body {
padding: 14px 16px !important;
gap: 10px !important;
}
.km-tier-card__item {
font-size: 13.5px !important;
}
.km-priv-card {
padding: 18px 16px !important;
}
.km-priv-card__title {
font-size: 16px !important;
}
.km-priv-card__text {
font-size: 13.5px !important;
}
/* About Section Mobile Fix (Prevent 10.000+ Stats Overflow & Fix Video/Boxes) */
.km-about__card {
padding: 22px 14px !important;
margin-bottom: 20px !important;
}
.km-about__logo {
max-width: 160px !important;
margin-bottom: 10px !important;
}
.km-about__text {
font-size: 13.5px !important;
line-height: 1.65 !important;
margin-bottom: 18px !important;
}
.km-about__stats {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
padding-top: 16px !important;
}
.km-about__stat-icon {
width: 42px !important;
height: 42px !important;
margin-bottom: 6px !important;
}
.km-about__stat-icon svg {
width: 20px !important;
height: 20px !important;
}
.km-about__stat-num {
font-size: 1.15rem !important;
margin-bottom: 2px !important;
word-break: keep-all !important;
}
.km-about__stat-label {
font-size: 12px !important;
line-height: 1.25 !important;
}
.km-about__video {
margin-bottom: 20px !important;
min-height: 195px !important;
border-width: 2px !important;
border-radius: 12px !important;
}
.km-about__values {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
.km-about__value {
padding: 16px 10px !important;
}
.km-about__value-icon {
width: 50px !important;
height: 50px !important;
margin-bottom: 8px !important;
}
.km-about__value-icon img {
width: 30px !important;
height: 30px !important;
}
.km-about__box {
padding: 18px 12px !important;
margin-bottom: 18px !important;
}
.km-about__box-title {
font-size: 15px !important;
margin-bottom: 12px !important;
}
/* Form & Showroom Mobile Fix */
.km-form-wrap {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.km-birthday-form {
padding: 18px 14px !important;
}
.km-birthday-form__row {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-bottom: 12px !important;
}
.km-showroom {
padding: 18px 16px !important;
}
}
@media (max-width: 680px) {
.km-slider__track {
grid-auto-columns: calc((100% - 8px) / 2) !important;
gap: 8px !important;
padding: 4px 2px 12px 2px !important;
}
.km-product__photo > img.km-product__badge-toto {
top: 4px !important;
right: 4px !important;
width: 62% !important;
max-width: 104px !important;
max-height: 24px !important;
}
.km-product__body {
padding: 8px 8px 10px !important;
}
.km-product__name {
font-size: 12px !important;
height: 33px !important;
margin-bottom: 6px !important;
}
.km-product__prices {
gap: 4px !important;
}
.km-product__price-new {
font-size: 13.5px !important;
}
.km-product__price-old {
font-size: 12px !important;
}
.km-product__discount {
font-size: 12px !important;
padding: 1px 4px !important;
}
.km-slider__arrow--prev {
left: 2px !important;
width: 34px !important;
height: 34px !important;
}
.km-slider__arrow--next {
right: 2px !important;
width: 34px !important;
height: 34px !important;
}
}
/* TOTO MEGA SALE SECTION - 6 BANNERS BALANCED GRID */
.km-toto-mega {
background: linear-gradient(180deg, #fff8f8 0%, #f4f8fc 50%, #ffffff 100%) !important;
padding: 48px 0 56px !important;
border-top: 1px solid rgba(175, 31, 36, 0.1) !important;
border-bottom: 1px solid rgba(0, 70, 148, 0.1) !important;
}
.km-toto-mega__grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 22px !important;
}
.km-toto-card {
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
border-radius: 18px !important;
overflow: hidden !important;
border: 1px solid rgba(0, 82, 165, 0.14) !important;
box-shadow: 0 8px 24px rgba(13, 45, 89, 0.08) !important;
text-decoration: none !important;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
position: relative !important;
}
.km-toto-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 16px 36px rgba(175, 31, 36, 0.16) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
.km-toto-card__img {
position: relative !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
line-height: 0 !important;
background: #eef5fc !important;
}
.km-toto-card__img img {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.4s ease !important;
}
.km-toto-card:hover .km-toto-card__img img {
transform: scale(1.02) !important;
}
/* 6th BANNER: TEXT & CTA CARD */
.km-toto-card--text {
background: linear-gradient(160deg, #ffffff 0%, #f4f8fd 55%, #e9f2fb 100%) !important;
border: 1px solid rgba(0, 82, 165, 0.2) !important;
padding: 18px 18px 16px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
position: relative !important;
color: inherit !important;
}
.km-toto-card--text::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 5px !important;
background: linear-gradient(90deg, #004ea2 0%, #af1f24 100%) !important;
}
.km-toto-card__kicker {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
background: linear-gradient(135deg, #004ea2 0%, #0072ce 100%) !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 800 !important;
padding: 4px 10px !important;
border-radius: 99px !important;
align-self: flex-start !important;
letter-spacing: 0.3px !important;
margin-bottom: 8px !important;
}
.km-toto-card__headline {
font-size: 18px !important;
font-weight: 800 !important;
color: #0d2b4e !important;
line-height: 1.3 !important;
margin: 0 0 4px 0 !important;
}
.km-toto-card__lead {
font-size: 12.5px !important;
color: #475569 !important;
line-height: 1.4 !important;
margin: 0 0 12px 0 !important;
}
.km-toto-card__points {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-bottom: 10px !important;
}
.km-toto-card__point {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(0, 82, 165, 0.12) !important;
border: 1px solid rgba(0, 91, 171, 0.28) !important;
border-radius: 8px !important;
padding: 7px 10px !important;
font-size: 12.5px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s ease !important;
}
.km-toto-card__point:hover {
background: #f0f7ff !important;
border-color: #93c5fd !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
.km-toto-card__point-name {
color: #0f172a !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.km-toto-card__point-deal {
font-size: 12px !important;
font-weight: 800 !important;
color: #af1f24 !important;
background: #fff1f2 !important;
border: 1px solid rgba(15, 23, 42, 0.14) !important;
padding: 2px 7px !important;
border-radius: 99px !important;
white-space: nowrap !important;
}
.km-toto-card__cta {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: linear-gradient(135deg, #bd151e 0%, #8c0d14 100%) !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 800 !important;
padding: 12px 18px !important;
border-radius: 10px !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14) !important;
transition: all 0.2s ease !important;
letter-spacing: 0.3px !important;
text-align: center !important;
}
.km-toto-card__cta:hover {
background: linear-gradient(135deg, #d62828 0%, #a00c14 100%) !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14) !important;
transform: translateY(-1px) !important;
}
@media (max-width: 991px) {
.km-toto-mega__grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
}
@media (max-width: 600px) {
.km-toto-mega {
padding: 28px 0 34px !important;
}
.km-toto-mega__grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.km-toto-card--text {
padding: 18px 16px !important;
}
}
/* HIDE LEGACY POPUP */
#pum-44699, .pum-overlay#pum-44699, #kido-popup-2010-modal, .kido-popup-2010 {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.pum-open.pum-open-overlay, html.pum-open.pum-open-scrollable, body.pum-open {
overflow: auto !important;
padding-right: 0 !important;
}
/* FIX SLIDER ARROWS SYMMETRICALLY INSIDE PRODUCT LOOP ITEMS */
button.km-slider__arrow,
.km-slider__arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.96) !important;
color: #d70018 !important;
border: 2px solid #d70018 !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
display: flex;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 15 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important;
box-sizing: border-box !important;
}
button.km-slider__arrow[style*="display: none"],
.km-slider__arrow[style*="display: none"],
button.km-slider__arrow[style*="display:none"],
.km-slider__arrow[style*="display:none"] {
display: none !important;
}
button.km-slider__arrow:hover,
.km-slider__arrow:hover {
background: #d70018 !important;
color: #ffffff !important;
transform: translateY(-50%) scale(1.08) !important;
}
button.km-slider__arrow--prev,
.km-slider__arrow--prev {
left: 8px !important;
right: auto !important;
margin: 0 !important;
}
button.km-slider__arrow--next,
.km-slider__arrow--next {
right: 8px !important;
left: auto !important;
margin: 0 !important;
}
button.km-quick-nav__arrow,
.km-quick-nav__arrow {
margin: 0 !important;
}
@media (min-width: 1025px) and (max-width: 1600px) {
.km-quick-nav {
width: 132px !important;
right: 4px !important;
padding: 5px !important;
}
.km-quick-nav__track {
grid-template-columns: 1fr !important;
max-height: 62vh !important;
}
.km-quick-nav__head {
font-size: 12px !important;
padding: 4px 2px !important;
}
.km-quick-nav__link {
font-size: 12px !important;
padding: 5px 4px !important;
}
}
@media (max-width: 680px) {
button.km-slider__arrow,
.km-slider__arrow {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
min-height: 34px !important;
max-height: 34px !important;
}
button.km-slider__arrow--prev,
.km-slider__arrow--prev {
left: 6px !important;
right: auto !important;
margin: 0 !important;
}
button.km-slider__arrow--next,
.km-slider__arrow--next {
right: 6px !important;
left: auto !important;
margin: 0 !important;
}
}
/* BADGES AND PRICING ENHANCEMENTS */
.km-product__photo {
position: relative !important;
width: 100% !important;
aspect-ratio: 1/1 !important;
display: block !important;
background: #ffffff !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
.km-product__photo > img.km-product__main-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
transition: transform 0.3s ease !important;
}
/* 1. DISCOUNT % BADGE: INSIDE IMAGE AT TOP-RIGHT */
.km-product__photo > .km-product__discount,
.km-product__discount {
position: absolute !important;
top: 8px !important;
right: 8px !important;
bottom: auto !important;
left: auto !important;
background: #e02424 !important;
color: #ffffff !important;
font-weight: 800 !important;
font-size: 12px !important;
padding: 3px 8px !important;
border-radius: 6px !important;
line-height: 1.2 !important;
display: inline-block !important;
z-index: 10 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
pointer-events: none !important;
}
/* 2. OTHER BADGES (TOTO BADGE): INSIDE IMAGE AT BOTTOM-LEFT */
.km-product__photo > img.km-product__badge-toto {
position: absolute !important;
bottom: 8px !important;
left: 8px !important;
top: auto !important;
right: auto !important;
width: 48% !important;
max-width: 115px !important;
height: auto !important;
max-height: 28px !important;
object-fit: contain !important;
object-position: bottom left !important;
z-index: 9 !important;
pointer-events: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
background: transparent !important;
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22)) !important;
transform: none !important;
}
/* 3. PRODUCT PRICES: PROMO RED, OLD CROSSED OUT */
.km-product__prices {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin-top: 4px !important;
}
.km-product__price-new {
color: #d70018 !important;
font-weight: 800 !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
.km-product__price-old {
color: #888888 !important;
font-size: 12px !important;
text-decoration: line-through !important;
font-weight: 400 !important;
line-height: 1.2 !important;
}
@media (max-width: 680px) {
.km-product__photo > .km-product__discount,
.km-product__discount {
top: 6px !important;
right: 6px !important;
font-size: 12px !important;
padding: 2px 6px !important;
border-radius: 4px !important;
}
.km-product__photo > img.km-product__badge-toto {
bottom: 6px !important;
left: 6px !important;
top: auto !important;
right: auto !important;
width: 50% !important;
max-width: 90px !important;
max-height: 22px !important;
}
.km-product__prices {
gap: 6px !important;
}
.km-product__price-new {
font-size: 13.5px !important;
}
.km-product__price-old {
font-size: 12px !important;
}
}

/* avoid-ai-design-ignore-file: K2 */

/* ============================================================
   OPENDESIGN & ANTI-AI-SLOP ARCHITECTURAL OVERRIDES (DESIGN.md)
   ============================================================ */
.landing-promo a:focus-visible,
.landing-promo button:focus-visible,
.landing-promo input:focus-visible,
.landing-promo select:focus-visible,
.landing-promo textarea:focus-visible {
  outline: 2px solid #af1f24 !important;
  outline-offset: 2px !important;
}

/* Ensure all lazy images are immediately visible under Zero-JS */
img.km-lazy {
  opacity: 1 !important;
}

.km-landing-wrapper {
  padding-top: 0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

/* 1. Remove frozen Zero-JS countdown timers & redundant hero floating button */
.km-topbar,
.km-countdown,
.km-hero__cta-wrap {
  display: none !important;
}

/* 2. Transform floating 18-pill right sidebar into a clean sticky horizontal category index bar */
.km-quick-nav {
  position: sticky !important;
  top: var(--header-height, 68px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: none !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  padding: 10px 0 !important;
  z-index: 45 !important;
  display: block !important;
}
.km-quick-nav__inner-wrap,
.km-quick-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px max(20px, calc((100vw - 1300px) / 2)) !important;
}
.km-quick-nav__head {
  background: #0f172a !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.km-quick-nav__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-height: none !important;
  width: 100% !important;
  scrollbar-width: none !important;
  padding: 2px 0 !important;
}
.km-quick-nav__track::-webkit-scrollbar {
  display: none !important;
}
.km-quick-nav__link,
a.km-quick-nav__link {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}
.km-quick-nav__link:hover,
a.km-quick-nav__link:hover,
.km-quick-nav__link:focus-visible {
  background: #af1f24 !important;
  color: #ffffff !important;
  border-color: #af1f24 !important;
  transform: none !important;
}
.km-quick-nav__link:last-child,
a.km-quick-nav__link:last-child {
  background: #af1f24 !important;
  color: #ffffff !important;
  border-color: #af1f24 !important;
}

/* 3. Architectural Section Rhythm & Surfaces (Remove pink/maroon AI-slop gradients) */
.km-section {
  padding: 48px 0 56px !important;
}
.km-section--white {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.km-section--light,
.km-toto-mega {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.km-section--dark,
.km-section--dark-bg {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-top: 1px solid #1e293b !important;
  border-bottom: 1px solid #1e293b !important;
}

/* 4. Architectural Left-Aligned Section Headers (Replace centered pill-badge + all-caps red title) */
.km-section__header {
  text-align: left !important;
  margin-bottom: 28px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  position: relative !important;
  padding-left: 16px !important;
}
.km-section__header::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 18px !important;
  width: 4px !important;
  border-radius: 2px !important;
  background: #af1f24 !important;
}
.km-section--dark .km-section__header,
.km-section--dark-bg .km-section__header {
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
.km-badge,
.km-badge--red,
.km-badge--white,
.km-section__tag {
  display: inline-block !important;
  background: transparent !important;
  color: #af1f24 !important;
  border: 0 none transparent !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 6px 0 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  text-align: left !important;
}
.km-section--dark .km-badge,
.km-section--dark .km-badge--white,
.km-section--dark .km-section__tag,
.km-section--dark-bg .km-badge,
.km-section--dark-bg .km-badge--white,
.km-section--dark-bg .km-section__tag {
  color: #fca5a5 !important;
  background: transparent !important;
  border: 0 none transparent !important;
}
.km-section__title {
  color: #0f172a !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 6px 0 !important;
  text-align: left !important;
}
.km-section--dark .km-section__title,
.km-section--dark-bg .km-section__title,
.km-section__title--light {
  color: #ffffff !important;
  text-align: left !important;
}
.km-section__desc {
  color: #475569 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  max-width: 780px !important;
  margin: 0 !important;
  text-align: left !important;
}
.km-section--dark .km-section__desc,
.km-section--dark-bg .km-section__desc,
.km-section__desc--light {
  color: #cbd5e1 !important;
  text-align: left !important;
}

/* 5. Buttons — Replace 999px bouncy gradient pills with crisp 8px architectural CTAs */
.km-btn,
a.km-btn,
button.km-btn,
input.km-btn,
.km-toto-card__cta {
  border-radius: 8px !important;
  padding: 11px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12) !important;
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
.km-btn:hover,
a.km-btn:hover,
button.km-btn:hover,
.km-toto-card__cta:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16) !important;
}
.km-btn--red,
a.km-btn--red,
button.km-btn--red,
.km-toto-card__cta {
  background: #af1f24 !important;
  color: #ffffff !important;
  border: 1px solid #af1f24 !important;
}
.km-btn--red:hover,
a.km-btn--red:hover,
button.km-btn--red:hover,
.km-toto-card__cta:hover {
  background: #8f171b !important;
  border-color: #8f171b !important;
}
.km-btn--white,
a.km-btn--white {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.km-btn--white:hover,
a.km-btn--white:hover {
  background: #f8fafc !important;
  color: #af1f24 !important;
  border-color: #cbd5e1 !important;
}
.km-section__cta {
  text-align: left !important;
  margin-top: 20px !important;
}

/* 6. Product Cards — Architectural Showroom Geometry */
.km-product {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.km-product:hover {
  transform: none !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07) !important;
}
.km-product__body {
  position: static !important;
  padding: 12px 14px 14px !important;
}
.km-product__photo {
  position: relative !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.km-product__name {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
}
.km-product__price-new {
  color: #af1f24 !important;
  font-variant-numeric: tabular-nums !important;
}
.km-product__price-old {
  color: #64748b !important;
  font-variant-numeric: tabular-nums !important;
}
.km-product__discount {
  background: #af1f24 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-variant-numeric: tabular-nums !important;
}

/* 7. TOTO Mega Sale 6th Card & Collection Cards */
.km-toto-card {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
.km-toto-card:hover {
  transform: none !important;
  border-color: #94a3b8 !important;
}
.km-toto-card--text {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  padding: 22px 20px !important;
}
.km-toto-card__kicker {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}
.km-toto-card__point-deal {
  border-radius: 4px !important;
  background: #fef2f2 !important;
  color: #af1f24 !important;
  border: 1px solid #fecaca !important;
}
.km-collection-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
.km-collection-card:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* 8. About Video Play Button & Value Cards (De-slop centered icon circles) */
.km-about__card,
.km-about__box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.km-about__video {
  position: relative !important;
  display: block !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
}
.km-about__video-overlay {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 100%) !important;
}
.km-about__video-thumb {
  opacity: 1 !important;
  filter: none !important;
}
.km-about__video-play {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  width: 68px !important;
  height: 48px !important;
  border-radius: 10px !important;
  background: #af1f24 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35) !important;
}
.km-about__video-play svg {
  width: 24px !important;
  height: 24px !important;
  fill: #ffffff !important;
}
.km-about__video-caption {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 14px !important;
  left: 16px !important;
  width: auto !important;
  height: auto !important;
  background: rgba(15, 23, 42, 0.82) !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.km-about__value {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-align: left !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.km-about__value-icon {
  margin: 0 0 12px 0 !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

/* 9. Lead Registration Form — Fix select/input contrast & architectural card */
.km-birthday-form {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 28px !important;
  color: #0f172a !important;
}
.km-birthday-form__label {
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.km-birthday-form__input,
.km-birthday-form__select,
.km-birthday-form__textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
}
.km-birthday-form__select option {
  color: #0f172a !important;
  background: #ffffff !important;
}
.km-showroom {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  color: #f8fafc !important;
}

/* 10. Scrollbar & Privileges Cards */
.km-tier-card,
.km-priv-card {
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: none !important;
}
.km-tier-card__badge,
.km-priv-card__badge {
  background: #8b181d !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}
.km-slider__track {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(175, 31, 36, 0.35) rgba(0, 0, 0, 0.06) !important;
  padding-bottom: 14px !important;
}
.km-slider__track::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}
.km-slider__track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 99px !important;
}
.km-slider__track::-webkit-scrollbar-thumb {
  background: rgba(175, 31, 36, 0.35) !important;
  border-radius: 99px !important;
}
@media (max-width: 849px) {
  .km-quick-nav {
    top: 98px !important;
    padding: 6px 12px !important;
  }
  .km-quick-nav__head {
    display: none !important;
  }
}