/* Outlet Chính Hãng — bảng màu tách hẳn khỏi nhận diện Lotto (đỏ #ED1A35)
   để khách không nhầm hai kênh. Cam đất là màu thùng carton và kho hàng. */
:root{
  --cam:#B33A1A; --cam-nhat:#F4EAE5;
  --muc:#1C1A19; --muc-nhat:#5C5551;
  --nen:#FFFFFF; --nen-xam:#F7F5F3; --vien:#E4DED9;
  --xanh:#0E6B45;
  --chu:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--chu);color:var(--muc);background:var(--nen);line-height:1.55;font-size:16px}
a{color:inherit}
img{max-width:100%}
.bao{max-width:1120px;margin:0 auto;padding:0 16px}
.nho{font-size:13px;color:var(--muc-nhat)}
.dau{border-bottom:1px solid var(--vien)}
.dau-trong{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;flex-wrap:wrap}
.hieu{font-weight:800;letter-spacing:.04em;text-decoration:none;font-size:18px;color:var(--cam)}
.hieu span{color:var(--muc);font-weight:600;margin-left:6px;font-size:13px;letter-spacing:.12em}
/* Menu to hơn 120% so với bản đầu (15px → 18px) — thanh điều hướng là thứ khách
   dùng nhiều nhất trên điện thoại, chữ nhỏ là chạm nhầm. */
