/* =============================================================================
   one.azpos.vn — giao diện cửa hàng điện thoại (bản HTML mẫu, tự viết)
   Bố cục và số đo dựng theo onewaymobile.vn, đo ngày 20/10/2026.

   CÁCH CO GIÃN (giống trang mẫu):
   - Dưới 1200px: giao diện điện thoại / máy tính bảng, đơn vị px.
   - Từ 1200px:   html{font-size:1vw} → 1rem = 1% bề ngang màn hình.
                  Mọi số đo desktop viết bằng rem, quy từ bản thiết kế 1920px
                  (vd 0.729rem = 14px ở 1920, = 10.5px ở 1440).
   ============================================================================= */

:root {
  --cam: #ff7337;          /* màu chính */
  --cam-dam: #fe4f00;
  --cam-nhat: #fff3ee;
  --do: #ff1100;
  --chu: #333;
  --chu-phu: #666;
  --xam: #f5f5f7;
  --vien: #e9ebed;
  --nut-cam: linear-gradient(89.58deg, #ff5001 0.36%, #ff901c 36%, #ff7e14 56.54%, #ff5001 99.64%);
  --hd-cam: linear-gradient(90deg, #fdc884 0%, #fe9c13 12.38%, #fe4f00 79.07%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Plus Jakarta Sans", Arial, sans-serif; color: #000; background: #fff; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button, input { font-family: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
.ic { width: 1em; height: 1em; display: inline-block; flex: none; }
.ic-stroke { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cat-dong-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-dong-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wrap { padding: 0 10px; }
.chi-desktop { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- nút chung ---------- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 2px solid var(--cam); outline-offset: 2px; }
.nut { display: inline-flex; align-items: center; justify-content: center; border-radius: 83px; font-weight: 500; white-space: nowrap; }
.nut-cam { background: var(--nut-cam); color: #fff; }
.nut-den { background: #000; color: #fff; border: 1px solid #000; }
.mui-ten {
  width: 33px; height: 33px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; cursor: pointer; color: #000;
  box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}
.mui-ten svg { width: 25px; height: 25px; }
.mui-ten.swiper-button-disabled { opacity: .45; cursor: default; }
.mui-ten.swiper-button-lock { display: none; }

/* =============================================================================
   HEADER
   ============================================================================= */
.hd { position: sticky; top: 0; z-index: 999; }
.hd-main { background: var(--hd-cam); padding: 12px 0; border-radius: 0 0 20px 20px; }
.hd-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.hd-logo { display: flex; align-items: center; gap: 6px; color: #fff; margin-right: 5px; height: 36px; }
.hd-logo .dau { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--cam-dam); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.hd-logo .chu { display: flex; flex-direction: column; line-height: 1; }
.hd-logo .chu b { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.hd-logo .chu small { font-size: 10px; font-weight: 600; margin-top: 2px; opacity: .95; }
.hd-loc { position: relative; min-width: 90px; background: rgba(255, 160, 30, .3); padding: 4px 6px; margin: 0 5px 0 10px; border-radius: 5px; cursor: pointer; color: #fff; }
.hd-loc .nhan { display: block; font-size: 8.8px; line-height: 11.09px; font-weight: 600; margin-bottom: 4px; }
.hd-loc .chon { position: relative; font-size: 10px; line-height: 13.3px; font-weight: 800; padding-right: 18px; }
.hd-loc .chon svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; }
/* danh sách tỉnh: như .change-location .select-options của gốc (sát dưới chữ tỉnh, rộng bằng ô) */
.hd-loc ul { display: none; position: absolute; top: 100%; left: 0; width: 100%; min-width: 100px; background: #fff; border-radius: 8.34px; box-shadow: 0 0 10px #dedede; padding: 3.33px 8.34px; z-index: 40; }
.hd-loc.mo ul { display: block; }
.hd-loc li { padding: 3.33px; font-size: 11.66px; line-height: 16.67px; font-weight: 400; color: #000; white-space: nowrap; transition: .4s ease-in-out; }
.hd-loc li:hover, .hd-loc li.chon-roi { color: var(--cam); }
@media (max-width: 380px) { .hd-loc .chon { font-size: 8px; } }
.hd-search { width: 100%; display: flex; align-items: center; background: #fff; border-radius: 83px; padding: 5px 8px 5px 21px; margin-top: 10px; }
.hd-search input { flex: 1; min-width: 0; height: 24px; border: 0; outline: 0; font-size: 11.66px; line-height: 24px; color: #2e3543; padding: 1px 2px; background: transparent; }
.hd-search button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #2e3543; }
.hd-search button svg { width: 20px; height: 20px; }
.hd-search { position: relative; }
/* hộp gợi ý khi gõ — số đo theo gốc (ul.product-suggestion: .7rem, li .3rem 1rem, ảnh 3.5rem; điện thoại html 16px) */
.goi-y { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin-top: 1px; max-height: 320px; overflow: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #f0876c; font-size: 11.2px; line-height: normal; text-align: left; }
.goi-y[hidden] { display: none; }
.gy-nhom, .gy-sp { padding: 4.8px 16px; }
.gy-nhom { background: #e2e2e2; color: rgba(255, 99, 39, .79); font-weight: 700; }
.gy-sp { display: flex; align-items: center; overflow: hidden; color: #000; }
.gy-sp:hover, .gy-sp.dang-chon { background: rgba(255, 188, 109, .36); }
.gy-sp img { flex: none; width: 56px; height: auto; margin-right: 8px; }
.gy-sp .ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gy-sp mark { background: none; color: #ff5023; font-weight: 700; }
.gy-sp .gia { display: inline-block; padding-top: 6.4px; color: #ff5023; font-weight: 700; }
.gy-trong { padding: 16px 0; text-align: center; }
.hd-items { display: none; }
.hd-nav { display: none; }

/* ---------- mega menu (nút ☰ desktop) ---------- */
.mega { display: none; }

/* ---------- menu danh mục mobile (thanh đáy → Danh mục) ---------- */
.mcat { position: fixed; inset: 0; z-index: 1001; background: #fff; display: flex; padding-bottom: 80px; transform: translateX(-100%); transition: transform .3s ease; }
.mcat.mo { transform: none; }
.mcat-trai { width: 170px; flex: none; padding: 20px 10px; overflow-y: auto; border-right: 1px solid #f0f0f2; }
.mcat-trai li a { display: flex; align-items: center; gap: 5px; margin-bottom: 25px; font-size: 12px; line-height: 13.86px; font-weight: 500; color: var(--chu); }
.mcat-trai li a .ic { width: 24px; height: 24px; color: var(--cam); }
.mcat-trai li.dang-xem a { color: var(--cam); font-weight: 700; }
.mcat-phai { flex: 1; overflow-y: auto; padding: 20px 20px 20px 24px; }
.mcat-nhom { display: none; }
.mcat-nhom.dang-xem { display: block; }
.mcat-nhom .xem-tat { display: block; font-size: 12px; font-weight: 600; color: var(--cam); margin-bottom: 12px; }
.mcat-nhom .cot { margin-bottom: 30px; }
.mcat-nhom .cot > a { display: block; font-size: 12px; font-weight: 600; color: var(--cam); margin-bottom: 12px; }
.mcat-nhom .cot li a { display: block; font-size: 12px; line-height: 15px; color: var(--chu); padding: 6px 0; }
.mcat-dong { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: var(--xam); display: grid; place-items: center; }

/* =============================================================================
   KHỐI 1 — SLIDER ĐẦU TRANG
   ============================================================================= */
.s-hero { position: relative; }
.s-hero .swiper-slide img { width: 100%; height: auto; aspect-ratio: 780 / 640; object-fit: cover; }
/* cột chứa băng chuyền phải được co: không có min-width:0 thì Swiper đẩy cột rộng theo nội dung */
.km-trai, .km-phai, .nb-trai, .nb-phai, .fl-hop, .rv-muc { min-width: 0; }
.s-hero .mui-ten { display: none; }
.cham { position: absolute; left: 0; right: 0; bottom: 20px !important; display: flex; justify-content: center; align-items: center; z-index: 5; }
.cham .swiper-pagination-bullet {
  width: 14px; height: 14px; margin: 0 1.5px !important; border-radius: 50%; border: 1px solid transparent; background: none; opacity: 1;
  position: relative;
}
.cham .swiper-pagination-bullet::after { content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--cam); }
.cham .swiper-pagination-bullet-active { border-color: var(--cam); }

/* =============================================================================
   KHỐI 2 — BANNER SỰ KIỆN + HỘP KHUYẾN MÃI
   ============================================================================= */
.s-km { position: relative; z-index: 3; padding: 20px 0 30px; background: #fff; }
.km-row { display: flex; flex-wrap: wrap; margin-bottom: 13.33px; } /* gốc: hàng ảnh phụ trống bên dưới vẫn có margin-top .833rem */
.km-trai { width: 100%; margin-bottom: 10px; }
.km-trai .swiper { border-radius: 8.34px; }
.km-trai .swiper-slide img { width: 100%; height: auto; aspect-ratio: 1600 / 758; object-fit: cover; }
.km-trai .km-swiper-vo { position: relative; }
.km-trai .mui-ten { opacity: 0; transition: opacity .2s; }
.km-trai:hover .mui-ten { opacity: 1; }
.km-trai .mui-ten.truoc { left: 8px; }
.km-trai .mui-ten.sau { right: 8px; }
.km-phai { width: 100%; }
.km-hop { position: relative; overflow: hidden; border-radius: 8.34px; padding: 10px 12px; background: linear-gradient(24.16deg, #ff5001 56.46%, #fec57c 98.85%); }
.km-hop .trang-tri { position: absolute; right: -10px; top: -14px; width: 120px; opacity: .9; pointer-events: none; }
.km-tieude { position: relative; z-index: 2; margin-bottom: 10px; }
.km-tieude h2 { font-size: 15px; line-height: 17.8px; font-weight: 800; color: #fff; }
.km-tieude p { display: none; }
.km-ds { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; max-height: 236.67px; overflow: auto; } /* gốc: .promotions-post max-height 14.792rem */
.km-muc { position: relative; display: flex; align-items: center; background: #fff; padding: 4px; border-radius: 4px; }
.km-muc .anh { width: 50px; height: 50px; flex: none; border-radius: 4px; overflow: hidden; margin-right: 15px; }
.km-muc .anh img { width: 100%; height: 100%; object-fit: cover; }
.km-muc .ngay { font-size: 10px; line-height: 14.7px; color: var(--cam); margin-bottom: 5px; }
.km-muc h3 { font-size: 10px; line-height: 12.7px; font-weight: 600; color: var(--chu); text-transform: uppercase; }
.km-nhan { position: relative; z-index: 2; display: inline-block; margin-top: 10px; font-size: 13.33px; line-height: 16.8px; font-weight: 700; color: #fff; text-decoration: underline; }

/* =============================================================================
   KHỐI 3 — FLASH SALE
   ============================================================================= */
.s-flash {
  position: relative; overflow: hidden; padding: 40px 0 0;
  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%);
}
.s-flash::before, .s-flash::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.s-flash::before { width: 220px; height: 220px; left: -60px; top: 40%; background: radial-gradient(circle, rgba(255, 255, 255, .7), transparent 65%); }
.s-flash::after { width: 300px; height: 300px; right: -90px; top: 8%; background: radial-gradient(circle, rgba(255, 200, 210, .9), transparent 65%); }
.fl-tieude { position: relative; z-index: 3; display: flex; flex-direction: column-reverse; align-items: center; margin-bottom: 43px; }
.fl-dem { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.fl-dem .chu { width: 100%; text-align: center; font-size: 20px; line-height: 25.2px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.fl-dem .o { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--cam); display: flex; align-items: center; justify-content: center; font-size: 25px; line-height: 31.5px; font-weight: 700; }
.fl-dem .hai-cham { display: block; color: #fff; font-weight: 700; font-size: 14.56px; line-height: 18.35px; margin: 0 6px; }
.fl-bien { margin-bottom: 18px; padding-bottom: 5px; animation: lac 2.4s ease-in-out infinite; } /* gốc: ảnh nội dòng trong h2 → cao thêm 5px */
@keyframes lac { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.bien-sale {
  position: relative; width: 184px; height: 100px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(180deg, #fff8e1 0%, #ffe3a3 45%, #f2b950 100%);
  box-shadow: 0 6px 0 #c98a2a, 0 12px 24px rgba(180, 90, 40, .35), inset 0 2px 0 #fffdf3;
  border: 3px solid #fff2c9;
}
.bien-sale::before, .bien-sale::after { content: ""; position: absolute; top: -22px; width: 4px; height: 24px; background: #c98a2a; border-radius: 2px; }
.bien-sale::before { left: 40px; }
.bien-sale::after { right: 40px; }
.bien-sale b { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: .02em; color: #e0142e; text-shadow: 0 3px 0 #fff, 0 5px 8px rgba(160, 20, 40, .35); }
.fl-hop { position: relative; z-index: 5; background: #fff; border-radius: 25px; padding: 30px 0 30px 16px; margin-bottom: 57px; }
.fl-hop .swiper { padding-right: 20px; } /* gốc: thẻ 167px ở khung 390 */
.fl-hop .mui-ten.truoc { left: 0; }
.fl-hop .mui-ten.sau { right: 0; }
@media (max-width: 767px) { .s-flash > .wrap { padding: 0; } .fl-hop .swiper { padding-right: 40px; } } /* gốc: .homepage-3 .container-large padding 0, .home-swiper-2 pr 40px */
.fl-xemthem { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); z-index: 6; min-width: 108.33px; padding: 8.34px 30px; font-size: 12.5px; line-height: 12.5px; }
.fl-khauhieu { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; min-height: 68px; text-align: center; padding: 0 30px; margin-bottom: 74px; } /* gốc: ảnh chữ 68px + 20px + khung xoay trống 54px */
.fl-khauhieu .dong-1 { font-size: 30px; line-height: 1; font-weight: 800; color: #fff; letter-spacing: .03em; -webkit-text-stroke: 1.5px #e64a6e; text-shadow: 0 3px 0 #e64a6e, 0 6px 14px rgba(200, 40, 80, .3); }
.fl-khauhieu .dong-2 { margin-top: 6px; font-size: 19px; line-height: 1.1; font-weight: 800; font-style: italic; color: #fff; -webkit-text-stroke: 1px #d41f55; text-shadow: 0 3px 0 #d41f55, 0 6px 14px rgba(200, 40, 80, .3); }

/* thẻ flash sale */
.the-fs { position: relative; background: #fff; padding: 13.33px 8px; height: 100%; }
.the-fs .giam { top: 0; left: 1px; }
.the-fs .khung {
  display: block; position: relative; padding: 25px 8.34px 13.33px; border-radius: 10px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, #ffb3c1, #ff7a9a 45%, #ffd0a8) border-box;
  border: 2px solid transparent;
}
.the-fs .khung::before { content: "✿"; position: absolute; top: 2px; left: 6px; font-size: 12px; color: #ff8fa8; }
.the-fs .khung::after { content: "✿"; position: absolute; bottom: 2px; right: 6px; font-size: 12px; color: #ffb27a; }
.the-fs .khung img { width: 100%; height: 112px; object-fit: contain; }
.the-fs h3 { margin: 13.33px 0 10px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--chu); }
.the-fs .gia { justify-content: center; }
.the-fs .nut-deal {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; height: 34px; border-radius: 0 83px 83px 0;
  background: linear-gradient(90deg, #ffd4cf 0%, #ff8e8e 30%, #f0506e 100%); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em;
}
.the-fs .nut-deal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, #ffe7c2, #ffd4cf); }

/* =============================================================================
   THẺ SẢN PHẨM (dùng chung)
   ============================================================================= */
.the-sp { position: relative; background: #fff; padding: 10px; border-radius: 12.5px 10px 10px; box-shadow: 0 0 10px rgba(0, 0, 0, .05); height: 100%; }
.giam {
  position: absolute; top: 0; left: 0; z-index: 3; color: #fff; background: var(--cam); font-size: 11.66px; line-height: 13.33px; font-weight: 800;
  padding: 5.84px 11.66px; border-radius: 12.5px 41.66px 41.66px 0;
}
.tim { position: absolute; top: 10px; right: 10px; z-index: 20; width: 19px; height: 18px; color: #a0a0a0; cursor: pointer; }
.tim svg { width: 19px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.tim.da-thich { color: var(--cam); }
.tim.da-thich svg { fill: var(--cam); }
.the-sp .anh { position: relative; display: block; }
.the-sp .anh img { width: 100%; aspect-ratio: 160 / 184; object-fit: contain; }
.the-sp .anh.co-khung::after {
  content: "TRẢ GÓP 0% LÃI SUẤT"; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 8px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #ff5001, #ff901c); padding: 2px 8px; border-radius: 20px;
}
.the-sp .anh.co-khung { border: 2px solid #ffb7a0; border-radius: 10px; background: #fffaf7; }
.the-sp h3 { height: 32px; margin: 13.33px 0 10px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--chu); } /* gốc: điện thoại cố định 2 dòng */
.bien-the { display: flex; flex-wrap: wrap; align-items: center; gap: 4.16px; margin-bottom: 10px; }
.bien-the a { display: block; font-size: 9px; line-height: 8.34px; font-weight: 500; color: var(--chu); padding: 4.16px 8.34px; border-radius: 8.34px; border: 1px solid var(--vien); }
.bien-the a.dang-chon { background: var(--cam); border-color: var(--cam); color: #fff; }
.gia { display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; }
.gia b { font-size: 17.35px; line-height: 12.15px; font-weight: 800; color: var(--cam); }
.gia del { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--chu-phu); margin-top: 5px; }
.the-fs .gia { flex-direction: row; flex-wrap: nowrap; align-items: baseline; justify-content: center; gap: 5px; }
.the-fs .gia b { font-size: 12.71px; line-height: 10.26px; }
.the-fs .gia del { font-size: 10px; line-height: 9px; margin: 0; }
.tinh-trang { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 15px; margin-top: 16.67px; }
.sao { display: flex; align-items: center; font-size: 11.66px; line-height: 15px; color: var(--chu); }
.sao svg { width: 18px; height: 19px; }
.nhan-moi { font-size: 10px; line-height: 16.67px; font-weight: 500; color: #fff; background: var(--do); padding: 1.5px 6.67px; border-radius: 41.66px; }
.uu-dai { margin-top: 12.5px; font-size: 10px; line-height: 15px; color: #000; background: #f2f4f6; border: 1px solid var(--vien); border-radius: 8.34px; padding: 8.34px 5px; }
.uu-dai b { font-weight: 600; }
.uu-dai span { display: block; }

/* =============================================================================
   KHỐI 4 — 3 NHÓM SẢN PHẨM
   ============================================================================= */
.s-nhom { background: var(--xam); }
.s-nhom > .wrap { padding: 0; }   /* lề đã nằm ở .nhom, tránh cộng đôi trên mobile */
.nhom { position: relative; padding: 0 10px; }
.nhom::before {
  content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 861px;
  background: linear-gradient(180deg, #2a2526 0%, #6b6969 22%, #9a9a9a 50%, #d6d6d8 78%, #f5f5f7 100%);
}
.nhom > * { position: relative; z-index: 5; }
.nhom-tieude { display: flex; align-items: center; padding: 40px 0; }
.nhom-dai {
  position: relative; width: 100%; height: 53px; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .22) 18%, rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, .7) 62%, rgba(255, 255, 255, .25) 82%, rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
}
.so-mot {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%) skewX(-10deg); width: 36px; height: 46px; border-radius: 6px;
  background: linear-gradient(160deg, #fff 0%, #d9d9d9 60%, #8f8f8f 100%); display: grid; place-items: center;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .35);
}
.so-mot b { transform: skewX(10deg); font-size: 34px; line-height: 1; font-weight: 800; font-style: italic; color: #2a2526; }
.nhom-chu { padding: 10px 0 6px 50px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .3); }
.nhom-chu .dong-1 { font-size: 11.32px; line-height: 14.26px; font-weight: 400; letter-spacing: -.02em; }
.nhom-chu .dong-2 { font-size: 18.19px; line-height: 22.92px; font-weight: 800; font-style: italic; }
.nhom-anh { position: absolute; right: 0; top: 8px; width: 170px; height: 125px; z-index: 6; }
.nhom-anh img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.nhom-noibat { margin-bottom: 41.66px; }
.nb-row { display: flex; flex-direction: column; }
.nb-trai { position: relative; border-radius: 16.67px; } /* gốc: điện thoại nền trong suốt, không đệm */
.nb-trai h2 { display: none; }
.nb-trai .mui-ten.truoc { left: 0; }
.nb-trai .mui-ten.sau { right: 0; }
.nb-phai { position: relative; margin-top: 32px; }
.nb-phai .swiper { border-radius: 16.67px; }
.nb-phai img { width: 100%; height: auto; object-fit: cover; } /* gốc: điện thoại theo tỉ lệ thật của ảnh (550×555) */
.nb-phai .mui-ten { opacity: 0; transition: opacity .2s; }
.nb-phai:hover .mui-ten { opacity: 1; }
.nb-phai .mui-ten.truoc { left: 10px; }
.nb-phai .mui-ten.sau { right: 10px; }
.nhom-dm { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.dm-chip { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; } /* gốc: .terms mb 20px + gap 1.25rem */
.dm-chip > span { font-size: 12.5px; line-height: 15px; font-weight: 700; color: var(--chu); margin-bottom: 10px; }
.dm-chip ul { display: flex; gap: 10px; padding-bottom: 10px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.dm-chip ul::-webkit-scrollbar { display: none; }
.dm-chip a { display: block; white-space: nowrap; font-size: 13.33px; line-height: 13.33px; color: #333; padding: 8.34px 16.67px; border-radius: 41.66px; border: 1px solid #999; transition: all .4s; }
.dm-tieude { display: flex; align-items: center; }
.dm-tieude h2 { font-size: 25px; line-height: 28px; font-weight: 700; color: var(--chu); text-transform: uppercase; }
.dm-tieude .nut { display: none; }
.nhom-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.nhom-ds > .the-sp:nth-child(n+5) { display: none; }
.nhom-xemtat { display: flex; width: max-content; margin: 0 auto 40px; padding: 10px 30px; font-size: 12.5px; line-height: 12.5px; }
.nhom-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: calc(70% + 5px) 30%; height: 65vw; gap: 10px; margin-bottom: 72px; } /* gốc .home-product-banner (điện thoại) */
.nhom-bento .o-1 { aspect-ratio: 1; }
.nhom-bento .o-2 { height: max-content; }
.nhom-bento .o-2 img { height: auto; }
.nhom-bento .o { position: relative; border-radius: 10px; overflow: hidden; }
.nhom-bento .o img { width: 100%; height: 100%; object-fit: cover; }
/* Swiper đặt margin:auto cho .swiper → trong ô lưới nó co theo nội dung và bề ngang tính vòng ra vô cực; phải ép width:100% */
.nhom-bento .o-xoay { grid-column: 2; grid-row: 1 / 3; width: 100%; margin: 0; min-width: 0; }
.nhom-bento .o-xoay .swiper-slide { height: 100%; }
.nhom-bento .o-xoay .cham { bottom: 10px !important; }

/* =============================================================================
   KHỐI 5 — REVIEW
   ============================================================================= */
.s-review { background: #fff; padding: 32px 0 41.66px; }
.rv-tieude { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tieude-muc { font-size: 25px; line-height: 30px; font-weight: 700; color: #000; }
.rv-mxh { display: flex; align-items: center; gap: 8px; min-height: 39px; }
.rv-mxh a { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.rv-mxh a svg { width: 55%; height: 55%; }
.rv-mxh .yt { background: #ff0000; }
.rv-mxh .tt { background: #000; }
.rv-ds { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-muc { background: var(--xam); border-radius: 8.34px; overflow: hidden; width: calc(50% - 5px); }
.rv-muc:first-child { width: 100%; }
.rv-video { position: relative; display: block; height: 320px; }
.rv-video img { width: 100%; height: 100%; object-fit: cover; border-radius: 8.34px; }
.rv-video .phat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; backdrop-filter: blur(4px); }
.rv-video .phat svg { width: 22px; height: 22px; margin-left: 3px; }
.rv-sp { display: flex; align-items: center; padding: 12px; }
.rv-muc:first-child .rv-sp { padding: 16px 12px 10px; }
.rv-sp .anh { width: 50px; height: 50px; flex: none; background: #fff; border-radius: 4.16px; margin-right: 16.67px; overflow: hidden; }
.rv-sp .anh img { width: 100%; height: 100%; object-fit: contain; }
.rv-sp .tt { flex: 1; min-width: 0; }
.rv-sp h3 { font-size: 10px; line-height: 12.13px; font-weight: 700; color: var(--chu); margin-bottom: 4px; }
.rv-sp .gia-rv { font-size: 10px; line-height: 10px; font-weight: 800; color: var(--cam); }
.rv-sp .nut { display: none; }
.rv-muc:first-child .rv-sp .nut { display: inline-flex; min-width: 136px; padding: 10px 20px; font-size: 12px; line-height: 14px; font-weight: 500; margin-left: 24px; }

/* =============================================================================
   KHỐI 6 — TIN TỨC
   ============================================================================= */
.s-tin { background: #fff; padding: 35px 0 50px; overflow: hidden; }
.tin-tieude { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 41.66px; }
.tin-tieude .tieude-muc { margin-bottom: 20px; }
.tin-dk { display: flex; align-items: center; }
.tin-chip { font-size: 11.66px; line-height: 15.84px; font-weight: 500; color: var(--chu); padding: 5.84px 15px; border-radius: 41.66px; border: 1px solid #c9c9c9; margin-right: 8.34px; }
.tin-dk .nut-den { padding: 8.34px 25px; font-size: 11.66px; line-height: 11.66px; margin-right: 23.33px; }
.mui-tron { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cam); color: var(--cam); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mui-tron + .mui-tron { margin-left: 8.34px; }
.mui-tron svg { width: 16px; height: 16px; }
.s-tin .swiper { overflow: visible; padding-right: 64px; }
.tin-anh { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.tin-anh img { width: 100%; height: auto; aspect-ratio: 338 / 204; object-fit: cover; transition: transform .4s; }
.tin-muc:hover .tin-anh img { transform: scale(1.04); }
.tin-ngay { display: flex; align-items: center; margin-bottom: 10px; font-size: 11.66px; line-height: 15px; font-weight: 500; color: var(--cam); }
.tin-ngay .muc { position: relative; padding-left: 10px; margin-left: 10px; }
.tin-ngay .muc::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--cam); }
.tin-muc h3 { font-size: 16px; line-height: 20.16px; font-weight: 600; color: var(--chu); margin-bottom: 10px; transition: color .2s; }
@media (max-width: 767px) { .tin-muc h3.cat-dong-2 { -webkit-line-clamp: 3; } } /* gốc: .news-item h3 điện thoại 3 dòng */
.tin-muc:hover h3 { color: var(--cam); }
.tin-muc .tom-tat { font-size: 11.66px; line-height: 15px; color: var(--chu); }

/* =============================================================================
   FOOTER
   ============================================================================= */
.ft { background: var(--xam); }
.ft-tren { padding: 50px 10px 38.34px; }
.ft-cot-ds { display: flex; flex-wrap: wrap; }
.ft-cot { width: 50%; padding-right: 10px; }
.ft-cot.rong { margin-top: 20px; } /* gốc: .col-3 (Hỗ trợ KH, Tổng đài) xuống hàng ≤991px; cột "Sản phẩm" ẩn trên điện thoại */
.ft-cot.cot-sp { display: none; }
.ft-cot .tieu-de { font-size: 13.33px; line-height: 29.17px; font-weight: 600; color: #000; margin-bottom: 10px; }
.ft-cot li a { display: block; font-size: 11.66px; line-height: 15px; color: var(--chu); margin-bottom: 8.34px; }
.ft-cot li a:hover { color: var(--cam); }
.ft-cot li b { font-weight: 700; }
.ft-giua { padding: 25px 10px; border-top: 1px solid #e3e3e6; }
.ft-giua-row { display: flex; flex-wrap: wrap; }
.ft-dangky { width: 100%; display: flex; flex-direction: column; margin-bottom: 42px; }
.ft-dangky .nhan, .ft-ketnoi .nhan { font-size: 17px; line-height: 20px; font-weight: 600; color: #000; }
.ft-dangky .nhan { margin-bottom: 18px; }
.ft-dangky form { display: flex; align-items: center; background: #fff; border-radius: 83px; padding: 7px 3.33px 7px 21.66px; }
.ft-dangky input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 12px; line-height: 24px; }
.ft-dangky button { width: 35px; height: 35px; border-radius: 50%; background: var(--nut-cam); color: #fff; display: grid; place-items: center; }
.ft-dangky button svg { width: 18px; height: 18px; }
.ft-ketnoi { width: 100%; display: flex; align-items: center; }
.ft-ketnoi .nhan { margin-right: auto; }
.ft-ketnoi a { width: 40px; height: 40px; border-radius: 50%; background: var(--chu); color: #fff; display: grid; place-items: center; margin-left: 12.5px; }
.ft-ketnoi a svg { width: 18px; height: 18px; }
.ft-duoi { padding: 21.66px 10px 110px; border-top: 1px solid #e3e3e6; }
.ft-duoi-row { display: flex; flex-wrap: wrap; align-items: center; }
.ft-cty { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
.ft-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.ft-logo .dau { width: 40px; height: 40px; border-radius: 50%; background: var(--nut-cam); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; }
.ft-logo .chu { font-weight: 800; font-size: 14px; line-height: 1.1; color: var(--chu); }
.ft-logo .chu small { display: block; font-weight: 600; font-size: 10px; color: var(--chu-phu); }
.ft-chu { flex: 1; min-width: 0; padding-left: 10px; font-size: 10px; line-height: 16.67px; color: var(--chu); margin-bottom: 32px; }
.ft-chungnhan { width: 100%; display: flex; align-items: center; gap: 18.34px; }
.ft-chungnhan span { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; color: #fff; background: #3c3c3c; border-radius: 3px; padding: 4px 6px; }
.ft-tt { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ft-tt .nhan { font-size: 14px; line-height: 35px; color: #000; margin-right: 20px; }
.the-tt { display: inline-flex; align-items: center; justify-content: center; height: 22px; min-width: 38px; padding: 0 6px; border-radius: 4px; background: #fff; border: 1px solid #e2e2e6; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.the-tt.visa { color: #1a1f71; font-style: italic; }
.the-tt.mc { color: #eb001b; }
.the-tt.jcb { color: #0b7a3e; }
.the-tt.atm { color: #444; }

/* =============================================================================
   THÀNH PHẦN NỔI
   ============================================================================= */
.menu-nhanh { display: none; }
.nut-zalo { position: fixed; right: 52px; bottom: 52px; z-index: 990; width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0, 104, 255, .25); }
.nut-zalo span { width: 50px; height: 50px; border-radius: 50%; border: 3px solid #0068ff; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0068ff; }
/* nút lên đầu trang — theo .back-to-top của gốc */
.nut-len { position: fixed; right: 16px; bottom: 96px; z-index: 99; width: 36px; height: 36px; border-radius: 50%; background: var(--cam); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(66.67px); transition: all .4s ease-in-out; }
.nut-len.hien { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nut-len svg { width: 24px; height: 24px; }
/* thanh đáy điện thoại — theo .mobile-fixed-navigation của gốc (bóng mờ dần phía trên thay cho box-shadow) */
.thanh-day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; }
.thanh-day::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; height: calc(100% + 20px); background: linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .192238) 43.7%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.thanh-day ul { position: relative; z-index: 3; display: flex; justify-content: space-between; background: #fff; padding: 20px 10px; border-radius: 16.67px 16.67px 0 0; }
.thanh-day li { flex: 1; text-align: center; }
.thanh-day a { display: flex; flex-direction: column; align-items: center; font-size: 10px; line-height: 13.33px; font-weight: 600; color: #999; transition: all .4s ease-in-out; }
.thanh-day a svg { width: 28px; height: 28px; }
.thanh-day a span { display: block; margin-top: 2px; }
.thanh-day li.dang-xem a { color: var(--cam); }
.phu-mo { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.phu-mo.hien { opacity: 1; pointer-events: auto; }

/* =============================================================================
   MÁY TÍNH BẢNG 768–1199px
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1199px) {
  .wrap { padding: 0 24px; }
  .hd-search { width: auto; flex: 1; margin: 0 0 0 12px; }
  .hd-row { flex-wrap: nowrap; }
  .km-trai { width: 64%; margin-bottom: 0; padding-right: 6px; }
  .km-phai { width: 36%; padding-left: 6px; }
  .km-hop { height: 100%; }
  .km-ds { grid-template-columns: 1fr; }
  .nhom { padding: 0 24px; }
  .s-nhom > .wrap { padding: 0; }
  .nhom-ds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nb-row { flex-direction: row; }
  .nb-trai { width: 60%; background: #fff; padding: 29.17px 15px 11.67px; }
  .nb-phai { width: 40%; margin: 0 0 0 16px; }
  .nhom-bento { grid-template-columns: 2.3fr 1fr 1fr 1.2fr; grid-template-rows: 150px 250px; }
  .nhom-bento { height: auto; }
  .nhom-bento .o-1 { aspect-ratio: auto; }
  .nhom-bento .o-2 { height: auto; }
  .nhom-bento .o-2 img { height: 100%; }
  .nhom-bento .o-1 { grid-row: 1 / 3; grid-column: 1; }
  .nhom-bento .o-2 { grid-row: 1; grid-column: 2 / 4; }
  .nhom-bento .o-xoay, .nhom-bento .o-xoay .swiper-wrapper { display: contents; }
  .nhom-bento .o-xoay .cham { display: none; }
  .nhom-bento .o-3 { grid-row: 2; grid-column: 2; }
  .nhom-bento .o-4 { grid-row: 2; grid-column: 3; }
  .nhom-bento .o-5 { grid-row: 1 / 3; grid-column: 4; }
  .rv-muc { width: calc(25% - 7.5px); }
  .rv-muc:first-child { width: calc(50% - 5px); }
  .the-sp h3 { height: auto; font-size: 12.5px; line-height: 16.67px; }
  .tin-anh { border-radius: 16.67px; margin-bottom: 25px; }
  .tin-muc h3 { font-size: 16.67px; line-height: 20.83px; }
  .ft-cot { width: 33.333%; padding-right: 0; }
  .ft-cot.cot-sp { display: block; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .ft-cot { width: 16.667%; }
  .ft-cot.rong { width: 25%; margin-top: 0; }
}

/* =============================================================================
   DESKTOP ≥ 1200px — mọi số đo bằng rem (1rem = 1vw)
   ============================================================================= */
@media (min-width: 1200px) {
  html, body { font-size: 1vw; }
  .chi-mobile { display: none !important; }
  .chi-desktop { display: revert !important; }
  .wrap, .s-nhom > .wrap { padding: 0 8.125rem; }
  .mui-ten { width: 2.083rem; height: 2.083rem; box-shadow: 0 0 .694rem rgba(0, 0, 0, .08); }
  .mui-ten svg { width: 1.736rem; height: 1.736rem; }

  /* header */
  .hd-main { padding: .469rem 0; border-radius: 0; background: linear-gradient(90deg, #fdc884 0%, #fe9c13 8.66%, #fe4f00 19.51%); }
  .hd-row { flex-wrap: nowrap; justify-content: flex-start; }
  .hd-logo { width: 11.04rem; height: 2.85rem; margin-right: 1.302rem; gap: .55rem; }
  .hd-logo .dau { width: 2.6rem; height: 2.6rem; font-size: 1.45rem; }
  .hd-logo .chu b { font-size: 1.32rem; }
  .hd-logo .chu small { font-size: .78rem; margin-top: .15rem; }
  .hd-loc { min-width: 7.8125rem; padding: .417rem .833rem; margin: 0 1.042rem 0 0; border-radius: 1.042rem; }
  .hd-loc .nhan { display: inline; font-size: .729rem; line-height: .9375rem; font-weight: 500; margin: 0; } /* gốc: span nội dòng trong dòng 1rem → ô cao 44px */
  .hd-loc .chon { font-size: .729rem; line-height: .9375rem; padding-right: 1.25rem; }
  .hd-loc .chon svg { width: .833rem; height: .833rem; }
  .hd-loc ul { min-width: 0; padding: .208rem .521rem; border-radius: .521rem; }
  .hd-loc li { font-size: .729rem; line-height: 1.042rem; padding: .208rem; }
  .hd-search { flex: 1; width: auto; margin: 0 2.708rem 0 1.458rem; padding: .313rem .521rem .313rem 1.302rem; border-radius: 5.208rem; }
  .hd-search input { height: 1.979rem; font-size: .729rem; line-height: 1.979rem; }
  .hd-search button { width: 1.875rem; height: 1.944rem; }
  .hd-search button svg { width: 1.39rem; height: 1.39rem; }
  .goi-y { max-height: 20rem; font-size: .7rem; }
  .gy-nhom, .gy-sp { padding: .3rem 1rem; }
  .gy-sp img { width: 3.5rem; margin-right: .5rem; }
  .gy-sp .gia { padding-top: .4rem; }
  .gy-trong { padding: 1rem 0; }
  .hd-items { display: flex; align-items: center; }
  .hd-item { display: block; padding: .417rem .833rem; text-align: center; color: #fff; }
  .hd-item svg { width: 1.319rem; height: 1.319rem; display: block; margin: 0 auto; }
  .hd-item span { display: block; margin-top: .313rem; font-size: .729rem; line-height: .938rem; font-weight: 600; white-space: nowrap; }
  .hd-nav { display: block; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
  .hd-menu { position: relative; display: flex; justify-content: space-between; align-items: center; }
  .hd-menu > li > a { display: flex; align-items: center; gap: .26rem; padding: .833rem .625rem; font-size: .729rem; line-height: .938rem; font-weight: 500; color: var(--chu); transition: color .2s; }
  .hd-menu > li > a:hover { color: var(--cam); }
  .hd-menu > li > a .ic { width: 1.25rem; height: 1.25rem; }
  .hd-cat { padding: .365rem 0; }
  .hd-cat > .nut-ba-gach { width: 2.292rem; height: 2.292rem; border-radius: 50%; background: var(--cam-nhat); color: var(--cam); display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .hd-cat > .nut-ba-gach svg { width: 1.39rem; height: 1.39rem; }

  .mega { display: block; position: absolute; left: 0; top: 100%; padding-top: .972rem; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; }
  .hd-cat:hover .mega, .hd-cat.mo .mega { opacity: 1; visibility: visible; }
  .mega > ul { width: 14.1rem; background: #fff; padding: .521rem .833rem; border-radius: 0 0 .521rem .521rem; box-shadow: 0 .7rem 1.4rem rgba(0, 0, 0, .08); }
  .mega > ul > li > a { display: flex; align-items: center; gap: .45rem; padding: .521rem 0; font-size: .729rem; line-height: .919rem; font-weight: 500; color: var(--chu); }
  .mega > ul > li > a .ic { width: 1.1rem; height: 1.1rem; color: var(--cam); }
  .mega > ul > li > a .mui { margin-left: auto; width: .8rem; height: .8rem; color: #aaa; }
  .mega > ul > li:hover > a { color: var(--cam); }
  .mega-con {
    display: none; position: absolute; left: 14.1rem; top: .972rem; width: 68.54rem; min-height: 28.6rem; margin-left: .14rem; background: #fff;
    padding: 1.042rem 1.667rem 2.24rem; border-radius: 0 0 .521rem .521rem; z-index: 9; flex-wrap: wrap; align-content: flex-start;
    box-shadow: 0 .7rem 1.4rem rgba(0, 0, 0, .08);
  }
  .mega > ul > li:hover > .mega-con { display: flex; }
  .mega-con > li { width: 13.06rem; padding-right: .625rem; margin-bottom: 2.083rem; }
  .mega-con > li > a { font-size: .938rem; line-height: 1.181rem; font-weight: 700; color: var(--chu); }
  .mega-con > li > a:hover { color: var(--cam); }
  .mega-con ul { margin-top: .625rem; }
  .mega-con ul li + li { margin-top: .938rem; }
  .mega-con ul a { font-size: .729rem; line-height: .919rem; font-weight: 500; color: var(--chu-phu); }
  .mega-con ul a:hover { color: var(--cam); }
  .mcat, .thanh-day { display: none; }

  /* slider */
  .s-hero .swiper-slide img { aspect-ratio: 1920 / 700; }
  .s-hero .mui-ten { display: flex; }
  .s-hero .mui-ten.truoc { left: .972rem; }
  .s-hero .mui-ten.sau { right: .972rem; }
  .cham { bottom: 1.458rem !important; }
  .cham .swiper-pagination-bullet { width: .972rem; height: .972rem; margin: 0 .104rem !important; }
  .cham .swiper-pagination-bullet::after { width: .42rem; height: .42rem; }

  /* khuyến mãi */
  .s-km { padding: .833rem 0 3.958rem; }
  .km-row { flex-wrap: nowrap; margin-bottom: .833rem; }
  .km-trai { width: 58.2rem; flex: none; margin: 0; padding-right: .417rem; }
  .km-trai .swiper { border-radius: .521rem; }
  .km-trai .swiper-slide img { height: 27.57rem; aspect-ratio: auto; }
  .km-trai .mui-ten.truoc { left: -1.042rem; }
  .km-trai .mui-ten.sau { right: -1.042rem; }
  .km-trai .swiper { overflow: visible; clip-path: inset(0 round .521rem); }
  .s-km { overflow-x: clip; } /* slide nằm ngoài (overflow visible ở trên) làm trang rộng 2613px → chặn ở khối */
  .km-trai .km-swiper-vo { position: relative; }
  .km-phai { flex: 1; width: auto; padding-left: .417rem; }
  .km-hop { height: 27.57rem; padding: 2.188rem 1.458rem; border-radius: .521rem; }
  .km-hop .trang-tri { width: 10rem; right: -1rem; top: -1.2rem; }
  .km-tieude { margin-bottom: 0; }
  .km-tieude h2 { font-size: 1.563rem; line-height: 2.083rem; }
  .km-tieude p { display: block; font-size: .833rem; line-height: 1.042rem; font-weight: 500; color: #fff; margin-bottom: .833rem; }
  .km-ds { display: block; max-height: 14.79rem; overflow-y: auto; padding-right: .9rem; scrollbar-width: thin; scrollbar-color: #fff rgba(255, 255, 255, .3); }
  .km-ds::-webkit-scrollbar { width: .208rem; }
  .km-ds::-webkit-scrollbar-thumb { background: #fff; border-radius: 1rem; }
  .km-ds::-webkit-scrollbar-track { background: rgba(255, 255, 255, .3); border-radius: 1rem; }
  .km-muc { padding: .521rem; border-radius: 1.042rem; }
  .km-muc + .km-muc { margin-top: .833rem; }
  .km-muc .anh { width: 5.972rem; height: 5.972rem; border-radius: .521rem; margin-right: .938rem; }
  .km-muc .ngay { font-size: .729rem; line-height: .919rem; margin-bottom: .347rem; }
  .km-muc h3 { font-size: .729rem; line-height: 1.042rem; text-transform: none; }
  .km-nhan { margin-top: 1.406rem; font-size: .833rem; line-height: 1.05rem; }

  /* flash sale */
  .s-flash { padding: 6.51rem 0 2.604rem; }
  .s-flash::before { width: 18rem; height: 18rem; left: -4rem; top: 45%; }
  .s-flash::after { width: 26rem; height: 26rem; right: -6rem; top: 4%; }
  .fl-tieude { display: block; padding: 0 5.99rem; margin-bottom: 2.708rem; }
  .fl-dem { flex-wrap: nowrap; justify-content: flex-start; }
  .fl-dem .chu { width: auto; margin: 0 1.25rem 0 0; font-size: 1.302rem; line-height: 1.667rem; text-align: start; }
  .fl-dem .o { width: 3.125rem; height: 3.125rem; font-size: 1.302rem; line-height: 1.641rem; }
  .fl-dem .hai-cham { font-size: .91rem; line-height: 1.147rem; margin: 0 .365rem; }
  .fl-bien { position: absolute; right: 9.4rem; top: -.35rem; margin: 0; }
  .bien-sale { width: 13.68rem; height: 7.4rem; border-radius: 1rem; border-width: .2rem; }
  .bien-sale::before, .bien-sale::after { top: -1.5rem; width: .28rem; height: 1.6rem; }
  .bien-sale::before { left: 2.8rem; }
  .bien-sale::after { right: 2.8rem; }
  .bien-sale b { font-size: 3.4rem; }
  .fl-hop { padding: 2.396rem 5rem; margin-bottom: 3.542rem; border-radius: 1.563rem; }
  .fl-hop .swiper { padding-right: 0; }
  .fl-hop .mui-ten.truoc { left: -1.042rem; }
  .fl-hop .mui-ten.sau { right: -1.042rem; }
  .fl-xemthem { min-width: 6.771rem; padding: .521rem 1.563rem; font-size: .781rem; line-height: .781rem; }
  .fl-bien { padding: 0; }
  .fl-khauhieu { min-height: 9.583rem; margin: 0 0 2.083rem; padding: 0; } /* gốc: ảnh chữ 138px + 2.083rem */
  .fl-khauhieu .dong-1 { font-size: 4.05rem; -webkit-text-stroke-width: .16rem; text-shadow: 0 .3rem 0 #e64a6e, 0 .6rem 1.2rem rgba(200, 40, 80, .3); }
  .fl-khauhieu .dong-2 { margin-top: .2rem; font-size: 3.25rem; -webkit-text-stroke-width: .12rem; text-shadow: 0 .3rem 0 #d41f55, 0 .6rem 1.2rem rgba(200, 40, 80, .3); }
  .the-fs { padding: .833rem 1.563rem; }
  .the-fs .giam { left: .07rem; }
  .the-fs .khung { padding: 1.423rem .381rem .693rem; border-radius: .7rem; border-width: .14rem; } /* gốc: a đệm 22.5/7.5/12px, không viền → trừ viền khỏi đệm */
  .the-fs .khung img { height: 6.979rem; }
  .the-fs .khung::before, .the-fs .khung::after { font-size: .8rem; }
  .the-fs h3 { margin: .833rem 0 .625rem; font-size: .781rem; line-height: 1.042rem; }
  .the-fs .gia b { font-size: .833rem; line-height: .833rem; }
  .the-fs .gia { gap: 0; }
  .the-fs .gia del { font-size: .729rem; line-height: .729rem; margin-left: .833rem; }
  .the-fs .nut-deal { margin-top: 1.25rem; height: 2.604rem; font-size: .729rem; gap: .4rem; }
  .the-fs .nut-deal::before { width: 1.2rem; }

  /* thẻ sản phẩm */
  .the-sp { padding: .625rem; border-radius: .781rem .625rem .625rem; box-shadow: 0 0 .694rem rgba(0, 0, 0, .05); }
  .giam { font-size: .729rem; line-height: .833rem; padding: .365rem .729rem; border-radius: .781rem 2.604rem 2.604rem 0; }
  .tim { top: .625rem; right: .625rem; width: 1.319rem; height: 1.25rem; }
  .tim svg { width: 1.319rem; height: 1.25rem; }
  .the-sp .anh img { aspect-ratio: auto; height: 11.5rem; }
  .the-sp .anh.co-khung { border-width: .14rem; border-radius: .7rem; }
  .the-sp .anh.co-khung::after { font-size: .5rem; padding: .12rem .55rem; top: .15rem; }
  .the-sp h3 { height: auto; margin: .833rem 0 .625rem; font-size: .781rem; line-height: 1.042rem; }
  .bien-the { gap: .26rem; margin-bottom: .625rem; flex-wrap: nowrap; }
  .bien-the a { font-size: .625rem; line-height: .521rem; padding: .26rem .521rem; border-radius: .521rem; }
  .gia { flex-direction: row; align-items: baseline; flex-wrap: nowrap; }
  .gia b { font-size: .833rem; line-height: .833rem; }
  .gia del { font-size: .729rem; line-height: .729rem; margin: 0 0 0 .833rem; }
  .tinh-trang { gap: .313rem .938rem; margin-top: 1.042rem; }
  .sao { font-size: .729rem; line-height: .938rem; }
  .sao svg { width: 1.25rem; height: 1.32rem; }
  .nhan-moi { font-size: .625rem; line-height: 1.042rem; padding: .104rem .417rem; border-radius: 2.604rem; }
  .uu-dai { margin-top: .781rem; font-size: .625rem; line-height: .938rem; padding: .521rem .313rem; border-radius: .521rem; }

  /* nhóm sản phẩm */
  .nhom { padding: 0 4.167rem 5.208rem; }
  .nhom::before { height: 53.85rem; }
  .nhom-tieude { padding: 3.646rem 0 3.021rem; }
  .nhom-dai { width: 47.64rem; height: 7.01rem; }
  .so-mot { left: .8rem; width: 4.4rem; height: 5.6rem; border-radius: .6rem; box-shadow: .2rem .3rem 0 rgba(0, 0, 0, .35); }
  .so-mot b { font-size: 4.2rem; }
  .nhom-chu { padding: 1.406rem 0 .833rem 7.396rem; }
  .nhom-chu .dong-1 { font-size: 1.458rem; line-height: 1.823rem; letter-spacing: normal; }
  .nhom-chu .dong-2 { font-size: 2.344rem; line-height: 2.969rem; }
  .nhom-anh { width: 38.75rem; height: 21.8rem; top: -8.125rem; right: 0; }
  .nhom-noibat { margin-bottom: 2.604rem; }
  .nb-row { flex-direction: row; }
  .nb-trai { width: 43.4rem; flex: none; padding: 1.823rem .938rem .729rem; border-radius: 1.042rem; background: #fff; }
  .nb-trai h2 { display: block; font-size: 1.823rem; line-height: 2.083rem; font-weight: 700; color: #000; margin-bottom: 1.513rem; }
  .nb-trai .mui-ten { opacity: 0; transition: opacity .2s; }
  .nb-trai:hover .mui-ten { opacity: 1; }
  .nb-trai .mui-ten.truoc { left: -1.042rem; }
  .nb-trai .mui-ten.sau { right: -1.042rem; }
  .nb-phai { flex: 1; margin: 0; padding-left: 1.823rem; }
  .nb-phai .swiper { border-radius: 1.042rem; height: 100%; }
  .nb-phai .swiper-slide img { height: 100%; aspect-ratio: auto; }
  .nb-phai .mui-ten.truoc { left: .9rem; }
  .nb-phai .mui-ten.sau { right: .9rem; }
  .nhom-dm { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; margin-bottom: 2.604rem; }
  .dm-chip { flex-direction: row; align-items: center; margin-bottom: 0; }
  .dm-chip > span { font-size: .781rem; line-height: .938rem; margin: 0; }
  .dm-chip ul { gap: 0; padding: 0; overflow: visible; }
  .dm-chip a { font-size: .833rem; line-height: .833rem; padding: .521rem 1.042rem; margin-left: .521rem; border-radius: 2.604rem; }
  .dm-chip a:hover { background: var(--cam); border-color: var(--cam); color: #fff; } /* gốc: hover nền cam chữ trắng, chỉ trên máy tính */
  .dm-tieude h2 { font-size: 1.458rem; line-height: 1.771rem; margin-right: 3.125rem; }
  .dm-tieude .nut { display: inline-flex; padding: .781rem 1.563rem; font-size: .781rem; line-height: .781rem; border-radius: 5.208rem; }
  .nhom-ds { display: flex; justify-content: center; gap: 1.042rem; margin-bottom: 2.604rem; }
  .nhom-ds > .the-sp { width: 14.1rem; flex: none; }
  .nhom-ds > .the-sp:nth-child(n+5) { display: block; }
  .nhom-xemtat { display: none; }
  .nhom-bento { grid-template-columns: 29.92rem 13.01rem 13.01rem 1fr; grid-template-rows: 11.93rem 20rem; gap: 1.042rem; margin: 0; }
  .nhom-bento { height: auto; }
  .nhom-bento .o-1 { aspect-ratio: auto; }
  .nhom-bento .o-2 { height: auto; }
  .nhom-bento .o-2 img { height: 100%; }
  .nhom-bento .o { border-radius: 1.042rem; }
  .nhom-bento .o-1 { grid-row: 1 / 3; grid-column: 1; }
  .nhom-bento .o-2 { grid-row: 1; grid-column: 2 / 4; }
  .nhom-bento .o-xoay, .nhom-bento .o-xoay .swiper-wrapper { display: contents; }
  .nhom-bento .o-xoay .cham { display: none; }
  .nhom-bento .o-3 { grid-row: 2; grid-column: 2; }
  .nhom-bento .o-4 { grid-row: 2; grid-column: 3; }
  .nhom-bento .o-5 { grid-row: 1 / 3; grid-column: 4; }

  /* review */
  .s-review { padding: 4.271rem 0 2.604rem; }
  .rv-tieude { margin-bottom: 1.25rem; }
  .tieude-muc { font-size: 1.823rem; line-height: 2.083rem; }
  .rv-mxh { gap: .521rem; min-height: 4.167rem; }
  .rv-mxh a { width: 3.958rem; height: 3.958rem; }
  .rv-ds { flex-wrap: nowrap; gap: 1.25rem; }
  .rv-muc, .rv-muc:first-child { width: auto; flex: 227 1 0; border-radius: .521rem; }
  .rv-muc:first-child { flex: 706 1 0; }
  .rv-video { height: 29.3rem; }
  .rv-video img { border-radius: .521rem; }
  .rv-video .phat { width: 4.4rem; height: 4.4rem; }
  .rv-video .phat svg { width: 1.7rem; height: 1.7rem; margin-left: .25rem; }
  .rv-sp, .rv-muc:first-child .rv-sp { padding: 1.042rem; }
  .rv-muc:first-child .rv-sp { padding: 1.042rem 2.604rem 1.042rem 1.563rem; }
  .rv-sp .anh { width: 4.479rem; height: 4.479rem; border-radius: .26rem; margin-right: 1.042rem; }
  .rv-sp h3 { font-size: .781rem; line-height: 1.042rem; margin-bottom: .521rem; }
  .rv-muc:not(:first-child) .rv-sp h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .rv-muc:first-child .rv-sp h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rv-sp .gia-rv { font-size: .833rem; line-height: 1.25rem; }
  .rv-sp .nut, .rv-muc:first-child .rv-sp .nut { display: inline-flex; min-width: 0; margin-left: 2rem; padding: .781rem 1.563rem; font-size: .781rem; line-height: .781rem; }

  /* tin tức */
  .s-tin { padding: 2.188rem 0 3.125rem; }
  .tin-tieude { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 2.604rem; }
  .tin-tieude .tieude-muc { margin: 0; }
  .tin-chip { font-size: .729rem; line-height: .99rem; padding: .365rem .938rem; margin-right: .521rem; }
  .tin-dk .nut-den { padding: .521rem 1.563rem; font-size: .781rem; line-height: .781rem; margin-right: 1.458rem; }
  .mui-tron { width: 2.083rem; height: 2.083rem; }
  .mui-tron + .mui-tron { margin-left: .521rem; }
  .mui-tron svg { width: 1.1rem; height: 1.1rem; }
  .s-tin .swiper { padding: 0 4.948rem; }
  .s-tin .swiper-slide { opacity: .2; transition: opacity .3s; }
  .s-tin .swiper-slide.swiper-slide-visible { opacity: 1; }
  .tin-anh { border-radius: 1.042rem; margin-bottom: 1.563rem; }
  .tin-ngay { font-size: .729rem; line-height: .938rem; margin-bottom: .625rem; }
  .tin-ngay .muc { padding-left: .625rem; margin-left: .625rem; }
  .tin-ngay .muc::before { width: .25rem; height: .25rem; margin-top: -.125rem; }
  .tin-muc h3 { font-size: 1.042rem; line-height: 1.302rem; margin-bottom: .625rem; }
  .tin-muc .tom-tat { font-size: .729rem; line-height: .938rem; }

  /* footer */
  .ft { padding: 0 8.125rem; }
  .ft-tren { padding: 3.333rem 0 2.396rem; }
  .ft-cot, .ft-cot:nth-child(n+3) { width: 16.667%; margin: 0; padding: 0; }
  .ft-cot.cot-sp { display: block; }
  .ft-cot.rong { width: 25%; }
  .ft-cot .tieu-de { font-size: .833rem; line-height: 1.823rem; margin-bottom: .625rem; }
  .ft-cot li a { font-size: .729rem; line-height: .938rem; margin-bottom: .521rem; }
  .ft-giua { padding: 1.563rem 0; }
  .ft-giua-row { flex-wrap: nowrap; align-items: center; }
  .ft-dangky { width: 75%; flex-direction: row; align-items: center; padding-right: 3.906rem; margin: 0; }
  .ft-dangky .nhan, .ft-ketnoi .nhan { font-size: .938rem; line-height: 1.25rem; }
  .ft-dangky .nhan { margin: 0 2.5rem 0 0; white-space: nowrap; }
  .ft-dangky form { flex: 1; padding: .208rem .208rem .208rem 1.354rem; border-radius: 5.208rem; }
  .ft-dangky input { font-size: .729rem; line-height: 1.6rem; }
  .ft-dangky button { width: 2.222rem; height: 2.222rem; }
  .ft-dangky button svg { width: 1.3rem; height: 1.3rem; }
  .ft-ketnoi { width: 25%; }
  .ft-ketnoi .nhan { margin-right: 2.5rem; white-space: nowrap; }
  .ft-ketnoi a { width: 1.806rem; height: 1.806rem; margin-left: .521rem; }
  .ft-ketnoi a svg { width: 1rem; height: 1rem; }
  .ft-duoi { padding: 1.354rem 0 2.4rem; }
  .ft-duoi-row { flex-wrap: nowrap; }
  .ft-cty { width: 75%; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding-right: 3.906rem; margin: 0; }
  .ft-logo { margin: 0 2.708rem 0 0; gap: .6rem; flex: none; }
  .ft-logo .dau { width: 2.15rem; height: 2.15rem; font-size: 1.15rem; }
  .ft-logo .chu { font-size: .9rem; }
  .ft-logo .chu small { font-size: .6rem; }
  .ft-chu { flex: none; width: 35rem; padding: 0; margin: 0 1.042rem 0 0; font-size: .625rem; line-height: 1.042rem; }
  .ft-chungnhan { width: auto; gap: .7rem; }
  .ft-chungnhan span { font-size: .55rem; padding: .25rem .4rem; border-radius: .2rem; }
  .ft-tt { width: 25%; flex-wrap: nowrap; gap: .45rem; }
  .ft-tt .nhan { font-size: .729rem; line-height: 1.823rem; margin-right: 1.25rem; white-space: nowrap; }
  .the-tt { height: 1.5rem; min-width: 2.5rem; padding: 0 .35rem; font-size: .58rem; border-radius: .25rem; }

  /* nổi */
  .menu-nhanh {
    display: block; position: fixed; left: 3.056rem; top: 50%; transform: translateY(-50%); z-index: 99; background: #fff;
    padding: 1.458rem 0; border-radius: 5.208rem; box-shadow: 0 0 1.042rem rgba(0, 0, 0, .05);
  }
  .menu-nhanh li + li { margin-top: .625rem; }
  .menu-nhanh a { position: relative; display: flex; padding: .26rem .469rem; color: var(--cam); }
  .menu-nhanh a > svg { width: 1.806rem; height: 1.806rem; }
  .menu-nhanh .nhan {
    position: absolute; left: 100%; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap;
    font-size: .729rem; line-height: .919rem; font-weight: 500; color: #fff; background: var(--cam); padding: 0 .625rem 0 .26rem;
    border-radius: 0 5.208rem 5.208rem 0; opacity: 0; pointer-events: none; transform: translateX(-.4rem); transition: .2s;
  }
  .menu-nhanh a:hover, .menu-nhanh a.dang-xem { background: var(--cam); color: #fff; }
  .menu-nhanh a:hover .nhan, .menu-nhanh a.dang-xem .nhan { opacity: 1; transform: none; }
  .menu-nhanh .len-xuong { display: flex; flex-direction: column; align-items: center; color: #bbb; }
  .menu-nhanh .len-xuong button { padding: .1rem .469rem; color: #bbb; }
  .menu-nhanh .len-xuong button:hover { color: var(--cam); }
  .menu-nhanh .len-xuong svg { width: 1rem; height: .6rem; }
  .nut-zalo { right: 1.8rem; bottom: 1.8rem; width: 4.17rem; height: 4.17rem; }
  .nut-zalo span { width: 3.5rem; height: 3.5rem; border-width: .2rem; font-size: .9rem; }
  .nut-len { right: 2.344rem; bottom: 6rem; width: 2.604rem; height: 2.604rem; background: #ffdccc; color: #272d35; transform: translateY(4.167rem); }
  .nut-len.hien { transform: translateY(0); }
  .nut-len:hover { background: var(--cam); color: #fff; }
}