/* /mau/ template gallery — Thiệp Cưới Hay visual identity (ivory paper, ink, antique gold, Cormorant + Manrope) */
.mg-body{background:#f8f4ee}
.mg-body .nav{background:rgba(248,244,238,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
html.mg-lock,html.mg-lock body{overflow:hidden}

/* hero */
.mg-hero{padding:104px 0 26px;background:
  radial-gradient(60% 80% at 100% 0%,rgba(196,165,116,.16),transparent 60%),
  linear-gradient(180deg,#fbf8f3 0%,#f8f4ee 100%)}
.mg-hero-inner{max-width:760px;text-align:center}
.mg-eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.mg-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,7.4vw,3.6rem);line-height:1.08;letter-spacing:-.01em}
.mg-hero h1 em{font-style:italic;color:#7a5f3d}
.mg-hero h1 span{font-variant-numeric:lining-nums}
.mg-lead{color:var(--muted);max-width:56ch;margin:16px auto 22px;font-size:.98rem}
.mg-search{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto;background:#fff;border:1px solid rgba(28,23,18,.1);border-radius:999px;padding:0 18px;box-shadow:0 10px 30px rgba(28,23,18,.06);transition:box-shadow .2s,border-color .2s}
.mg-search:focus-within{border-color:rgba(154,123,82,.55);box-shadow:0 0 0 4px rgba(196,165,116,.18),0 10px 30px rgba(28,23,18,.06)}
.mg-search svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;flex:none}
.mg-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:14px 0;color:var(--ink);outline:none}

/* filters */
.mg-filters{position:sticky;top:64px;z-index:20;background:rgba(248,244,238,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mg-filters-inner{padding:10px 0}
.mg-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;scroll-snap-type:x proximity}
.mg-chips::-webkit-scrollbar{display:none}
.mg-chip{flex:none;scroll-snap-align:start;border:1px solid rgba(28,23,18,.12);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:.85rem;cursor:pointer;transition:.2s;white-space:nowrap;min-height:40px}
.mg-chip small{font-size:.72rem;color:var(--muted);margin-left:2px}
.mg-chip:hover:not(:disabled){border-color:var(--gold)}
.mg-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.mg-chip[aria-pressed="true"] small{color:rgba(255,255,255,.65)}
.mg-chip:disabled{opacity:.4;cursor:default}

/* sections */
.mg-sec{padding:34px 0 8px}
.mg-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mg-sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.1}
.mg-count{color:var(--muted);font-size:.86rem}
.mg-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,46%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4vw;padding:4px 4vw 14px;margin:0 -4vw;scrollbar-width:none}
.mg-row::-webkit-scrollbar{display:none}
.mg-row>.mg-card{scroll-snap-align:start}
.mg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
#mgAllSec{padding-bottom:40px}

/* card */
.mg-card{display:flex;flex-direction:column;min-width:0}
.mg-card-media{position:relative;display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;border-radius:16px;overflow:hidden;background:#ece5da;cursor:pointer;box-shadow:0 0 0 1px rgba(28,23,18,.06),0 14px 30px -18px rgba(28,23,18,.35);transition:transform .35s var(--ease),box-shadow .35s}
.mg-card-media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.mg-flag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.94);color:var(--ink);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.mg-card-hover{position:absolute;inset:auto 0 0;display:flex;justify-content:center;padding:40px 0 16px;background:linear-gradient(transparent,rgba(20,17,14,.55));opacity:0;transition:opacity .3s}
.mg-card-hover span{color:#fff;font-size:.85rem;letter-spacing:.06em;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:7px 16px}
.mg-card-media:focus-visible{outline:none;box-shadow:0 0 0 3px #f8f4ee,0 0 0 5px var(--gold)}
@media (hover:hover){
  .mg-card-media:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(28,23,18,.06),0 24px 40px -20px rgba(28,23,18,.45)}
  .mg-card-media:hover img{transform:scale(1.03)}
  .mg-card-media:hover .mg-card-hover{opacity:1}
}
.mg-card-body{padding:12px 2px 0;display:grid;gap:4px}
.mg-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.mg-card h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-sw{display:flex;flex:none}
.mg-sw i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1.5px #f8f4ee,inset 0 0 0 1px rgba(0,0,0,.12);margin-left:-3px}
.mg-card-style{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.mg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:999px;font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap;padding:0 10px}
.mg-btn-ghost{background:transparent;border:1px solid rgba(28,23,18,.16);color:var(--ink)}
.mg-btn-ghost:hover{border-color:var(--ink)}
.mg-btn-solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.mg-btn-solid:hover{background:#3a2f25}
.mg-empty{text-align:center;padding:40px 0;color:var(--muted);display:grid;gap:14px;justify-items:center}
.mg-empty[hidden]{display:none}
.mg-error{grid-column:1/-1;color:#9b3b2b;padding:30px 0;text-align:center}

/* classic */
.mg-classic{padding-bottom:60px}
.mg-classic-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,46%);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4vw;padding:4px 4vw 14px;margin:0 -4vw;scrollbar-width:thin}
.mg-classic-card{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;color:inherit;text-decoration:none}
.mg-classic-media{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#ece5da;box-shadow:0 0 0 1px rgba(28,23,18,.06),0 14px 30px -18px rgba(28,23,18,.35);transition:transform .35s var(--ease),box-shadow .35s}
.mg-classic-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.mg-classic-card:focus-visible{outline:none}
.mg-classic-card:focus-visible .mg-classic-media{box-shadow:0 0 0 3px #f8f4ee,0 0 0 5px var(--gold)}
@media (hover:hover){
  .mg-classic-card:hover .mg-classic-media{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(28,23,18,.06),0 24px 40px -20px rgba(28,23,18,.45)}
  .mg-classic-card:hover .mg-classic-media img{transform:scale(1.03)}
  .mg-classic-card:hover .mg-card-hover{opacity:1}
}
.mg-classic-body{padding:12px 2px 0;display:grid;gap:4px;min-width:0}
.mg-classic-card b{display:block;font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-classic-card small{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modal */
.mg-modal{position:fixed;inset:0;z-index:100;display:grid;grid-template-rows:auto 1fr;background:#1b1714}
.mg-modal[hidden]{display:none}
.mg-m-bar{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"close title use" "seg seg nav";align-items:center;gap:8px 10px;padding:10px 12px calc(10px);color:#f4ede3;background:#1b1714;border-bottom:1px solid rgba(255,255,255,.08)}
.mg-m-icon{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer}
.mg-m-icon:hover{background:rgba(255,255,255,.08)}
.mg-m-icon svg,.mg-m-seg svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#mgMClose{grid-area:close}
.mg-m-title{grid-area:title;min-width:0;display:grid}
.mg-m-title b{font-family:var(--serif);font-weight:500;font-size:1.2rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-m-title span{font-size:.74rem;color:rgba(244,237,227,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-m-seg{grid-area:seg;display:flex;gap:2px;background:rgba(255,255,255,.07);border-radius:999px;padding:3px;justify-self:start}
.mg-m-seg button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:rgba(244,237,227,.75);border-radius:999px;padding:7px 12px;font:inherit;font-size:.8rem;cursor:pointer;min-height:36px}
.mg-m-seg button[aria-pressed="true"]{background:#f4ede3;color:#1b1714}
.mg-m-nav{grid-area:nav;display:flex;gap:6px;justify-self:end}
.mg-m-use{grid-area:use;padding:10px 16px;font-size:.84rem;white-space:nowrap;background:#f4ede3;color:#1b1714;box-shadow:none}
.mg-m-use:hover{background:#fff}
.mg-m-stage{position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(70% 60% at 50% 40%,#2b2520,#15120f)}
.mg-m-device{background:#fff;overflow:hidden;transform-origin:center center;flex:none}
.mg-m-device iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.mg-m-stage[data-frame="mobile"] .mg-m-device{border-radius:44px;box-shadow:0 0 0 11px #0c0a09,0 0 0 12px #3b342d,0 40px 80px rgba(0,0,0,.5)}
.mg-m-stage[data-frame="desktop"] .mg-m-device{border-radius:10px;box-shadow:0 0 0 1px #3b342d,0 40px 80px rgba(0,0,0,.5)}
.mg-m-stage[data-frame="full"]{place-items:stretch}
.mg-m-stage[data-frame="full"] .mg-m-device{width:100%;height:100%;border-radius:0;transform:none!important;margin:0!important}
@media (max-width:719px){
  .mg-m-seg span{display:none}
  .mg-m-seg button{padding:7px 12px}
  .mg-m-stage[data-frame="mobile"] {place-items:stretch}
  .mg-m-stage[data-frame="mobile"] .mg-m-device{width:100%;height:100%;border-radius:0;box-shadow:none;transform:none!important;margin:0!important}
}

/* larger screens */
@media (min-width:640px){
  .mg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}
  .mg-row{grid-auto-columns:minmax(220px,30%)}
  .mg-classic-row{grid-auto-columns:minmax(220px,30%)}
}
@media (min-width:720px){
  .mg-m-bar{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"close title seg nav use";padding:12px 18px}
  .mg-m-seg{justify-self:center}
}
@media (min-width:1000px){
  .mg-hero{padding:128px 0 34px}
  .mg-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
  .mg-row{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:4px 0 10px;gap:22px}
  .mg-sec{padding-top:46px}
  .mg-classic-row{grid-auto-columns:calc((100% - 66px) / 4);gap:22px;margin:0;padding:4px 0 14px;scroll-padding-inline:0}
}
@media (prefers-reduced-motion:reduce){.mg-card-media,.mg-card-media img,.mg-classic-media,.mg-classic-media img{transition:none}}