/* ============================================================
   BUOC 3 — khuyen mai, chan trang, thanh dieu huong duoi (mobile)
   ============================================================ */

/* ---------- Khuyen mai ---------- */
.z-promos{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.z-promo{position:relative;overflow:hidden;border-radius:var(--z-r-lg);
  background:var(--z-fourth);box-shadow:inset 0 0 0 1px var(--z-line);
  transition:transform .18s}
.z-promo:hover{transform:translateY(-4px)}
.z-promo img{width:100%;aspect-ratio:640/237;object-fit:cover}
.z-promo__body{padding:15px 17px 18px}
.z-promo__body h3{margin:0 0 5px;font-size:15.5px;font-weight:700;color:#fff}
.z-promo__body p{margin:0 0 13px;font-size:13px;color:var(--z-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.z-promo__body .z-btn{height:34px;padding:0 16px;font-size:13px}

/* ---------- Chan trang ---------- */
.z-foot{
  margin-top:34px;padding:30px 0 0;
  background:var(--z-primary);
  border-top:1px solid var(--z-line);
  color:var(--z-footer);font-size:13.5px;
}

.z-foot__provs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;
  padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--z-line);
}
.z-foot__provs img{max-height:24px;width:auto;object-fit:contain;
  opacity:.65;filter:grayscale(1);transition:opacity .16s,filter .16s}
.z-foot__provs img:hover{opacity:1;filter:none}

.z-foot__grid{
  display:grid;gap:30px;grid-template-columns:1.6fr 1fr 1fr 1fr;
  padding-bottom:28px;
}
.z-foot__col h3{margin:0 0 12px;font-size:14px;font-weight:700;color:#fff}
.z-foot__col ul{list-style:none;margin:0;padding:0}
.z-foot__col li{margin-bottom:8px}
.z-foot__col a{color:var(--z-muted);font-size:13.5px}
.z-foot__col a:hover{color:var(--z-pink)}
.z-foot__col--brand img{max-height:46px;width:auto;margin-bottom:14px}
.z-foot__col--brand p{margin:0 0 16px;max-width:34em;line-height:1.7;color:var(--z-muted)}

.z-foot__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 0 24px;border-top:1px solid var(--z-line);
}
.z-foot__bottom p{margin:0;font-size:12.8px}
.z-age{
  display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;
  border:2px solid var(--z-pink);border-radius:50%;
  color:var(--z-pink);font-size:11.5px;font-weight:800;vertical-align:middle;
}

/* ---------- Thanh dieu huong duoi (chi tren dien thoai) ---------- */
.z-bottomnav{display:none}

@media (max-width:760px){
  .z-bottomnav{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--z-fourth);border-top:1px solid var(--z-line);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .z-bottomnav__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:54px;padding:7px 2px;
    color:var(--z-muted);font-size:10.5px;font-weight:600;line-height:1.15;
    -webkit-tap-highlight-color:transparent;
  }
  .z-bottomnav__item:hover{color:var(--z-pink)}
  /* Chua cho thanh duoi, tranh che chan trang */
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0))}
}

/* ---------- Man hinh nho ---------- */
@media (max-width:1000px){
  .z-promos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .z-foot__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:560px){
  .z-promos{grid-template-columns:1fr}
  .z-foot__grid{grid-template-columns:1fr;gap:24px}
  .z-foot__bottom{flex-direction:column;align-items:flex-start}
  .z-foot__provs{gap:12px 18px}
  .z-foot__provs img{max-height:20px}
}