/* Louis Yoga — 3 khối giữa trang chủ (Ưu đãi → YOGA MAT → Phụ kiện) theo PDF "Bản edit trang chủ" 10/10/2026.
   Markup: snippets/ly-home-mid.bwt · JS: assets/ly-home-mid.js. Chỉ dùng Flexbox. Số đo quy đổi từ PDF 1140pt (×1,56 ≈ px). */
:root{
  --lym-pink:#d72182;
  --lym-pink-dark:#b9166d;
  --lym-wine:#4a202c;
  --lym-ink:#111010;
  --lym-vch-bg:#4a202c;
  --lym-vch-text:#fff;
  --lym-vch-accent:#ffc7e0;
  --lym-panel-bg:#f5f5f5;
  --lym-muted:#8a8a8a;
  --lym-page-num:#e6e6e6;
  --lym-font:Montserrat,Arial,sans-serif;
  --lym-w:1040px;
  --lym-r-sale:12px;
  --lym-r-poster:10px;
  --lym-r-panel:24px;
  --lym-r-banner:22px;
  --lym-r-card:8px;
  --lym-gap-sale:13px;
  --lym-gap-mats:29px;
  --lym-gap-acc:42px;
  --lym-title:clamp(30px,5.4vw,62px);
}

.lym{font-family:var(--lym-font);color:var(--lym-wine)}
.lym *{box-sizing:border-box}
.lym [hidden]{display:none!important}
.lym-sale-wrap,.lym-panel-wrap{width:min(var(--lym-w),calc(100% - 48px));margin-inline:auto}
.lym-sale-wrap{padding-top:28px}
.lym-panel-wrap{padding:45px 0 28px}
.lym-empty{margin:0;padding:24px 0;width:100%;text-align:center;font-size:13px;color:var(--lym-muted)}

/* ---------- Hàng thẻ dùng chung (Flexbox) ---------- */
.lym-row{display:flex;flex-wrap:nowrap;align-items:stretch}
.lym-item{display:flex;flex-direction:column;min-width:0}
.lym-item>.ly-card{flex:1 1 auto;width:100%}
.lym .ly-card{border-radius:var(--lym-r-card)}
.lym .ly-card-actions{display:flex!important;gap:6px}
.lym .ly-card-actions>.ly-btn-cart{flex:1.27 1 0}
.lym .ly-card-actions>.ly-btn-buy{flex:1 1 0}

