/* Lớp tối ưu điện thoại dùng chung cho index, san-pham, dat-hang. Nạp sau CSS riêng của từng trang.
   Gồm: nút Menu + menu toàn màn hình, thanh Gọi/Zalo/Báo giá dưới đáy, rút gọn bố cục từng trang. */

/* ---------- Menu ---------- */
.m-menu-btn{display:none;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.m-menu-btn svg{width:18px;height:18px}
.m-menu{position:fixed;inset:0;z-index:70;background:var(--paper);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
.m-menu .m-top{display:flex;justify-content:space-between;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid var(--line)}
.m-menu .m-top b{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:.16em}
.m-close{width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;cursor:pointer}
.m-menu nav{display:grid}
.m-menu nav a{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:22px;text-decoration:none;color:var(--ink)}
.m-menu nav a span{color:var(--brass);font-family:var(--f-body);font-size:18px}
.m-menu nav a.trial{color:#3F6B4E}
.m-menu .m-contact{display:grid;gap:10px;padding:20px 16px}
.m-menu .m-contact a{display:flex;justify-content:center;align-items:center;min-height:48px;font:600 15px var(--f-body);text-decoration:none;border:1px solid var(--ink);color:var(--ink)}
.m-menu .m-contact a.m-call{background:var(--ink);color:var(--paper)}
.m-menu .m-contact p{margin:4px 0 0;font-size:14px;color:var(--ink-2);text-align:center}

/* ---------- Thanh liên hệ dưới đáy ---------- */
.m-dock,.m-swipe{display:none}

@media (max-width:960px){
  .m-menu-btn{display:inline-flex}
}

@media (max-width:760px){
  .m-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
  .m-dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;font:600 14px var(--f-body);text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line)}
  .m-dock a svg{width:17px;height:17px;flex:none}
  .m-dock a.main{background:var(--brass);border-color:var(--brass);color:#fff}
  body.has-dock{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .float-zalo{display:none!important}
  .bar .btn.sm{display:none}

  /* chữ nhỏ và vùng bấm */
  .tag,.stamp,.way-tag,.tb-tag,.pj .meta span,.sw span,#slideLabel,.cats a .n,.card .spec{font-size:12px!important}
  dt{font-size:12px}
  footer a,.info a.ct{display:inline-block;padding-block:8px}
  .way-links a{display:block;padding-block:8px}

  /* ===== Trang chủ ===== */
  section.block{padding-block:52px}
  .head{margin-bottom:26px}
  .head h2{font-size:30px}
  /* bộ lọc dự án: một hàng vuốt ngang */
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none;margin-bottom:18px}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;min-height:40px}
  /* dự án: băng ảnh vuốt ngang thay cho 7 ảnh xếp dọc */
  .gallery{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .pj,.pj.w8,.pj.w6,.pj.tall{flex:0 0 66%;scroll-snap-align:start;margin-top:0!important}
  .pj .ph,.pj.w8 .ph,.pj.tall .ph{aspect-ratio:3/4}
  .pj .meta b{font-size:22px}
  .m-swipe{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ink-2)}
  .m-swipe::after{content:"→";color:var(--brass)}
  /* dịch vụ: thẻ vuốt ngang */
  .services{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;border:0!important}
  .services::-webkit-scrollbar{display:none}
  .svc,.svc+.svc{flex:0 0 80%;scroll-snap-align:start;padding:20px 18px 22px!important;border:1px solid var(--line)!important;background:#fff}
  .svc h3{font-size:22px}
  /* cách mua */
  .buy-ways{gap:18px}
  .way-img{aspect-ratio:16/9}
  .way-body{padding:18px 18px 22px;gap:10px}
  .way-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 14px;font-size:14px}
  .trial-bar{padding:16px 18px}
  /* vật liệu: 3 cột ô vuông */
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
  .chip{aspect-ratio:1/1}
  .sw b{font-size:13.5px;line-height:1.3}
  /* quy trình: gọn hơn */
  ol.steps:not(#steps) li{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:18px 0}
  ol.steps:not(#steps) .n{font-size:30px}
  ol.steps:not(#steps) h3{font-size:20px;margin-bottom:4px}
  ol.steps:not(#steps) p{font-size:14.5px}

  /* trang chủ gọn hơn */
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .strip .wrap>div{padding:14px 12px!important;border-left:0!important;border-top:1px solid var(--line);font-size:13px}
  .strip .wrap>div:nth-child(-n+2){border-top:0}
  .strip .wrap>div:nth-child(odd){padding-left:0!important}
  .strip b{font-size:16.5px}
  section.block{padding-block:40px}
  .way-links{display:none!important}
  .way-img{aspect-ratio:2/1}
  .stack .ph{aspect-ratio:4/3}
  .stack .ph.small{width:42%}
  .stack{margin-bottom:10px}
  .callband{display:none}
  ol.steps:not(#steps){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;border:0}
  ol.steps:not(#steps)::-webkit-scrollbar{display:none}
  ol.steps:not(#steps) li{flex:0 0 78%;scroll-snap-align:start;display:block;border:1px solid var(--line);background:#fff;padding:14px 16px}
  .faq summary{padding-block:12px;font-size:17px}
  .info dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .info dl>div:nth-child(2),.info dl>div:nth-child(4){grid-column:1/-1}
  .info dd{font-size:15.5px}

  /* ===== Trang sản phẩm ===== */
  .intro .wrap{padding-block:28px 14px!important}
  .intro h1{font-size:34px}
  /* 3 thẻ loại sản phẩm: gọn, bỏ đoạn mô tả */
  .types .wrap{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px;padding-block:4px 18px}
  .type-card{padding:12px 10px;gap:2px}
  .type-card .ic{font-size:11px}
  .type-card b{font-size:15px;line-height:1.25}
  .type-card p{display:none}
  .type-card .n{font-size:12px}
  .type-card[aria-pressed="true"] .n::after{content:""}
  .badge.trial{top:34px}
  .cats{top:calc(66px + env(safe-area-inset-top,0px))}
  .cats a{padding:10px 14px}
  .cat{padding-block:36px}
  .cat-head{margin-bottom:18px}
  .cat-head h2{font-size:28px}
  /* lưới sản phẩm 2 cột, thẻ chỉ giữ ảnh, tên, giá */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .card .body{padding:10px 11px 12px;gap:4px}
  .card h3{font-size:15.5px;line-height:1.3}
  .card p,.card .more{display:none}
  .card .foot{margin-top:2px;padding-top:6px;font-size:12.5px;line-height:1.35}
  .card .ph .badge{right:6px;top:6px;padding:2px 6px;font-size:10.5px}
  .card .ph .badge.trial{top:28px}
  .km-img{min-height:200px}
  .trial-box{padding:20px 18px}
  .trial-box.kemini{padding:0}
  .km-acts .btn{width:100%;justify-content:center;text-align:center}

  /* ===== Trang đặt hàng ===== */
  .bar .back{font-size:13.5px}
  #steps{flex-wrap:nowrap;gap:6px;padding-block:14px 2px}
  #steps li{font-size:13px;gap:6px}
  #steps li:not(.on){font-size:0;gap:0}
  #steps li+li::before{width:14px;margin-right:6px}
  .layout{gap:16px;padding-block:10px 40px}
  /* tóm tắt đơn: không dính, ảnh thu nhỏ bên trái */
  .summary{position:static!important;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:14px;align-items:start}
  .summary>*{grid-column:2}
  .summary .ph{grid-column:1;grid-row:1/3;margin:0!important;aspect-ratio:1/1}
  .summary h3{font-size:18px;line-height:1.25}
  .summary .meta{margin:4px 0 10px}
  .summary .rows,.summary .small{grid-column:1/-1}
}

@media (max-width:420px){
  .logo span{display:none}
}