.menu{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.menu a{text-decoration:none;font-size:18px;color:var(--muc-nhat);padding:4px 0;font-weight:500}
.menu a:hover{color:var(--cam)}
@media(max-width:700px){.menu{gap:16px}.menu a{font-size:17px}}
.dai-cam-ket{background:var(--xanh);color:#fff;font-size:13px;text-align:center;padding:7px 12px}
.duong-dan{font-size:13px;color:var(--muc-nhat);padding:12px 0}
.duong-dan a{text-decoration:none}
.duong-dan a:hover{text-decoration:underline}
h1{font-size:26px;line-height:1.25;margin:14px 0 8px}
h2{font-size:19px;margin:26px 0 8px}
.dan{color:var(--muc-nhat);margin:0 0 20px;max-width:62ch}
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin:18px 0 30px}
.the{border:1px solid var(--vien);border-radius:6px;overflow:hidden;background:var(--nen)}
.the-lien{text-decoration:none;display:block}
.the-anh{aspect-ratio:1/1;background:var(--nen-xam);position:relative}
.giam{position:absolute;top:8px;left:8px;background:var(--cam);color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:3px}
.giam.to{font-size:15px;padding:5px 10px}
.nho-cam{position:static;display:inline-block}
.the-ten{margin:10px 12px 2px;font-size:15px;font-weight:700}
.the-nhom{margin:0 12px;font-size:12px;color:var(--muc-nhat)}
.the-gia{margin:8px 12px 4px;font-size:15px}
.the-gia b{color:var(--cam);font-size:17px}
.the-gia s{color:var(--muc-nhat);font-size:13px;margin-left:5px}
.the-size{margin:0 12px 12px;font-size:12px;color:var(--muc-nhat)}
.xem-them a{color:var(--cam);font-weight:600;text-decoration:none}
.sp{display:grid;grid-template-columns:1fr;gap:24px;margin:8px 0 30px}
@media(min-width:760px){.sp{grid-template-columns:1fr 1fr;gap:36px}}
.sp-anh{aspect-ratio:1/1;background:var(--nen-xam);border-radius:6px;position:relative}
.sp-ma{color:var(--muc-nhat);font-size:13px;margin:0 0 14px}
.sp-gia{font-size:16px;margin:0 0 6px}
.sp-gia b{color:var(--cam);font-size:26px}
.sp-gia s{color:var(--muc-nhat);margin-left:8px}
.nho-tieu{font-size:15px;margin:20px 0 8px}
.size-ds{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px}
.size-ds li{border:1px solid var(--vien);border-radius:5px;padding:6px 10px;min-width:56px;text-align:center;background:var(--nen)}
.size-ds li b{display:block;font-size:15px}
.size-ds li span{font-size:11px;color:var(--muc-nhat)}
.size-ds li.it{border-color:var(--cam);background:var(--cam-nhat)}
.size-ds li.it span{color:var(--cam);font-weight:600}
.nut{display:inline-block;background:var(--cam);color:#fff;text-decoration:none;font-weight:700;padding:13px 22px;border-radius:5px;margin:16px 0 6px}
.cam-ket{padding-left:18px;margin:14px 0 0;font-size:14px;color:var(--muc-nhat)}
.cam-ket li{margin:4px 0}
.vi-sao{background:var(--nen-xam);border-radius:6px;padding:18px 20px;margin:0 0 30px;max-width:70ch}
.vi-sao h2{margin-top:0}
.ba-buoc{max-width:62ch;padding-left:20px}
.ba-buoc li{margin:12px 0}
.chan{border-top:1px solid var(--vien);margin-top:40px;padding:26px 0 34px;background:var(--nen-xam);font-size:14px}
.chan-luoi{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:16px}
@media(min-width:700px){.chan-luoi{grid-template-columns:repeat(3,1fr)}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --muc:#F2EFED; --muc-nhat:#A8A09B; --nen:#161413; --nen-xam:#211E1C;
    --vien:#38322E; --cam:#FF7A50; --cam-nhat:#2E1D16;
  }
}

/* Câu trả lời đứng ngay đầu trang — người đọc lấy được câu trả lời mà không phải cuộn,
   và máy trích dẫn cũng lấy đúng đoạn này. */
.tra-loi{font-size:18px;line-height:1.5;max-width:62ch;margin:0 0 22px;
  padding:14px 18px;border-left:3px solid var(--cam);background:var(--cam-nhat);border-radius:0 5px 5px 0}
.tra-loi b{color:var(--cam)}

/* ── Hero ────────────────────────────────────────────────────────────
   Không dùng ảnh nền lớn: trang outlet phải mở nhanh trên 3G, và ảnh hero
   nặng là thứ đầu tiên làm chậm. Chữ mang sức nặng, ảnh đứng cạnh. */
.hero{display:grid;grid-template-columns:1fr;gap:24px;align-items:center;
  margin:22px 0 40px;padding:28px 24px;border-radius:8px;
  background:linear-gradient(135deg,var(--cam-nhat) 0%,var(--nen-xam) 100%);
  border:1px solid var(--vien)}
@media(min-width:820px){.hero{grid-template-columns:1.05fr .95fr;padding:40px 38px;gap:40px}}
.hero-nhan{margin:0 0 10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cam);font-weight:700}
.hero h1{font-size:32px;line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
@media(min-width:820px){.hero h1{font-size:42px}}
.hero-dan{color:var(--muc-nhat);margin:0 0 16px;max-width:46ch;font-size:16px}
.hero-so{margin:0 0 20px;font-size:15px;color:var(--muc-nhat)}
.hero-so b{color:var(--muc);font-size:19px}
/* Khung ảnh mở màn. Viền nét đứt CHỈ còn dùng cho trường hợp chưa có ảnh — một khung nét đứt
   quanh ảnh thật trông như trang chưa dựng xong, đúng ấn tượng không được để lại trên trang
   phải trả lời câu "hàng outlet là hàng lỗi à?". */
.hero-anh{border-radius:6px}
.hero-anh:has(.cho-anh){aspect-ratio:4/3;background:var(--nen);
  border:1px dashed var(--vien);display:flex;align-items:center;justify-content:center}
.hero-anh a{display:block;text-decoration:none;color:inherit}
/* `height:auto` là bắt buộc, không phải cho đẹp: thẻ <img> mang height="900" như một gợi ý
   trình bày, và một chiều cao tường minh THẮNG `aspect-ratio`. Thiếu dòng này, ảnh cao đúng
   900px và bị cắt mất nửa đôi giày — đo thật 10/09/2026 trước khi sửa: 460×900.
   `contain` chứ không `cover`: ảnh sản phẩm phải giống hàng thật, cắt mất mũi hay gót là khách
   nhận hàng thấy khác ảnh. Nền trắng nên phần đệm không nhìn thấy. */
.hero-anh img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;background:#fff;border-radius:6px}
.hero-cap{display:block;padding:8px 2px 0;font-size:13px;color:var(--muc-nhat)}
.hero-anh a:hover .hero-cap{color:var(--cam)}
.cho-anh{font-size:12px;color:var(--muc-nhat);text-align:center;padding:0 20px}
.nut-phu{display:inline-block;margin-left:12px;color:var(--cam);font-weight:600;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}

/* ── Dải thương hiệu ─────────────────────────────────────────────── */
.dai-th{margin:0 0 40px;padding:26px 0;border-top:1px solid var(--vien);border-bottom:1px solid var(--vien)}
.dai-th-tieu{margin:0 0 18px;font-size:16px;font-weight:600;color:var(--muc-nhat)}
.th-luoi{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:700px){.th-luoi{grid-template-columns:repeat(3,1fr);gap:28px}}
.th-o{padding-left:14px;border-left:3px solid var(--cam)}
.th-dau{font-size:21px;font-weight:800;letter-spacing:-.01em}
.th-tu{margin:2px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cam);font-weight:600}
.th-mo{margin:0;font-size:14px;color:var(--muc-nhat);line-height:1.5}

