/*
 * MANSION - Bento Grid trang chu (v2.1) - assets/mansion-bento.css (child theme)
 * - VI TRI cac o (desktop / tablet / mobile): sua o phan "BO CUC" (.mns-bi-slot-N).
 * - Bo cuc doi theo CHIEU RONG KHUNG CHUA (container query 640 / 960px); trinh duyet cu dung media query (phan "DU PHONG").
 * - Font: Roboto cua theme (khong tai them font). Khong url(), @import, style noi tuyen -> hop CSP, khong them request.
 * - Mau chu dao: chi sua 2 dong --mns-gold-rgb / --mns-gold-hi-rgb (dang R,G,B; cam thuong hieu #FFA300 = 255,163,0).
 * - Do dam vien: --mns-bw (man hinh thuong) va --mns-line (do dac).
 */
.mns-bento{
  --mns-gold-rgb:216,181,106;
  --mns-gold-hi-rgb:241,222,166;
  --mns-gold-hi:rgb(var(--mns-gold-hi-rgb));
  --mns-card:#15120d;
  --mns-ivory:#f5f0e4;
  --mns-muted:#d3ccbc;
  --mns-bw:2px;
  --mns-line:rgba(var(--mns-gold-rgb),.82);
  --mns-radius:3px;
  --mns-max:1400px;
  --mns-ease:cubic-bezier(.22,1,.36,1);
  --mns-font:Roboto,system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  container-type:inline-size;
  container-name:mns-bento;
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:var(--mns-max);
  margin:0 auto;
  padding:4px;
  border:0;
  background:none;
  color:var(--mns-ivory);
  font:400 16px/1.4 var(--mns-font);
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
  text-indent:0;
  text-shadow:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
@media (min-resolution:1.5dppx){.mns-bento{--mns-bw:1.5px}}
.mns-bento *,.mns-bento *::before,.mns-bento *::after{box-sizing:border-box}

/* ---------- LUOI: 36 cot x N hang, o vuong -> ty le khung = 36 : hang ---------- */
.mns-bento .mns-bento-grid{
  --mns-rows:103;--mns-gap:6px;--mns-pad:13px;--mns-inset:6px;--mns-name:15px;--mns-sub:11.5px;
  display:grid;
  grid-template-columns:repeat(36,minmax(0,1fr));
  grid-template-rows:repeat(var(--mns-rows),minmax(0,1fr));
  aspect-ratio:36 / var(--mns-rows);
  gap:var(--mns-gap);
  width:100%;margin:0;padding:0;border:0;background:none;list-style:none;
}
.mns-bento .mns-bi-item{position:relative;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;background:none;list-style:none}
.mns-bento .mns-bi-item::before,.mns-bento .mns-bi-item::after{content:none;display:none}

/* ---------- O (the) ---------- */
.mns-bento .mns-bi{all:unset;position:absolute;inset:0;display:block;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mns-bento .mns-bi-card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  margin:0;padding:var(--mns-pad);
  overflow:hidden;isolation:isolate;
  border:var(--mns-bw) solid var(--mns-line);
  border-radius:var(--mns-radius);
  background:linear-gradient(155deg,#2a2218 0%,var(--mns-card) 55%,#0e0c09 100%);
  color:var(--mns-ivory);
  transition:border-color .5s ease,box-shadow .5s ease;
}
/* Anh la <img> that (co alt, srcset, lazy-load native), khong dung background-image inline */
.mns-bento .mns-bi-card .mns-bi-img{
  position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;min-width:0;max-width:none;
  margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;filter:none;opacity:1;float:none;
  object-fit:cover;object-position:center;
  transform:scale(1.001);
  transition:transform 1.2s var(--mns-ease);
}
.mns-bento .mns-bi-img[data-focus="top"]{object-position:center top}
.mns-bento .mns-bi-img[data-focus="bottom"]{object-position:center bottom}
.mns-bento .mns-bi-img[data-focus="left"]{object-position:left center}
.mns-bento .mns-bi-img[data-focus="right"]{object-position:right center}

/* Phu toi nhe phan duoi cho co chieu sau (do doc cua chu do .mns-bi-text::before dam bao) */
.mns-bento .mns-bi-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,5,0) 45%,rgba(8,7,5,.26) 100%);
}
/* Duong chi vang mong ben trong (khung tranh) - diem nhan duy nhat cua luoi */
.mns-bento .mns-bi-card::after{
  content:"";position:absolute;inset:var(--mns-inset);z-index:4;pointer-events:none;
  border:1px solid rgba(var(--mns-gold-hi-rgb),.46);
  border-radius:1px;
  transition:border-color .6s ease;
}