/* ---------- 1. KHỐI ƯU ĐÃI ---------- */
.lym-sale{position:relative;display:flex;align-items:flex-start;gap:35px;padding:12px 0 16px 16px;background:var(--lym-pink);border-radius:var(--lym-r-sale);overflow:hidden;isolation:isolate}
/* Nền chữ SALE viền mờ chạy ngang theo đường chéo (6 hàng, hàng chẵn chạy ngược) */
.lym-sale-bg{position:absolute;z-index:-1;inset:-45% -25%;display:flex;flex-direction:column;justify-content:center;gap:6px;transform:rotate(-9deg);pointer-events:none;user-select:none;overflow:hidden}
.lym-sale-bg span{display:flex;width:max-content;white-space:nowrap;animation:lym-marquee 48s linear infinite;will-change:transform}
.lym-sale-bg span:nth-child(even){animation-direction:reverse;animation-duration:56s}
.lym-sale-bg span:nth-child(3n){opacity:.55}
.lym-sale-bg i{flex:0 0 auto;padding-right:44px;font:italic 900 112px/1 var(--lym-font);letter-spacing:8px;word-spacing:44px;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22)}
@keyframes lym-marquee{to{transform:translateX(-50%)}}
.lym-poster{flex:0 0 32.2%;display:block;aspect-ratio:3/4;border-radius:var(--lym-r-poster);overflow:hidden;background:#f2a9c9;box-shadow:0 8px 24px rgba(80,0,40,.18)}
.lym-poster img{display:block;width:100%;height:100%;object-fit:contain}
a.lym-poster{transition:transform .25s,box-shadow .25s}
a.lym-poster:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(80,0,40,.28)}
.lym-sale-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding-top:23px}
.lym-bar{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-left:14.8%;min-height:132px;padding:16px 26px 16px 30px;background:var(--lym-ink);color:#fff;border-radius:14px 0 0 14px}
.lym-bar-text{min-width:0}
.lym-bar h2{margin:0;font:900 clamp(20px,2.5vw,30px)/1.1 var(--lym-font);letter-spacing:-.3px;color:#fff;text-transform:uppercase}
.lym-bar-sub{margin:8px 0 0;font:800 clamp(16px,1.9vw,24px)/1.15 var(--lym-font);color:#fff}
.lym-cd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
.lym-cd-label{font:900 clamp(18px,2.2vw,28px)/1 var(--lym-font)}
.lym-cd-units{display:flex;gap:6px}
.lym-cd-units b{display:flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 4px;background:#fff;color:var(--lym-ink);border-radius:6px;font:900 18px/1 var(--lym-font);font-variant-numeric:tabular-nums}
.lym-watch{flex:0 0 auto;width:96px;height:80px;color:#fff}
.lym-row-sale{gap:var(--lym-gap-sale);margin:20px 14px 0 0}
.lym-row-sale>.lym-item{flex:1 1 0}
.lym-vch{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;height:24px;margin-bottom:6px;padding:0 6px;background:var(--lym-vch-bg);color:var(--lym-vch-text);box-shadow:0 2px 8px rgba(74,32,44,.25);border-radius:3px;font:italic 800 13px/1 var(--lym-font);letter-spacing:.2px;text-transform:uppercase;white-space:nowrap;overflow:hidden}
.lym-vch.is-empty{visibility:hidden}

/* Hiệu ứng lặp nhẹ: tiêu đề ánh sáng lướt, dòng phụ "thở", vệt sáng quét thanh đen + nhãn giảm giá */
.lym-bar h2{background:linear-gradient(100deg,#fff 0 42%,var(--lym-vch-accent) 50%,#fff 58% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lym-shine-text 4.5s ease-in-out infinite}
@keyframes lym-shine-text{0%,35%{background-position:100% 0}75%,100%{background-position:0 0}}
.lym-bar-sub{animation:lym-breathe 3.2s ease-in-out infinite;transform-origin:left center}
@keyframes lym-breathe{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.78;transform:translateY(-2px)}}
.lym-bar:after,.lym-vch:not(.is-empty):after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:lym-sweep 5s ease-in-out infinite;pointer-events:none}
.lym-vch:not(.is-empty):after{animation-duration:4s;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
.lym-row-sale>.lym-item:nth-child(2) .lym-vch:after{animation-delay:.25s}
.lym-row-sale>.lym-item:nth-child(3) .lym-vch:after{animation-delay:.5s}
.lym-row-sale>.lym-item:nth-child(4) .lym-vch:after{animation-delay:.75s}
@keyframes lym-sweep{0%,55%{left:-40%}100%{left:130%}}
.lym-watch{animation:lym-tick 2.4s ease-in-out infinite;transform-origin:42% 56%}
@keyframes lym-tick{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(7deg)}95%{transform:rotate(-4deg)}}
/* Chỉ chạy khi khối ưu đãi trong màn hình (JS gắn .is-live) */
.lym-sale-wrap:not(.is-live) .lym-sale *,.lym-sale-wrap:not(.is-live) .lym-sale *:after{animation-play-state:paused!important}
.lym-row-sale .ly-product-image{aspect-ratio:1/.82}
.lym-row-sale .ly-card h3{font-size:11.5px;line-height:1.3;min-height:2.6em;margin:0 0 6px}
.lym-row-sale .ly-card-meta{margin:auto 0 8px}
.lym-row-sale .ly-card-info{padding:8px 8px 9px}
.lym-row-sale .ly-rv{display:none}
.lym-row-sale .ly-card .ly-price strong{font-size:13px}
.lym-row-sale .ly-card-actions{gap:4px}
.lym-row-sale .ly-card-actions .ly-btn-cart,.lym-row-sale .ly-card-actions .ly-btn-buy{height:28px;min-height:28px;padding:0 3px;font-size:8.5px;letter-spacing:.1px}
.lym-row-sale .ly-wish svg{width:22px;height:22px}

/* ---------- 2. KHUNG XÁM + YOGA MAT ---------- */
.lym-panel{padding:40px 0 43px;background:var(--lym-panel-bg);border-radius:var(--lym-r-panel)}
.lym-title{margin:0;font:800 var(--lym-title)/1.06 var(--lym-font);letter-spacing:-1px;text-align:center;color:var(--lym-wine)}
.lym-title .lym-t1{color:var(--lym-wine)}
.lym-title .lym-t2{color:var(--lym-pink)}
.lym-mats .lym-title span{display:block}
.lym-mats .lym-title .lym-t2{font-size:1.08em}
.lym-banners{width:84.5%;margin:28px auto 0}
.lym-banner{display:block;aspect-ratio:4/1;border-radius:var(--lym-r-banner);overflow:hidden;background:#eee}
.lym-banner img{display:block;width:100%;height:100%;object-fit:contain}
.lym-tabs{display:flex;width:63.5%;max-width:660px;margin:29px auto 0;padding:2px;background:#fff;border-radius:999px}
.lym-tab{flex:1 1 0;height:32px;padding:0 10px;border:0!important;border-radius:999px!important;background:transparent!important;color:#555!important;font:600 13px/1 var(--lym-font)!important;letter-spacing:.2px;cursor:pointer;transition:background .2s,color .2s}
.lym-tab:hover{color:var(--lym-pink)!important}
.lym-tab[aria-selected=true]{background:var(--lym-pink)!important;color:#fff!important}
.lym-desc{margin:10px 0 12px;text-align:center;font:italic 400 15px/1.4 var(--lym-font);color:var(--lym-muted)}
.lym-row-mats{width:79%;margin:0 auto;gap:var(--lym-gap-mats)}
.lym-row-mats>.lym-item{flex:0 0 calc((100% - 3 * var(--lym-gap-mats)) / 4)}

/* ---------- 3. PHỤ KIỆN ---------- */
.lym-divider{display:block;width:93.4%;height:2px;margin:40px auto 0;border:0;background:var(--lym-pink);opacity:1}
.lym-acc-head{width:87.3%;margin:34px auto 0;padding-left:17px}
.lym-title-left{text-align:left;white-space:nowrap}
.lym-acc-sub{position:relative;margin:30px 0 0;padding-top:6px;font:400 clamp(15px,1.9vw,21px)/1.35 var(--lym-font);color:var(--lym-wine)}
.lym-acc-sub:before{content:'';position:absolute;left:0;top:-4px;width:322px;max-width:100%;height:1px;background:var(--lym-wine)}
.lym-row-acc{width:87.3%;margin:30px auto 0;gap:var(--lym-gap-acc);flex-wrap:wrap}
.lym-row-acc>.lym-item{flex:0 0 calc((100% - 3 * var(--lym-gap-acc)) / 4)}
.lym-pager{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:37px}
.lym-pager button{display:flex;align-items:center;justify-content:center;min-width:36px;height:31px;padding:0 8px;border:0!important;border-radius:2px!important;background:var(--lym-page-num)!important;color:#fff!important;font:800 15px/1 var(--lym-font)!important;cursor:pointer;transition:background .2s}
.lym-pager button:hover:not(:disabled):not([aria-current]){background:#f0b6d4!important}
.lym-pager button[aria-current=page]{background:var(--lym-pink)!important}
.lym-pager button:disabled{opacity:.55;cursor:default}
.lym-pager .lym-dots{min-width:20px;text-align:center;color:#b5b5b5;font-weight:800}

/* ---------- Máy tính bảng ---------- */
@media(max-width:1023px){
  .lym-sale{flex-direction:column;align-items:stretch;gap:16px;padding:16px}
  .lym-poster{flex:none;width:min(400px,100%);align-self:center}
  .lym-sale-main{padding-top:0}
  .lym-bar{margin-left:0;border-radius:12px;min-height:0}
  .lym-row-sale{margin:18px 0 0}
  .lym-banners,.lym-tabs,.lym-row-mats,.lym-divider,.lym-acc-head,.lym-row-acc{width:100%}
  .lym-panel{padding:36px 20px 38px}
  :root{--lym-gap-mats:16px;--lym-gap-acc:16px}
  .lym-acc-head{padding-left:0}
}

/* ---------- Điện thoại: 2 thẻ mỗi hàng ---------- */
@media(max-width:767px){
  .lym-sale-wrap,.lym-panel-wrap{width:calc(100% - 32px)}
  .lym-sale-wrap{padding-top:22px}
  .lym-panel-wrap{padding:28px 0 20px}
  .lym-sale{padding:12px;border-radius:10px}
  .lym-sale-bg i{font-size:72px;padding-right:28px;word-spacing:28px}
  .lym-bar{padding:14px 16px;gap:10px}
  .lym-watch{width:58px;height:48px}
  .lym-cd-units b{min-width:30px;height:30px;font-size:15px}
  :root{--lym-gap-sale:10px;--lym-gap-mats:10px;--lym-gap-acc:10px;--lym-r-panel:16px;--lym-r-banner:10px}
  .lym-row-sale,.lym-row-mats{flex-wrap:wrap;row-gap:14px}
  .lym-row-sale>.lym-item,.lym-row-mats>.lym-item,.lym-row-acc>.lym-item{flex:0 0 calc((100% - var(--lym-gap-sale)) / 2)}
  .lym-row-acc{row-gap:14px}
  .lym-vch{font-size:11px;height:22px}
  .lym .ly-card-actions{gap:4px}
  .lym .ly-card-actions .ly-btn-cart,.lym .ly-card-actions .ly-btn-buy{font-size:8px;letter-spacing:0;padding:0 2px}
  .lym-panel{padding:28px 12px 30px}
  .lym-title{letter-spacing:-.5px}
  .lym-banners{margin-top:20px}
  .lym-tabs{margin-top:18px}
  .lym-tab{font-size:12px!important;height:34px;padding:0 4px}
  .lym-desc{font-size:13px;margin:10px 0 14px}
  .lym-divider{margin-top:28px}
  .lym-acc-head{margin-top:24px}
  .lym-title-left{white-space:normal;font-size:clamp(24px,7.4vw,32px)}
  .lym-acc-sub{margin-top:20px;font-size:14px}
  .lym-acc-sub:before{width:200px}
  .lym-row-acc{margin-top:20px}
  .lym-pager{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.lym *,.lym *:after{transition:none!important;animation:none!important}}