/* ===== NOMA Mobile — Danh sach bai — CSS scoped duoi .noma-m ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&display=swap');

.noma-m{ background:#fff; color:#1C1C1E; min-height:100vh;
  font-family:'Noto Sans',system-ui,-apple-system,sans-serif; -webkit-tap-highlight-color:transparent; }
.noma-m img{ max-width:100%; }
.noma-m .header{ top:0 !important; }

.noma-m{ --noma-blue:#1A1A1C; --blue-dark:#000000; --blue-light:#F1F2F4;
  --accent-blue:#2563EB;
  --ink:#1C1C1E; --g900:#1A1A1C; --g700:#44444A; --g500:#8A8A92;
  --g200:#E8E8EC; --g100:#F4F4F7; --g50:#FAFAFC; --white:#FFFFFF;
  --error:#DC2626; --success:#16A34A;
  --sans:"Noto Sans",system-ui,sans-serif; --mono:"Noto Sans",system-ui,sans-serif;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px; }
.noma-m *{ margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
.noma-m .promo{ background:#000; color:#fff; text-align:center; font-size:12.5px; font-weight:600;
  letter-spacing:.01em; padding:9px 16px; }
.noma-m .header{ position:sticky; top:54px; z-index:50; background:#0c0c0e;
  border-bottom:1px solid #26262b; }
.noma-m .header .row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:13px 16px; }
.noma-m .menu-btn{ justify-self:start; display:flex; align-items:center; gap:9px; background:none; border:none; color:#fff; cursor:pointer; padding:0; font-family:inherit; }
.noma-m .menu-btn svg{ width:21px; height:21px; display:block; }
.noma-m .menu-btn .mlabel{ font-size:11.5px; font-weight:600; letter-spacing:.18em; color:rgba(255,255,255,.9); }
.noma-m .header .logo{ justify-self:center; height:28px; width:auto; display:block; color:#fff; }
.noma-m .header .logo svg{ height:100%; width:auto; display:block; fill:currentColor; }
.noma-m .header .acts{ justify-self:end; display:flex; align-items:center; gap:16px; }
.noma-m .icon-btn{ background:none; border:none; color:#fff; display:flex; align-items:center; position:relative; cursor:pointer; padding:0; }
.noma-m .icon-btn svg{ width:23px; height:23px; }
.noma-m .badge-count{ position:absolute; top:-6px; right:-7px; background:#1C6EF2; color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--mono); }
.noma-m .crumb{ padding:18px 20px 0; font-size:13px; color:var(--g500); display:flex; gap:7px; align-items:center; }
.noma-m .crumb b{ color:var(--ink); font-weight:600; }
.noma-m .hero{ padding:6px 20px 22px; }
.noma-m .hero h1{ font-size:31px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--ink); overflow-wrap:break-word; word-break:break-word; }
.noma-m .hero p{ margin-top:10px; font-size:15.5px; line-height:1.5; color:var(--g700); max-width:330px; }
.noma-m .chips{ display:flex; gap:9px; overflow-x:auto; padding:2px 20px 22px; scrollbar-width:none; }
.noma-m .chips::-webkit-scrollbar{ display:none; }
.noma-m .chip{ flex:0 0 auto; border:1px solid var(--g200); background:var(--white); color:var(--g700);
  font-size:14px; font-weight:600; padding:9px 17px; border-radius:var(--r-full); cursor:pointer;
  white-space:nowrap; transition:all .15s ease; }
.noma-m .chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.noma-m .toolbar{ position:sticky; top:108px; z-index:40; background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--g200); border-bottom:1px solid var(--g200);
  display:flex; align-items:center; justify-content:space-between; padding:11px 18px; }
.noma-m .tb-btn{ display:flex; align-items:center; gap:7px; background:none; border:none; font-family:var(--sans);
  font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; padding:0; }
.noma-m .tb-btn svg{ width:18px; height:18px; }
.noma-m .tb-count{ font-size:13px; color:var(--g500); font-weight:500; }
.noma-m .tb-count b{ color:var(--ink); font-weight:700; font-family:var(--mono); }
.noma-m .tb-sep{ width:1px; height:18px; background:var(--g200); }
.noma-m .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:20px 18px 28px; }
.noma-m .card{ background:var(--white); border:1px solid var(--g100); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease; }
.noma-m .card:active{ box-shadow:0 8px 24px rgba(0,0,0,.08); }
.noma-m .card .imgwrap{ position:relative; background:var(--g50); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.noma-m .card .imgwrap img{ width:78%; height:78%; object-fit:contain; mix-blend-mode:multiply; }
.noma-m .card .imgwrap image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.noma-m .tag-sale{ position:absolute; top:9px; left:9px; background:var(--noma-blue); color:#fff;
  font-size:11.5px; font-weight:700; font-family:var(--mono); padding:3px 7px; border-radius:var(--r-sm); }
.noma-m .tag-new{ position:absolute; top:9px; left:9px; background:var(--ink); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:4px 8px; border-radius:var(--r-sm); text-transform:uppercase; }
.noma-m .wish{ position:absolute; top:7px; right:7px; width:30px; height:30px; border-radius:var(--r-full);
  background:rgba(255,255,255,.85); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.noma-m .wish svg{ width:17px; height:17px; color:var(--g700); }
.noma-m .card .body{ padding:13px 13px 15px; display:flex; flex-direction:column; flex:1; }
.noma-m .cat-label{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--g500); }
.noma-m .card h3{ font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); margin-top:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.noma-m .rating{ display:flex; align-items:center; gap:5px; margin-top:8px; }
.noma-m .stars{ display:flex; gap:1px; color:#F5A623; }
.noma-m .stars svg{ width:13px; height:13px; }
.noma-m .rating .rv{ font-size:12px; color:var(--g500); font-family:var(--mono); }
.noma-m .price{ margin-top:11px; display:flex; flex-direction:column; gap:1px; }
.noma-m .price .old{ font-size:12.5px; color:var(--g500); text-decoration:line-through; font-family:var(--mono); }
.noma-m .price .now{ font-size:17px; font-weight:700; color:var(--ink); font-family:var(--mono); }
.noma-m .price .now.sale{ color:#1C6EF2; }
.noma-m .buy{ margin-top:13px; width:100%; background:#000; color:#fff; border:none;
  font-family:var(--sans); font-size:13.5px; font-weight:700; padding:11px; border-radius:var(--r-md);
  cursor:pointer; transition:background .15s ease; display:flex; align-items:center; justify-content:center; gap:7px; }
.noma-m .buy svg{ width:16px; height:16px; }
.noma-m .buy:active{ background:#2a2a2e; }
.noma-m .loadmore{ display:flex; justify-content:center; padding:0 18px 14px; }
.noma-m .loadmore button{ width:100%; background:#fff; border:1.5px solid var(--ink); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:700; padding:14px; border-radius:var(--r-full); cursor:pointer; }
.noma-m .pager{ display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0 34px; }
.noma-m .pager a{ width:38px; height:38px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:var(--g700); border:1px solid var(--g200); text-decoration:none; font-family:var(--mono); }
.noma-m .pager a.on{ background:var(--noma-blue); color:#fff; border-color:var(--noma-blue); }
.noma-m .pager a.nav{ font-family:var(--sans); }
.noma-m .csec{ padding:28px 20px 4px; }
.noma-m .csec .shead{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:15px; }
.noma-m .csec .shead h2{ font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.noma-m .csec .shead a{ font-size:13px; font-weight:600; color:var(--g500); text-decoration:none; white-space:nowrap; }
.noma-m .pbanner{ border:1px solid var(--g100); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.noma-m .pbanner .pbimg{ position:relative; width:100%; aspect-ratio:4/3; background:var(--g50); }
.noma-m .pbanner .pbimg image-slot{ width:100%; height:100%; display:block; }
.noma-m .pbanner .pbimg .flag{ position:absolute; top:13px; left:13px; z-index:2; background:var(--noma-blue); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm); }
.noma-m .pbanner .pbbody{ padding:17px 18px 19px; }
.noma-m .pbanner .pbbody .pbcat{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--g500); }
.noma-m .pbanner .pbbody h3{ font-size:18px; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin-top:6px; }
.noma-m .pbanner .pbbody p{ font-size:13.5px; line-height:1.55; color:var(--g700); margin-top:8px; }
.noma-m .pbanner .pbbody .buy{ margin-top:15px; }
.noma-m .combo{ border:1px solid var(--g100); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.noma-m .combo .cimgs{ position:relative; width:100%; aspect-ratio:1/1; background:var(--g50); }
.noma-m .combo .cimgs image-slot{ width:100%; height:100%; display:block; }
.noma-m .combo .cflag{ position:absolute; top:13px; left:13px; background:#1C6EF2; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-sm); }
.noma-m .combo .cbody{ padding:16px 18px 18px; }
.noma-m .combo .cbody h3{ font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.noma-m .combo .cbody p{ font-size:13.5px; color:var(--g700); margin-top:7px; line-height:1.5; }
.noma-m .combo .crow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; }
.noma-m .combo .crow .cp{ display:flex; flex-direction:column; gap:1px; }
.noma-m .combo .crow .cp .old{ font-size:12.5px; color:var(--g500); text-decoration:line-through; font-family:var(--mono); }
.noma-m .combo .crow .cp .now{ font-size:19px; font-weight:800; color:#1C6EF2; font-family:var(--mono); }
.noma-m .combo .crow button{ background:#000; color:#fff; font-size:13.5px; font-weight:700; padding:12px 20px; border-radius:var(--r-full); border:none; cursor:pointer; white-space:nowrap; }
.noma-m .perks{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.noma-m .perk{ border:1px solid var(--g100); border-radius:var(--r-lg); padding:16px 15px; background:var(--g50); }
.noma-m .perk .pic{ width:40px; height:40px; border-radius:var(--r-full); background:#fff; border:1px solid var(--g200); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.noma-m .perk .pic svg{ width:21px; height:21px; }
.noma-m .perk h4{ font-size:14px; font-weight:700; color:var(--ink); margin-top:12px; }
.noma-m .perk p{ font-size:12.5px; color:var(--g700); line-height:1.45; margin-top:4px; }
.noma-m .catart .artbanner{ width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:var(--g100); }
.noma-m .catart .artbanner image-slot{ width:100%; height:100%; display:block; }
.noma-m .catart .atag{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#1C6EF2; margin-top:15px; }
.noma-m .catart h3{ font-size:20px; font-weight:800; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin-top:8px; }
.noma-m .catart p{ font-size:14px; line-height:1.6; color:var(--g700); margin-top:11px; }
.noma-m .catart .readmore{ display:inline-flex; align-items:center; gap:6px; margin-top:15px; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; }
.noma-m .catart .readmore svg{ width:16px; height:16px; }
.noma-m .searchbar{ margin:0 20px 6px; display:flex; align-items:center; gap:10px; background:var(--g100); border:1px solid var(--g200); border-radius:var(--r-full); padding:12px 16px; }
.noma-m .searchbar svg{ width:18px; height:18px; color:var(--g500); flex:0 0 auto; }
.noma-m .searchbar input{ flex:1; min-width:0; border:none; background:none; font-family:var(--sans); font-size:14.5px; color:var(--ink); outline:none; }
.noma-m .searchbar input::placeholder{ color:var(--g500); }
.noma-m .searchbar input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.noma-m .glist{ display:flex; flex-direction:column; }
.noma-m .grow{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--g100); text-decoration:none; }
.noma-m .grow:last-child{ border-bottom:none; }
.noma-m .grow .gthumb{ flex:0 0 120px; width:120px; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--g100); }
.noma-m .grow .gthumb image-slot{ width:100%; height:100%; display:block; }
.noma-m .grow .gbody{ flex:1; min-width:0; align-self:center; }
.noma-m .grow .gdate{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--g500); font-family:var(--mono); }
.noma-m .grow .gbody h3{ font-size:14.5px; font-weight:700; line-height:1.35; color:var(--ink); margin-top:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.noma-m .orderform{ margin:28px 20px 12px; border:1px solid var(--g200); border-radius:var(--r-xl); padding:24px 20px 24px; background:var(--g50); }
.noma-m .orderform h2{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.noma-m .orderform > p{ font-size:13.5px; color:var(--g700); margin-top:8px; line-height:1.5; }
.noma-m .orderform .of{ margin-top:17px; display:flex; flex-direction:column; gap:11px; }
.noma-m .orderform .frow2{ display:flex; gap:11px; }
.noma-m .orderform .frow2 > *{ flex:1; min-width:0; }
.noma-m .orderform input, .noma-m .orderform select, .noma-m .orderform textarea{ background:#fff; border:1px solid var(--g200); border-radius:var(--r-md); padding:13px 14px; color:var(--ink); font-family:var(--sans); font-size:14px; width:100%; -webkit-appearance:none; appearance:none; }
.noma-m .orderform textarea{ resize:none; min-height:84px; line-height:1.5; }
.noma-m .orderform input::placeholder, .noma-m .orderform textarea::placeholder{ color:var(--g500); }
.noma-m .orderform select{ color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8A92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.noma-m .orderform .submit{ margin-top:5px; background:#000; color:#fff; border:none; border-radius:var(--r-md); padding:14px; font-family:var(--sans); font-weight:700; font-size:15px; cursor:pointer; }
.noma-m .orderform .ok{ margin-top:12px; font-size:13px; color:var(--success); font-weight:600; display:none; }
.noma-m .orderform.sent .ok{ display:block; }
.noma-m .fcontact{ padding:22px 2px 4px; display:flex; flex-direction:column; gap:14px; }
.noma-m .fcontact .blk h4{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8a8a92; margin-bottom:7px; }
.noma-m .fcontact .blk p{ font-size:14.5px; color:#e5e5ea; line-height:1.5; }
.noma-m .fcontact .blk a{ color:#fff; font-weight:600; text-decoration:none; font-family:var(--mono); }
.noma-m .tabbar{ position:sticky; bottom:0; z-index:45; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--g200); display:flex; padding:9px 8px 24px; }
.noma-m .tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
  color:var(--g500); font-size:10.5px; font-weight:600; }
.noma-m .tabbar a.on{ color:#000; }
.noma-m .tabbar svg{ width:23px; height:23px; }