/* ---------- CHU (Roboto) ---------- */
.mns-bento .mns-bi-text{position:relative;z-index:3;display:block;min-width:0;margin:0;padding:0}
/* Nen toi di THEO KHOI CHU: doc ro tren moi anh (ke ca anh trang) ma phan tren cua anh van giu mau */
.mns-bento .mns-bi-text::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(var(--mns-name) * -2.4);right:calc(var(--mns-pad) * -1);bottom:calc(var(--mns-pad) * -1);left:calc(var(--mns-pad) * -1);
  background:linear-gradient(180deg,rgba(8,7,5,0) 0%,rgba(8,7,5,.74) 40%,rgba(8,7,5,.93) 100%);
}
.mns-bento .mns-bi-label{
  display:block;margin:0;padding:0;
  color:var(--mns-ivory);
  font:500 var(--mns-name)/1.16 var(--mns-font);
  letter-spacing:-.01em;text-align:left;text-transform:none;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  text-wrap:balance;overflow-wrap:break-word;
}
.mns-bento .mns-bi-count{
  display:block;margin:.4em 0 0;padding:0;
  color:var(--mns-muted);
  font:400 var(--mns-sub)/1.35 var(--mns-font);
  letter-spacing:.015em;text-align:left;text-transform:none;
  text-shadow:0 1px 10px rgba(0,0,0,.6);
  overflow-wrap:break-word;
}

/* ============================== BO CUC ==============================
 * grid-area: hang-bat-dau / cot-bat-dau / span so-hang / span so-cot   (don vi = 1/36 chieu rong)
 * Mac dinh = MOBILE (khung chua < 640px).
 */
.mns-bento .mns-bi-slot-1{grid-area:1/1/span 20/span 18}
.mns-bento .mns-bi-slot-2{grid-area:1/19/span 20/span 18}
.mns-bento .mns-bi-slot-3{grid-area:21/1/span 17/span 18}
.mns-bento .mns-bi-slot-4{grid-area:38/1/span 18/span 36}
.mns-bento .mns-bi-slot-5{grid-area:21/19/span 17/span 18}
.mns-bento .mns-bi-slot-6{grid-area:56/19/span 16/span 18}
.mns-bento .mns-bi-slot-7{grid-area:56/1/span 32/span 18}
.mns-bento .mns-bi-slot-8{grid-area:72/19/span 16/span 18}
.mns-bento .mns-bi-slot-9{grid-area:88/1/span 16/span 36}

/* Khung chua >= 640px: TABLET;  >= 960px: DESKTOP (container query) */
@supports (container-type:inline-size){
  .mns-bento .mns-bento-grid{
    --mns-rows:103;
    --mns-gap:clamp(6px,1.6cqw,9px);
    --mns-pad:clamp(13px,3.4cqw,18px);
    --mns-inset:clamp(6px,1.6cqw,9px);
    --mns-name:clamp(15px,2.2cqw + 7px,20px);
    --mns-sub:clamp(11.5px,1.1cqw + 7.5px,13.5px);
  }
  @container mns-bento (min-width:640px){
    .mns-bento .mns-bento-grid{
      --mns-rows:63;
      --mns-gap:clamp(8px,1.2cqw,12px);
      --mns-pad:clamp(16px,2.6cqw,24px);
      --mns-inset:clamp(8px,1.4cqw,12px);
      --mns-name:clamp(18px,2.1cqw + 2px,26px);
      --mns-sub:clamp(12.5px,1cqw + 5px,15px);
    }
    .mns-bento .mns-bi-slot-1{grid-area:1/1/span 14/span 12}
    .mns-bento .mns-bi-slot-2{grid-area:15/25/span 13/span 12}
    .mns-bento .mns-bi-slot-3{grid-area:1/13/span 14/span 24}
    .mns-bento .mns-bi-slot-4{grid-area:15/1/span 13/span 24}
    .mns-bento .mns-bi-slot-5{grid-area:28/13/span 12/span 24}
    .mns-bento .mns-bi-slot-6{grid-area:40/13/span 12/span 12}
    .mns-bento .mns-bi-slot-7{grid-area:28/1/span 24/span 12}
    .mns-bento .mns-bi-slot-8{grid-area:40/25/span 12/span 12}
    .mns-bento .mns-bi-slot-9{grid-area:52/1/span 12/span 36}
  }
  @container mns-bento (min-width:960px){
    .mns-bento .mns-bento-grid{
      --mns-rows:15;
      --mns-gap:clamp(8px,.8cqw,12px);
      --mns-pad:clamp(15px,1.5cqw,26px);
      --mns-inset:clamp(8px,.9cqw,13px);
      --mns-name:clamp(17px,1.5cqw + 2px,28px);
      --mns-sub:clamp(12px,.6cqw + 5px,14.5px);
    }
    .mns-bento .mns-bi-slot-1{grid-area:1/1/span 10/span 6}
    .mns-bento .mns-bi-slot-2{grid-area:1/7/span 10/span 6}
    .mns-bento .mns-bi-slot-3{grid-area:1/13/span 10/span 12}
    .mns-bento .mns-bi-slot-4{grid-area:1/25/span 5/span 12}
    .mns-bento .mns-bi-slot-5{grid-area:11/1/span 5/span 12}
    .mns-bento .mns-bi-slot-6{grid-area:6/31/span 5/span 6}
    .mns-bento .mns-bi-slot-7{grid-area:6/25/span 10/span 6}
    .mns-bento .mns-bi-slot-8{grid-area:11/31/span 5/span 6}
    .mns-bento .mns-bi-slot-9{grid-area:11/13/span 5/span 12}
  }
}

