/* MacMall — thân trang chủ (12/11/2026, bản duyệt home-preview-vi-laptop-2026-11-12). Chỉ nạp ở trang chủ.
   Mọi lớp có tiền tố mmh- và nằm trong .mmh để không đụng CSS cũ. Chỉ font hệ thống. */
.mmh,.mmh-footer{font-family:var(--mm-font,-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,"Segoe UI",Roboto,Arial,sans-serif);letter-spacing:normal;line-height:normal;color:#1d1d1f;-webkit-font-smoothing:antialiased;background:#fff;text-align:left}
.mmh *,.mmh-footer *{box-sizing:border-box}
.mmh a,.mmh-footer a{color:inherit;text-decoration:none}
.mmh a:hover,.mmh a:hover *,.mmh-footer a:hover,.mmh-footer a:hover *{color:inherit!important;text-decoration:none}
.mmh img,.mmh-footer img{max-width:100%;display:block;vertical-align:initial}
.mmh h1,.mmh h2,.mmh h3,.mmh-footer h4{line-height:normal;color:inherit}
.mmh p,.mmh-footer p{line-height:normal;font-size:inherit;font-weight:inherit;color:inherit}
.mmh .mmh-sub{color:#1d1d1f}
.mmh .mmh-wrap{max-width:1260px;margin:0 auto;padding:0 32px}
/* 1. Hero */
.mmh .mmh-hero{background:#f5f5f7;text-align:center;padding:64px 0 0;overflow:hidden}
.mmh .mmh-eyebrow{color:#b64400;font-size:17px;font-weight:600;margin-bottom:8px}
.mmh .mmh-hero h1{font-size:clamp(48px,7.4vw,88px);line-height:1.04;font-weight:700;letter-spacing:-.015em;margin:0;font-family:inherit}
.mmh .mmh-sub{font-size:clamp(19px,2.2vw,28px);line-height:1.25;margin:12px auto 0;max-width:760px;font-weight:400}
.mmh .mmh-price{font-size:21px;margin-top:16px;color:#1d1d1f}
.mmh .mmh-price small{color:#6e6e73;font-size:17px;margin-right:4px}
.mmh .mmh-dots{display:flex;gap:9px;justify-content:center;margin-top:14px}
.mmh .mmh-dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);display:block}
.mmh .mmh-ctas{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap}
.mmh .mmh-btn{background:#0071e3;color:#fff;border-radius:999px;padding:11px 24px;font-size:17px;display:inline-block;line-height:normal;border:0}
.mmh .mmh-btn:hover{background:#0077ed;color:#fff!important}
.mmh .mmh-btn.mmh-ghost{background:transparent;color:#0071e3;box-shadow:inset 0 0 0 1px #0071e3}
.mmh .mmh-btn.mmh-ghost:hover{background:#0071e3;color:#fff!important}
.mmh .mmh-lnk{color:#0071e3;font-size:17px}
.mmh .mmh-lnk:hover{text-decoration:underline;color:#0071e3!important}
.mmh .mmh-shot{display:block;max-width:860px;margin:44px auto 0;padding-bottom:64px}
.mmh .mmh-crop{display:block;width:100%;height:0;padding-top:62.2881%;overflow:hidden;position:relative}
.mmh .mmh-crop img{position:absolute;width:105.9322%;max-width:none;height:auto;left:-2.9661%;top:-39.4558%}
/* 2. Danh mục */
.mmh .mmh-cats{padding-top:96px;padding-bottom:88px}
.mmh h2.mmh-sec{font-size:clamp(32px,4.4vw,48px);font-weight:700;letter-spacing:-.01em;margin:0 0 10px;font-family:inherit}
.mmh .mmh-sec-sub{color:#6e6e73;font-size:17px;margin:0 0 34px}
.mmh .mmh-sec-sub a{color:#0071e3}
.mmh .mmh-sec-sub a:hover{color:#0071e3!important;text-decoration:underline}
.mmh .mmh-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.mmh .mmh-tile{background:#fff;box-shadow:inset 0 0 0 1px #e8e8ed;border-radius:22px;padding:30px 24px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .25s,box-shadow .25s}
.mmh .mmh-tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #e8e8ed,0 10px 30px rgba(0,0,0,.08)}
.mmh .mmh-timg{height:200px;width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.mmh .mmh-timg img{max-height:200px;object-fit:contain;mix-blend-mode:multiply}
.mmh .mmh-tile h3{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.005em;font-family:inherit}
.mmh .mmh-desc{color:#6e6e73;font-size:14px;line-height:1.4;margin-bottom:14px;min-height:40px}
.mmh .mmh-tile .mmh-ct{font-size:14px;margin-bottom:14px}
.mmh .mmh-go{color:#0071e3;font-size:15px;margin-top:auto}
.mmh .mmh-tile:hover .mmh-go{text-decoration:underline;color:#0071e3!important}
.mmh .mmh-tile:hover .mmh-desc{color:#6e6e73!important}
.mmh .mmh-fam-h{display:flex;justify-content:space-between;align-items:baseline;margin:64px 0 18px;gap:16px}
.mmh .mmh-fam-h h3{font-size:24px;margin:0;font-weight:600;font-family:inherit}
.mmh .mmh-fam-h a{color:#0071e3;font-size:15px}
.mmh .mmh-fam-h a:hover{color:#0071e3!important;text-decoration:underline}
.mmh .mmh-pnav{position:relative;display:block}
.mmh .mmh-track{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:6px 0 10px;-webkit-overflow-scrolling:touch}
.mmh .mmh-track::-webkit-scrollbar{display:none}
.mmh .mmh-pnav a{flex:1 0 140px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 8px;border-radius:16px}
.mmh .mmh-pnav a:hover{background:#f5f5f7}
.mmh .mmh-thumb{height:84px;width:120px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:12px}
.mmh .mmh-thumb img{max-height:84px;max-width:120px;object-fit:contain}
.mmh .mmh-nm{font-size:14px;line-height:1.3}
.mmh .mmh-pnav .mmh-ct{font-size:12px;color:#6e6e73;margin-top:3px}
.mmh .mmh-pnav a:hover .mmh-nm{color:#0071e3!important}
.mmh .mmh-pnav a:hover .mmh-ct{color:#6e6e73!important}
.mmh .mmh-products a{flex:0 0 280px}
.mmh .mmh-products .mmh-nm{font-size:14px;line-height:1.35;max-width:260px}
.mmh .mmh-products .mmh-pr{font-size:14px;font-weight:600;margin-top:6px}
.mmh .mmh-thumb.mmh-ph-empty{background:#f5f5f7;border-radius:10px;min-height:84px;width:120px}
/* 3. Tin tức */
.mmh .mmh-news{background:#f5f5f7;padding:88px 0 96px}
.mmh .mmh-ngrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mmh .mmh-post{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.mmh .mmh-post:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.mmh .mmh-ph{aspect-ratio:16/10;background:#e8e8ed;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mmh .mmh-ph img{width:100%;height:100%;object-fit:cover}
.mmh .mmh-ph svg{width:56px;height:56px;color:#a1a1a6;display:none}
.mmh .mmh-ph.mmh-noimg svg{display:block}
.mmh .mmh-pbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.mmh .mmh-meta{font-size:12px;color:#6e6e73;letter-spacing:.02em;text-transform:uppercase;margin-bottom:8px}
.mmh .mmh-post h3{font-size:19px;line-height:1.3;font-weight:600;margin:0 0 16px;font-family:inherit}
.mmh .mmh-post .mmh-go{color:#0071e3;font-size:15px;margin-top:auto}
.mmh .mmh-post:hover h3{color:#0071e3!important}
.mmh .mmh-post:hover .mmh-go{color:#0071e3!important}
.mmh .mmh-post:hover .mmh-meta{color:#6e6e73!important}
.mmh .mmh-more{text-align:center;margin-top:40px}
/* Chân trang (trang chủ) */
.mmh-footer{background:#f2f2f2;color:#333;font-size:14px}
.mmh-footer .mmh-fsub{background:#fff;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.mmh-footer .mmh-frow{max-width:1260px;margin:0 auto;padding:28px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mmh-footer .mmh-fsub .mmh-frow{grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center}
.mmh-footer h4{font-size:13px;margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;font-family:inherit}
.mmh-footer p{margin:4px 0}
.mmh-footer a:hover{text-decoration:underline}
.mmh-footer .mmh-soc{display:flex;gap:14px;justify-content:center;font-size:13px;flex-wrap:wrap}
.mmh-footer .mmh-copy{text-align:center;color:#888;padding:15px;font-size:13px}
.mmh-footer .mmh-fsub input{border:1px solid #ccc;border-radius:6px;padding:8px 10px;width:70%;font:inherit;color:#333;background:#fff;outline:none;line-height:normal;margin:0}
.mmh-footer .mmh-logo2 img{margin:0 auto;max-height:60px}
.mmh-footer .mmh-addr p,.mmh-footer .mmh-hours p{margin:4px 0}
.mmh-footer .mmh-hours p:empty,.mmh-footer .mmh-addr p:empty{display:none}
.mmh-footer .mmh-hidden-btn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}
/* Responsive */
@media(max-width:1100px){.mmh .mmh-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.mmh .mmh-ngrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .mmh .mmh-wrap{padding:0 20px}
 .mmh .mmh-hero{padding-top:40px}.mmh .mmh-eyebrow{font-size:15px}.mmh .mmh-sub{font-size:19px;padding:0 16px}
 .mmh .mmh-ctas{gap:12px}.mmh .mmh-btn{padding:10px 20px;font-size:16px}.mmh .mmh-lnk{font-size:16px}
 .mmh .mmh-shot{margin-top:28px;padding:0 16px 40px}
 .mmh .mmh-cats{padding-top:60px;padding-bottom:56px}.mmh .mmh-sec-sub{font-size:15px;margin-bottom:24px}
 .mmh .mmh-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mmh .mmh-tile{padding:18px 12px;border-radius:18px}.mmh .mmh-timg{height:120px;margin-bottom:12px}.mmh .mmh-timg img{max-height:120px}
 .mmh .mmh-tile h3{font-size:18px}.mmh .mmh-desc{font-size:12px;min-height:0;margin-bottom:8px}.mmh .mmh-tile .mmh-ct{font-size:13px;margin-bottom:8px}.mmh .mmh-go{font-size:14px}
 .mmh .mmh-fam-h{margin-top:44px}.mmh .mmh-fam-h h3{font-size:20px}
 .mmh .mmh-track{margin:0 -20px;padding-left:14px;padding-right:14px}
 .mmh .mmh-pnav a{flex:0 0 108px;padding:10px 4px}.mmh .mmh-thumb{width:90px;height:60px}.mmh .mmh-thumb img{max-height:60px;max-width:90px}.mmh .mmh-nm{font-size:12px}
 .mmh .mmh-products a{flex:0 0 200px}.mmh .mmh-products .mmh-nm{max-width:180px;font-size:13px}
 .mmh .mmh-news{padding:56px 0 64px}
 .mmh .mmh-ngrid{grid-template-columns:1fr;gap:12px}
 .mmh .mmh-post{flex-direction:row;border-radius:18px}
 .mmh .mmh-ph{aspect-ratio:auto;width:110px;flex:0 0 110px;min-height:110px}.mmh .mmh-ph svg{width:36px;height:36px}
 .mmh .mmh-pbody{padding:14px 16px}.mmh .mmh-post h3{font-size:15px;margin-bottom:8px}.mmh .mmh-post .mmh-go{font-size:13px}.mmh .mmh-meta{font-size:11px;margin-bottom:5px}
 .mmh-footer .mmh-frow,.mmh-footer .mmh-fsub .mmh-frow{grid-template-columns:1fr;padding:22px 20px;text-align:left}
 .mmh-footer .mmh-fsub .mmh-frow{text-align:center}.mmh-footer .mmh-logo2{display:none}
}

/* ===== 12/11/2026 (UTC+7) hero xoay Neo ⇄ Air M5 + chấm màu bấm được + ảnh tách nền (bản duyệt 8799). Chỉ phạm vi #hero.mmh-rot ===== */
.mmh .mmh-rot{position:relative}
.mmh .mmh-rot .mmh-slides{display:grid}
.mmh .mmh-rot .mmh-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.mmh .mmh-rot .mmh-slide.is-active{opacity:1;visibility:visible;transition:opacity .28s ease .22s,visibility 0s linear 0s}
.mmh .mmh-rot .mmh-ttl{font-size:clamp(48px,7.4vw,88px);line-height:1.04;font-weight:700;letter-spacing:-.015em;margin:0;font-family:inherit;color:#1d1d1f}
.mmh .mmh-rot .mmh-price small{margin-right:0}
.mmh .mmh-rot .mmh-slide-air-m5 .mmh-crop img{width:108.6957%;left:-4.3478%;top:-42.2280%}
.mmh .mmh-rot .mmh-pager{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:2px}
.mmh .mmh-rot .mmh-pg{background:none;border:0;padding:8px;margin:0;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.mmh .mmh-rot .mmh-pg span{display:block;width:7px;height:7px;border-radius:50%;background:#c7c7cc;transition:background .2s}
.mmh .mmh-rot .mmh-pg.is-on span{background:#6e6e73}
.mmh .mmh-rot .mmh-pg:hover span{background:#8e8e93}
.mmh .mmh-rot .mmh-pg:focus-visible{outline:2px solid #0071e3;outline-offset:-2px;border-radius:50%}
.mmh .mmh-rot{touch-action:pan-y}
@media(max-width:760px){.mmh .mmh-rot .mmh-pager{bottom:8px}}
@media(max-width:480px){.mmh .mmh-rot .mmh-slide-air-m5 .mmh-ttl{font-size:min(48px,11.5vw)}}
/* chấm MÀU bấm được: nút 24×24 (vùng bấm), chấm nhìn thấy 14px; margin âm để chiều cao khối không đổi */
.mmh .mmh-rot .mmh-swatches{gap:0;margin-top:9px;margin-bottom:-5px}
.mmh .mmh-rot .mmh-sw{appearance:none;-webkit-appearance:none;background:none;border:0;padding:5px;margin:0;width:24px;height:24px;cursor:pointer;line-height:0;border-radius:50%;-webkit-tap-highlight-color:transparent;position:relative}
.mmh .mmh-rot .mmh-sw i{display:block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);transition:box-shadow .15s}
.mmh .mmh-rot .mmh-sw:hover i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 2px #f5f5f7,0 0 0 3px #a1a1a6}
.mmh .mmh-rot .mmh-sw.is-sel i,.mmh .mmh-rot .mmh-sw[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 2px #fff,0 0 0 3.5px #1d1d1f}
.mmh .mmh-rot .mmh-sw.is-noimg{cursor:default}
.mmh .mmh-rot .mmh-sw.is-noimg:hover i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.mmh .mmh-rot .mmh-sw:focus{outline:none}
.mmh .mmh-rot .mmh-sw:focus-visible{outline:2px solid #0071e3;outline-offset:0}
.mmh .mmh-rot .mmh-pimg{background:transparent}
@media(prefers-reduced-motion:reduce){.mmh .mmh-rot .mmh-slide,.mmh .mmh-rot .mmh-slide.is-active,.mmh .mmh-rot .mmh-pg span{transition:none}}
@media(prefers-reduced-motion:reduce){.mmh .mmh-rot .mmh-sw i{transition:none}}