/* ── Khối nghỉ giữa hai lưới sản phẩm ────────────────────────────── */
.nghi{background:var(--muc);color:#fff;border-radius:8px;margin:34px 0;padding:30px 24px}
.nghi h2{margin:0 0 18px;color:#fff;font-size:21px}
.nghi-luoi{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.nghi-luoi{grid-template-columns:repeat(2,1fr);gap:22px 34px}}
@media(min-width:1000px){.nghi-luoi{grid-template-columns:repeat(4,1fr)}}
.nghi-luoi b{display:block;margin-bottom:5px;font-size:15px}
.nghi-luoi p{margin:0;font-size:13.5px;color:#C9C2BD;line-height:1.5}

/* ── Chọn theo môn ───────────────────────────────────────────────── */
.mon-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0 34px}
.mon-o{display:block;text-decoration:none;border:1px solid var(--vien);border-radius:6px;
  padding:16px 18px;background:var(--nen);transition:border-color .15s,transform .15s}
.mon-o:hover{border-color:var(--cam);transform:translateY(-1px)}
.mon-o b{display:block;font-size:16px;margin-bottom:3px}
.mon-o span{font-size:13px;color:var(--muc-nhat)}

@media (prefers-reduced-motion:reduce){.mon-o{transition:none}}

/* Ô thương hiệu giờ là liên kết — phải trông bấm được */
a.th-o{text-decoration:none;display:block;transition:border-color .15s,transform .15s}
a.th-o:hover{border-left-width:5px;transform:translateX(1px)}
.th-xem{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--cam)}
@media (prefers-reduced-motion:reduce){a.th-o{transition:none}}

/* Chân trang: hai miền hai khối riêng, số điện thoại nằm ngay dưới địa chỉ miền đó —
   đưa nhầm số cho khách đang bực là một sự xúc phạm. */
.chan-luoi strong{display:block;margin-bottom:8px;font-size:15px}
.chan-luoi p{margin:0 0 8px;line-height:1.55}
.chan-cty{font-weight:600}
.chan-dt a{color:var(--cam);text-decoration:none;font-weight:600}
.chan-dt a:hover{text-decoration:underline}

/* Ảnh sản phẩm */
.the-anh img{width:100%;height:100%;object-fit:contain;display:block}
.sp-anh img{width:100%;height:100%;object-fit:contain;display:block;border-radius:6px}
/* Ô ảnh phụ VUÔNG cứng. Ảnh nguồn không thống nhất tỉ lệ (có tấm 720×900),
   nên phải ép khung vuông và để object-fit lo phần thừa — nếu không, một ảnh dọc
   sẽ kéo cả hàng dài ra. */
.sp-anh-them{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,88px));gap:8px;margin-top:10px}
.sp-anh-them img{width:100%;height:auto;aspect-ratio:1/1!important;object-fit:contain;
  background:var(--nen-xam);border:1px solid var(--vien);border-radius:5px;display:block}

/* ── Chọn size: giờ là nút bấm, phải trông bấm được ─────────────────── */
.size-ds li{border:none;padding:0;min-width:0;background:none}
.size-ds button{font:inherit;cursor:pointer;border:1px solid var(--vien);border-radius:5px;
  padding:8px 12px;min-width:62px;text-align:center;background:var(--nen);color:var(--muc)}
.size-ds button:hover{border-color:var(--cam)}
.size-ds button.chon{border-color:var(--cam);border-width:2px;background:var(--cam-nhat)}
.size-ds button b{display:block;font-size:15px}
.size-ds button span{font-size:11px;color:var(--muc-nhat)}
.size-ds button.it span{color:var(--cam);font-weight:600}
.size-ds button:focus-visible{outline:2px solid var(--cam);outline-offset:2px}
.nhac{min-height:20px;margin:8px 0 0;font-size:14px;color:var(--xanh);font-weight:500}
.nhac.loi{color:var(--cam)}
button.nut{font:inherit;font-weight:700;cursor:pointer;border:none}
button.nut:disabled{opacity:.6;cursor:default}