/* ============================== DU PHONG ==============================
 * Trinh duyet chua ho tro container query: dung chieu rong man hinh.
 */
@supports not (container-type:inline-size){
  .mns-bento .mns-bento-grid{
    --mns-rows:103;
    --mns-gap:clamp(6px,1.6vw,9px);
    --mns-pad:clamp(13px,3.4vw,18px);
    --mns-inset:clamp(6px,1.6vw,9px);
    --mns-name:clamp(15px,2.2vw + 7px,20px);
    --mns-sub:clamp(11.5px,1.1vw + 7.5px,13.5px);
  }
  @media (min-width:640px){
    .mns-bento .mns-bento-grid{
      --mns-rows:63;
      --mns-gap:clamp(8px,1.2vw,12px);
      --mns-pad:clamp(16px,2.6vw,24px);
      --mns-inset:clamp(8px,1.4vw,12px);
      --mns-name:clamp(18px,2.1vw + 2px,26px);
      --mns-sub:clamp(12.5px,1vw + 5px,15px);
    }
    .mns-bento .mns-bi-slot-1{grid-area:1/1/span 14/span 12}
    .mns-bento .mns-bi-slot-2{grid-area:15/25/span 13/span 12}
    .mns-bento .mns-bi-slot-3{grid-area:1/13/span 14/span 24}
    .mns-bento .mns-bi-slot-4{grid-area:15/1/span 13/span 24}
    .mns-bento .mns-bi-slot-5{grid-area:28/13/span 12/span 24}
    .mns-bento .mns-bi-slot-6{grid-area:40/13/span 12/span 12}
    .mns-bento .mns-bi-slot-7{grid-area:28/1/span 24/span 12}
    .mns-bento .mns-bi-slot-8{grid-area:40/25/span 12/span 12}
    .mns-bento .mns-bi-slot-9{grid-area:52/1/span 12/span 36}
  }
  @media (min-width:960px){
    .mns-bento .mns-bento-grid{
      --mns-rows:15;
      --mns-gap:clamp(8px,.8vw,12px);
      --mns-pad:clamp(15px,1.5vw,26px);
      --mns-inset:clamp(8px,.9vw,13px);
      --mns-name:clamp(17px,1.5vw + 2px,28px);
      --mns-sub:clamp(12px,.6vw + 5px,14.5px);
    }
    .mns-bento .mns-bi-slot-1{grid-area:1/1/span 10/span 6}
    .mns-bento .mns-bi-slot-2{grid-area:1/7/span 10/span 6}
    .mns-bento .mns-bi-slot-3{grid-area:1/13/span 10/span 12}
    .mns-bento .mns-bi-slot-4{grid-area:1/25/span 5/span 12}
    .mns-bento .mns-bi-slot-5{grid-area:11/1/span 5/span 12}
    .mns-bento .mns-bi-slot-6{grid-area:6/31/span 5/span 6}
    .mns-bento .mns-bi-slot-7{grid-area:6/25/span 10/span 6}
    .mns-bento .mns-bi-slot-8{grid-area:11/31/span 5/span 6}
    .mns-bento .mns-bi-slot-9{grid-area:11/13/span 5/span 12}
  }
}

/* ============================== TUONG TAC ============================== */
@media (hover:hover){
  .mns-bento .mns-bi:hover .mns-bi-img{transform:scale(1.05)}
  .mns-bento .mns-bi:hover .mns-bi-card{
    border-color:var(--mns-gold-hi);
    box-shadow:0 26px 50px -30px rgba(var(--mns-gold-rgb),.6);
  }
  .mns-bento .mns-bi:hover .mns-bi-card::after{border-color:rgba(var(--mns-gold-hi-rgb),.9)}
}
/* Ban phim: nhu hover + vong focus ro rang */
.mns-bento .mns-bi:focus-visible .mns-bi-img{transform:scale(1.05)}
.mns-bento .mns-bi:focus-visible .mns-bi-card{border-color:var(--mns-gold-hi);outline:2px solid var(--mns-gold-hi);outline-offset:2px}
.mns-bento .mns-bi:focus-visible .mns-bi-card::after,
.mns-bento .mns-bi:active .mns-bi-card::after{border-color:rgba(var(--mns-gold-hi-rgb),.9)}

/* ============================== TRO NANG ============================== */
@media (prefers-reduced-motion:reduce){
  .mns-bento .mns-bi-img,.mns-bento .mns-bi-card,.mns-bento .mns-bi-card::after{transition-duration:.01ms}
  .mns-bento .mns-bi:hover .mns-bi-img,.mns-bento .mns-bi:focus-visible .mns-bi-img{transform:none}
}
@media (forced-colors:active){
  .mns-bento .mns-bi-card{border:1px solid CanvasText}
  .mns-bento .mns-bi-card::before,.mns-bento .mns-bi-card::after{display:none}
  .mns-bento .mns-bi-text{background:Canvas;color:CanvasText;padding:.45em .7em;align-self:flex-start}
  .mns-bento .mns-bi-label,.mns-bento .mns-bi-count{color:CanvasText;text-shadow:none}
}