/* =============================================================================
   Trang "Danh sách khuyến mãi" (page-templates/khuyen-mai.php) + trang "Flash Sale" (page-templates/flash-sale.php)
   Số đo theo gốc onewaymobile.vn/danh-sach-khuyen-mai và /flash-sale (đo ở 390px và 1440px).
   Gốc dựng tiêu đề, nút, bục, bảng thành viên bằng ẢNH → ở đây dựng lại bằng CSS + hình tự vẽ.
   Dưới 1200px: px · từ 1200px: rem (html{font-size:1vw}).
   ============================================================================= */

/* ---------- nền chung: cam có tia sáng ---------- */
.kmt-trang {
  position: relative; overflow: hidden; padding-bottom: 50px;
  background:
    radial-gradient(ellipse 80% 30% at 50% 8%, rgba(255, 240, 160, .8), rgba(255, 200, 80, 0) 70%),
    repeating-conic-gradient(from 0deg at 50% 10%, rgba(255, 255, 255, .08) 0deg 4deg, rgba(255, 255, 255, 0) 4deg 12deg),
    linear-gradient(180deg, #ffa53a 0%, #ff8a1f 22%, #ff6d0d 60%, #ff5a00 100%);
}
.kmt-trang .wrap { position: relative; }

/* ---------- tiêu đề chữ đỏ viền trắng (Ưu đãi hằng tuần, Thu cũ đổi mới, Khách hàng thân thiết) ---------- */
.kmt-tde {
  position: relative; z-index: 4; width: max-content; max-width: 100%; margin: 0 auto; text-align: center;
  font-size: 24px; line-height: 1.2; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .01em;
  transform: rotate(-3deg);
}
.kmt-tde::before {
  content: attr(data-chu); position: absolute; inset: 0; z-index: 0; color: #fff;
  -webkit-text-stroke: 7px #fff; text-shadow: 0 5px 0 #c42a10, 0 9px 16px rgba(110, 20, 0, .35);
}
.kmt-tde span {
  position: relative; z-index: 1; color: #e3210f;
  background: linear-gradient(180deg, #ff4a24 0%, #e01a0c 55%, #ff7418 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.kmt-mota { display: none; margin-top: 16.67px; text-align: center; font-size: 25px; line-height: 31.5px; font-weight: 600; color: #fff; }

/* ---------- nút cam viền vàng (Tất cả sản phẩm, Xem tất cả, Tìm hiểu thêm) ---------- */
.kmt-nut {
  position: relative; z-index: 6; display: flex; align-items: center; justify-content: center; width: calc(100% - 16px); max-width: 369px; height: 36px; margin: 0 auto -18px;
  border-radius: 60px; border: 2px solid #ffe58a;
  background: linear-gradient(180deg, #ffb544 0%, #ff7c14 48%, #ff5200 100%);
  box-shadow: 0 0 0 2px rgba(255, 128, 20, .55), 0 6px 16px rgba(150, 40, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: transform .2s, filter .2s;
}
.kmt-nut:hover { transform: translateY(-2px); filter: brightness(1.05); }
.kmt-nut span { font-size: 15px; line-height: 1; font-weight: 800; font-style: italic; text-transform: uppercase; color: #fff; letter-spacing: .03em; text-shadow: 0 2px 0 #c93a00; }
.kmt-nut.nho { max-width: 350px; }

/* ---------- viền vàng mờ hai bên (khung Flash Sale + khung Ưu đãi tuần) ---------- */
.kmt-vien { position: relative; padding: 2.5px; }
.kmt-vien::before { content: ""; position: absolute; inset: 0; border-radius: 22.5px; background: linear-gradient(270deg, #fff291 0%, rgba(255, 97, 7, 0) 49%, #fff291 100%); }
.kmt-hop { position: relative; border-radius: 20px; }

/* ---------- KHỐI 1: 4 icon ---------- */
.kmt-1 { padding: 56.67px 0 24px; }
.kmt-icon { display: flex; justify-content: center; gap: 10px; }
.kmt-icon li { flex: 0 1 85px; min-width: 0; }
.kmt-icon a { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; padding: 22px 6px 8px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(160, 50, 0, .18); }
.kmt-tron {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  border: 2px solid #fff; box-shadow: 0 3px 8px rgba(140, 40, 0, .3);
}
.kmt-tron svg { width: 58%; height: 58%; }
.kmt-tron-1 { background: radial-gradient(circle at 35% 30%, #ff8a5c, #f2361a 70%); }
.kmt-tron-2 { background: radial-gradient(circle at 35% 30%, #a9bcff, #5a63ee 70%); }
.kmt-tron-3 { background: radial-gradient(circle at 35% 30%, #ffd36a, #ff8a00 70%); }
.kmt-tron-4 { background: radial-gradient(circle at 35% 30%, #ffb3c2, #f2506f 70%); }
.kmt-nhan { display: block; text-align: center; font-size: 8.32px; line-height: 9.15px; font-weight: 800; color: #fe4f00; }

/* ---------- KHỐI 2: Flash Sale ---------- */
.kmt-2 { padding: 91.67px 0 32px; }
.kmt-fs-dau { display: flex; flex-direction: column; align-items: center; margin-bottom: 38.34px; }
.kmt-fs-chu { position: relative; display: flex; justify-content: center; }
.kmt-fs-ten { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; font-size: 52px; line-height: .95; font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.kmt-fs-ten span {
  color: #fff; background: linear-gradient(180deg, #fff 0%, #fff 46%, #e6e6ee 54%, #c4c4d2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px #ff6a00; filter: drop-shadow(0 4px 0 #cf3a00) drop-shadow(0 8px 12px rgba(140, 40, 0, .35));
}
.kmt-fs-ten span + span { margin-left: .5em; }
.kmt-set { position: absolute; z-index: 1; top: 50%; color: #ffe94a; filter: drop-shadow(0 0 8px rgba(255, 240, 120, .7)); }
.kmt-set svg { display: block; width: 100%; height: auto; fill: currentColor; }
.kmt-set.trai { right: calc(50% + 50px); width: 120px; transform: translateY(-40%); }
.kmt-set.phai { left: calc(50% + 62px); width: 100px; transform: translateY(-80%) scaleX(-1); }
.o-dem { display: flex; align-items: center; justify-content: center; }
.kmt-dem { margin-top: 25px; }
.kmt-dem .o { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--cam); display: grid; place-items: center; font-size: 16px; font-weight: 700; box-shadow: 0 3px 10px rgba(160, 50, 0, .25); }
.kmt-dem .hai-cham { margin: 0 6px; font-size: 14.56px; font-weight: 700; color: #fff; }
.kmt-fs-hop { background: #fff; padding: 40px 0 0 16px; }
.kmt-luoi-fs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 20px; }
.kmt-luoi-fs::-webkit-scrollbar { display: none; }
.kmt-o-fs { flex: 0 0 159.5px; scroll-snap-align: start; }
.kmt-o-fs .the-fs { padding: 0 8px; background: transparent; }

/* ---------- KHỐI 3: Ưu đãi hằng tuần ---------- */
.kmt-3 { padding-top: 64px; }
.kmt-tuan-hop { padding: 42px 0 0 16px; background: linear-gradient(180deg, #ff6814 0%, rgba(255, 104, 20, 0) 100%); }
.kmt-tde-noi { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(-3deg); white-space: nowrap; }
.kmt-luoi-tin { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 16px 30px 0; }
.kmt-luoi-tin::-webkit-scrollbar { display: none; }
.kmt-o-tin { flex: 0 0 262px; scroll-snap-align: start; }
.kmt-tuan-hop .tin-anh { border-radius: 12px; margin-bottom: 14px; }
.kmt-tuan-hop .tin-ngay { font-size: 11px; line-height: 20px; margin-bottom: 10px; color: #fff; }
.kmt-tuan-hop .tin-ngay .muc::before { background: #fff; }
.kmt-tuan-hop .tin-muc h3 { font-size: 16px; line-height: 20.16px; color: #fff; }
.kmt-tuan-hop .tin-muc:hover h3 { color: #fff4b8; }
.kmt-tuan-hop .tom-tat { color: #fff; }

/* ---------- KHỐI 4: Thu cũ đổi mới — bục trưng bày dựng bằng CSS + hình máy tự vẽ ---------- */
.kmt-4 { padding-top: 83.33px; }
.kmt-tc-anh, .kmt-buc { position: relative; display: block; margin-top: 10px; }
.kmt-tc-anh img { width: 100%; height: auto; }
.kmt-buc { aspect-ratio: 1197 / 499; }
.kmt-buc-de {
  position: absolute; left: 50%; bottom: 15%; width: 62%; height: 24%; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #ff7a1e 0%, #e2410c 100%);
  box-shadow: 0 10px 0 #b8300a, 0 22px 40px rgba(110, 25, 0, .45), 0 0 0 6px rgba(255, 196, 90, .55), 0 0 60px 10px rgba(255, 220, 120, .45);
}
.kmt-buc-de::before { content: ""; position: absolute; left: 4%; right: 4%; top: -18%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #ffd9a1 0%, #ffb35c 55%, #ff8d2e 100%); box-shadow: inset 0 -4px 10px rgba(200, 70, 0, .35); }
.kmt-buc-may { position: absolute; z-index: 2; left: 50%; bottom: 29%; width: 56%; height: 80%; transform: translateX(-50%); }
.kmt-buc-may img { position: absolute; bottom: 0; height: auto; filter: drop-shadow(0 8px 10px rgba(90, 20, 0, .35)); }
.kmt-buc-may .m1 { left: 0; width: 40%; z-index: 2; }
.kmt-buc-may .m2 { left: 14%; width: 44%; bottom: 4%; z-index: 3; }
.kmt-buc-may .m3 { left: 30%; width: 62%; bottom: 6%; z-index: 1; }
.kmt-buc-may .m4 { left: 47%; width: 26%; bottom: -6%; z-index: 4; }
.kmt-buc-may .m5 { left: 66%; width: 28%; bottom: -2%; z-index: 4; }
.kmt-buc-may .m6 { right: -8%; width: 40%; z-index: 2; }
.kmt-buc-nut { position: absolute; z-index: 5; left: 50%; bottom: 7%; width: 34%; min-width: 120px; max-width: none; height: 22px; margin: 0; transform: translateX(-50%); }
.kmt-buc-nut span { font-size: 9px; }
.kmt-buc:hover .kmt-buc-nut { filter: brightness(1.06); }

/* ---------- KHỐI 5: Khách hàng thân thiết — bảng HTML (gốc là 1 ảnh) ---------- */
.kmt-5 { padding-top: 64px; }
.kmt-bang-khung { display: block; margin-top: 24px; overflow-x: auto; border-radius: 16px; scrollbar-width: thin; }
.kmt-bang { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; border: 2px solid rgba(255, 255, 255, .9); border-radius: 16px; overflow: hidden; font-size: 11px; line-height: 1.35; color: #fff; text-align: center; }
.kmt-bang th, .kmt-bang td { padding: 10px 8px; border-right: 1px solid rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .55); vertical-align: middle; }
.kmt-bang tr > :last-child { border-right: 0; }
.kmt-bang tbody tr:last-child > * { border-bottom: 0; }
.kmt-bang thead th { background: #f39050; color: #fff; font-size: 13px; font-weight: 800; text-transform: uppercase; }
.kmt-bang thead th:first-child { background: #fbcf9f; color: #b2361a; }
.kmt-bang thead th:nth-child(3) { background: #ea7838; }
.kmt-bang thead th:nth-child(4) { background: #df6428; }
.kmt-bang thead th:nth-child(5) { background: #a9502b; }
.kmt-bang thead th:nth-child(n+6) { background: #8a3d1f; }
.kmt-bang tbody th { width: 23%; background: #fbcf9f; color: #b2361a; font-weight: 400; }
.kmt-bang tbody th b { display: block; font-size: 14px; font-weight: 800; text-transform: uppercase; }
.kmt-bang tbody th small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.35; color: #a24420; }
.kmt-bang td b { display: inline-block; font-size: 14px; font-weight: 800; text-transform: uppercase; margin: 2px 0; }
.kmt-bang td:nth-child(2) { background: #f39050; }
.kmt-bang td:nth-child(3) { background: #ea7838; }
.kmt-bang td:nth-child(4) { background: #df6428; }
.kmt-bang td:nth-child(5) { background: #a9502b; }
.kmt-bang td:nth-child(n+6) { background: #8a3d1f; }
.kmt-nd { margin-top: 30px; background: #fff; border-radius: 16px; padding: 20px 16px; }

/* =============================================================================
   TRANG FLASH SALE
   ============================================================================= */
.fsp-dau {
  position: relative; overflow: hidden; padding: 32px 0 48px; margin-top: -20px; /* gốc section.flash-sale-1 (điện thoại) */
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 30%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(180deg, #fef3f5 0%, #fcd8dd 40%, #fbc7cf 75%, #fbaead 100%);
}
.fsp-dau .vet-dan { position: absolute; top: 0; left: 0; right: 0; z-index: 5; background: transparent; }
.fsp-dau .vet-dan li, .fsp-dau .vet-dan a .ic { color: #fff; }
.fsp-dau .vet-dan li + li::before { color: #fff; }
.fsp-dau .vet-dan { padding-top: 20px; }
.fsp-tieude { position: relative; z-index: 3; display: flex; flex-direction: column-reverse; align-items: center; padding: 54px 0 44px; }
.fsp-tieude .fl-bien { margin-bottom: 24px; padding-bottom: 4px; }
.fsp-tieude .bien-sale { zoom: 1.18; } /* gốc: ảnh chữ cao 125px */
/* khung giờ — theo .flash-sale-times của gốc */
.fsp-gio { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 24px 10px; margin-bottom: 54.16px; }
.fsp-gio span { position: relative; width: calc(50% - 5px); padding: 3px 16.67px; border-radius: 58.33px; border: 6px solid #ffc100; background: #ffebe7; text-align: center; font-family: sans-serif; font-size: 29.85px; line-height: 37.61px; font-weight: 800; color: var(--cam); -webkit-text-stroke: 1px #fea120; box-shadow: 0 5px 0 #d22000, 0 8px .75px #fed2b8; transition: all .4s ease-in-out; }
.fsp-gio span.dang { background: #d32101; color: #fff; }
.fsp-than { padding: 43.33px 0 64px; background: linear-gradient(180deg, #ff9a41 0%, #fc4e08 100%); } /* gốc section.flash-sale-2 */
@media (max-width: 767px) { .fsp-than > .wrap { padding: 0; } }
.fsp-hop { background: #fff; border-radius: 16.67px; padding: 0; }
.fsp-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; padding-bottom: 16px; }
.fsp-o .the-fs { background: transparent; }
.fsp-them { display: flex; width: max-content; margin: 0 auto -17.5px; padding: 10px 30px; font-size: 12.5px; line-height: 12.5px; }
.fsp-them.dang-tai { opacity: .6; pointer-events: none; }
.fsp-hop .trong { padding: 30px 0 40px; text-align: center; }

@media (min-width: 768px) and (max-width: 1199px) {
  .kmt-icon li { flex-basis: 140px; }
  .kmt-nhan { font-size: 12px; line-height: 14px; }
  .fsp-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fsp-dau { margin-top: 0; }
}

/* ---------------- DESKTOP ≥1200 ---------------- */
@media (min-width: 1200px) {
  .kmt-trang { padding-bottom: 6.25rem; }
  .kmt-tde { font-size: 5.2rem; }
  .kmt-tde::before { -webkit-text-stroke-width: 1rem; text-shadow: 0 .45rem 0 #c42a10, 0 .8rem 1.4rem rgba(110, 20, 0, .35); }
  .kmt-mota { display: block; margin-top: 1.042rem; font-size: 1.563rem; line-height: 1.969rem; }
  .kmt-nut { width: 100%; max-width: 33.333rem; height: 4.2rem; margin-bottom: -2.1rem; border-width: .25rem; box-shadow: 0 0 0 .2rem rgba(255, 128, 20, .55), 0 .5rem 1.4rem rgba(150, 40, 0, .35), inset 0 .15rem 0 rgba(255, 255, 255, .45); }
  .kmt-nut span { font-size: 2rem; text-shadow: 0 .15rem 0 #c93a00; }
  .kmt-nut.nho { max-width: 27.778rem; }
  .kmt-vien { padding: .521rem; }
  .kmt-vien::before { border-radius: 4.167rem; }
  .kmt-hop { border-radius: 3.646rem; }

  .kmt-1 { padding: 3.542rem 0 0; }
  .kmt-icon { gap: 4.167rem; }
  .kmt-icon li { flex: 0 0 auto; }
  .kmt-icon a { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .kmt-tron { position: static; transform: none; width: 4.792rem; height: 4.792rem; border-width: .25rem; box-shadow: 0 .3rem .9rem rgba(140, 40, 0, .3); transition: transform .2s; }
  .kmt-icon a:hover .kmt-tron { transform: translateY(-.2rem); }
  .kmt-nhan { margin-top: .833rem; font-size: .885rem; line-height: 1.146rem; color: #fff; text-shadow: 0 1px 3px rgba(150, 40, 0, .35); }

  .kmt-2 { padding: 5.729rem 0 0; }
  .kmt-fs-dau { margin-bottom: 2.396rem; }
  .kmt-fs-ten { font-size: 7.9rem; }
  .kmt-fs-ten span { -webkit-text-stroke-width: .2rem; filter: drop-shadow(0 .35rem 0 #cf3a00) drop-shadow(0 .7rem 1rem rgba(140, 40, 0, .35)); }
  .kmt-set.trai { right: calc(50% + 7.5rem); width: 24.8rem; }
  .kmt-set.phai { left: calc(50% + 10rem); width: 21rem; }
  .kmt-dem { margin-top: 1.563rem; }
  .kmt-dem .o { width: 3.125rem; height: 3.125rem; font-size: 1.302rem; box-shadow: 0 .2rem .7rem rgba(160, 50, 0, .25); }
  .kmt-dem .hai-cham { margin: 0 .365rem; font-size: .91rem; }
  .kmt-fs-hop { padding: 3.646rem 4.375rem 0; }
  .kmt-luoi-fs { display: grid; grid-template-columns: repeat(5, 14.666rem); gap: 2.604rem 0; overflow: visible; padding: 0; margin-bottom: 1.042rem; }
  .kmt-o-fs .the-fs { padding: 0 1.563rem; }

  .kmt-3 { padding-top: 10.156rem; }
  .kmt-tuan-hop { padding: 5.208rem 2.917rem 0; }
  .kmt-luoi-tin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; overflow: visible; padding: 0; margin: 2.604rem 0 1.563rem; }
  .kmt-tuan-hop .tin-anh { border-radius: 1.042rem; margin-bottom: 1.563rem; }
  .kmt-tuan-hop .tin-ngay { font-size: .729rem; line-height: .938rem; margin-bottom: .625rem; }
  .kmt-tuan-hop .tin-muc h3 { font-size: 1.042rem; line-height: 1.302rem; }

  .kmt-4 { padding-top: 5.208rem; }
  .kmt-tc-anh, .kmt-buc { margin-top: .3rem; }
  .kmt-buc-nut { width: 22rem; height: 3.4rem; bottom: 6%; }
  .kmt-buc-nut span { font-size: 1.6rem; }

  .kmt-5 { padding-top: 8.021rem; }
  .kmt-bang-khung { max-width: 71rem; margin: 2.5rem auto 0; border-radius: 1.4rem; overflow: visible; }
  .kmt-bang { min-width: 0; border-width: .14rem; border-radius: 1.4rem; font-size: .833rem; box-shadow: 0 1rem 3rem rgba(120, 30, 0, .25); }
  .kmt-bang th, .kmt-bang td { padding: 1.4rem 1rem; }
  .kmt-bang thead th { padding: .9rem 1rem; font-size: 1.146rem; }
  .kmt-bang tbody th b { font-size: 1.302rem; }
  .kmt-bang tbody th small { margin-top: .4rem; font-size: .729rem; }
  .kmt-bang td b { font-size: 1.25rem; }
  .kmt-nd { margin-top: 3rem; border-radius: 1.4rem; padding: 2rem 2.4rem; }

  /* Flash Sale */
  .fsp-dau { padding: 4.167rem 0 6.25rem; }
  .fsp-dau { margin-top: 0; }
  .fsp-dau .vet-dan { padding-top: .781rem; }
  .fsp-tieude { display: block; padding: 3.125rem 6.042rem 4.531rem; margin: 0; }
  .fsp-tieude .fl-bien { position: absolute; right: 5rem; top: 1.46rem; margin: 0; padding: 0; }
  .fsp-tieude .bien-sale { zoom: 1; }
  .fsp-tieude .bien-sale { width: 20rem; height: 10.8rem; border-radius: 1.4rem; border-width: .25rem; }
  .fsp-tieude .bien-sale::before, .fsp-tieude .bien-sale::after { top: -1.9rem; width: .35rem; height: 2rem; }
  .fsp-tieude .bien-sale::before { left: 4rem; }
  .fsp-tieude .bien-sale::after { right: 4rem; }
  .fsp-tieude .bien-sale b { font-size: 5rem; }
  .fsp-gio { flex-wrap: nowrap; gap: 1.042rem; margin-bottom: 3.385rem; }
  .fsp-gio span { width: 100%; max-width: 25%; padding: .417rem 1.042rem; border-radius: 3.646rem; border-width: .625rem; font-size: 3.125rem; line-height: 3.938rem; font-weight: 900; -webkit-text-stroke: 2px #ffc100; box-shadow: 0 .521rem 0 #d22000, 0 .833rem .052rem #fed2b8; }
  .fsp-than { padding: 2.708rem 0 7.188rem; }
  .fsp-hop { border-radius: 1.042rem; padding: 3.021rem 4.896rem 0; }
  .fsp-luoi { grid-template-columns: repeat(5, 14.667rem); gap: 2.604rem 0; padding-bottom: 2.917rem; }
  .fsp-o .the-fs { padding: 0 1.563rem; }
  .fsp-them { margin-bottom: -1.243rem; padding: .781rem 1.563rem; font-size: .781rem; line-height: .781rem; }
  .fsp-hop .trong { padding: 3rem 0 4rem; font-size: 1rem; }
}