/* ── Giỏ hàng trên thanh điều hướng ─────────────────────────────────── */
.nut-gio{font-weight:600;color:var(--cam)!important;display:inline-flex;align-items:center;gap:6px}
.so-gio{background:var(--cam);color:#fff;border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;padding:0 6px}

/* ── Bảng giỏ hàng ──────────────────────────────────────────────────── */
.gio-bang{width:100%;border-collapse:collapse;margin:14px 0}
.gio-bang th{text-align:left;font-size:13px;color:var(--muc-nhat);font-weight:600;
  border-bottom:1px solid var(--vien);padding:8px 6px}
.gio-bang td{border-bottom:1px solid var(--vien);padding:10px 6px;vertical-align:middle}
.gio-bang td.phai{text-align:right;font-weight:600;white-space:nowrap}
.gio-sp{display:flex;align-items:center;gap:10px}
.gio-sp img{border:1px solid var(--vien);border-radius:4px;object-fit:contain;background:var(--nen-xam)}
.gio-sp a{text-decoration:none;font-weight:600}
.gio-bang input[type=number]{width:58px;padding:6px;border:1px solid var(--vien);border-radius:4px;font:inherit}
.go{border:none;background:none;color:var(--muc-nhat);cursor:pointer;font-size:16px;padding:4px 8px}
.go:hover{color:var(--cam)}
.tong-gio{text-align:right;font-size:17px;margin:4px 0 26px}
.tong-gio b{color:var(--cam);font-size:21px}

/* ── Biểu mẫu đặt hàng ──────────────────────────────────────────────── */
.form-dat{max-width:520px;border:1px solid var(--vien);border-radius:8px;padding:20px 22px;background:var(--nen-xam)}
.form-dat h2{margin-top:0}
.form-dat label{display:block;margin:0 0 14px;font-size:14px;font-weight:600}
.form-dat input{display:block;width:100%;margin-top:5px;padding:11px 12px;font:inherit;font-weight:400;
  border:1px solid var(--vien);border-radius:5px;background:var(--nen);color:var(--muc)}
.form-dat input:focus{outline:2px solid var(--cam);outline-offset:1px;border-color:var(--cam)}
.tong-cuoi{font-size:16px;margin:18px 0 12px}
.tong-cuoi b{color:var(--cam);font-size:21px}

/* --- Trang chính sách --- */
.van{max-width:66ch;margin:0 auto 44px}
.van h1{font-size:28px;margin:18px 0 18px}
.van h2{font-size:19px;margin:32px 0 10px;padding-top:16px;border-top:1px solid var(--vien)}
.van h2:first-of-type{border-top:0;padding-top:0}
.van p{margin:0 0 12px}
.bang-cs{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0 18px;display:block;overflow-x:auto}
.bang-cs th{background:var(--nen-xam);text-align:left;padding:9px 11px;border:1px solid var(--vien);
  font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muc-nhat);white-space:nowrap}
.bang-cs td{padding:9px 11px;border:1px solid var(--vien)}
.ds-cs{margin:0 0 14px;padding-left:20px}
.ds-cs li{margin:0 0 5px}
.hai-khoi{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 18px}
@media(min-width:620px){.hai-khoi{grid-template-columns:1fr 1fr}}
.khoi-cs{border:1px solid var(--vien);border-radius:6px;padding:14px 16px;background:var(--nen-xam)}
.khoi-cs p{margin:6px 0 0;font-size:15px}
.chan-ds{list-style:none;padding:0;margin:0 0 10px}
.chan-ds li{margin:0 0 5px}
.chan-ds a{text-decoration:none}
.chan-ds a:hover{text-decoration:underline;color:var(--cam)}

/* Hàng không bán theo size (thiết bị, phụ kiện): thay chỗ của bảng chọn size bằng
   một câu nói rõ còn bao nhiêu. Không để trống — chỗ trống ở đúng vị trí bảng size
   làm khách tưởng trang lỗi. */
.con-hang { margin: .2rem 0 .9rem; font-size: 1rem; }
.con-hang b { font-variant-numeric: tabular-nums; }