:root {
  --navy-900:#0e1c46; --navy:#16255c; --navy-700:#1d2f6e;
  --gold:#b8912f; --gold-2:#caa445; --gold-soft:#e7d9b0;
  --ink:#20262f; --muted:#647084; --line:#dfe5f0; --paper:#f5f7fb; --tint:#eceff6;
  --serif:'Bai Jamjuree','Sarabun',sans-serif; --sans:'Sarabun',system-ui,sans-serif;
}
* { box-sizing:border-box; }
.gallery-page { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 88% 8%,rgba(184,145,47,.09),transparent 29rem),var(--paper); font-family:var(--sans); line-height:1.6; }
.gallery-page svg, .gallery-page img { display:block; }
.gallery-page a { text-decoration:none; }
.gallery-page .nav .wrap, .gallery-page .ubar .wrap { max-width:1180px; }
.gallery-main { max-width:1120px; margin:0 auto; padding:30px 20px 68px; }

.head {
  position:relative; overflow:hidden; min-height:250px; padding:42px 44px;
  display:flex; align-items:center; justify-content:space-between; gap:34px;
  border:1px solid rgba(184,145,47,.42); border-radius:24px;
  background:linear-gradient(118deg,#0e1c46 0%,#183477 72%,#24438a 100%);
  box-shadow:0 18px 44px rgba(14,28,70,.16); color:#fff;
}
.head::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:48px 48px; }
.head-copy,.gallery-visual { position:relative; z-index:1; }
.head-copy { max-width:650px; }
.head .kk { display:inline-flex; align-items:center; gap:9px; color:#e4c978; font-size:13px; font-weight:700; letter-spacing:.05em; }
.head .kk::before { content:""; width:28px; height:2px; background:var(--gold-2); }
.head h1 { margin:9px 0 10px; color:#fff; font:800 clamp(31px,4.4vw,47px)/1.15 var(--serif); }
.head h1 span { color:#e4c978; }
.head p { max-width:610px; margin:0; color:rgba(255,255,255,.76); font-size:15px; }
.gallery-visual { width:250px; height:170px; flex:0 0 250px; margin-right:16px; }
.photo-frame { position:absolute; width:122px; height:92px; border:1px solid rgba(255,255,255,.38); border-radius:14px; box-shadow:0 16px 28px rgba(0,0,0,.17); }
.photo-frame.one { left:8px; top:18px; transform:rotate(-10deg); background:rgba(255,255,255,.1); }
.photo-frame.two { right:3px; bottom:7px; transform:rotate(8deg); background:rgba(202,164,69,.28); }
.photo-frame.three { left:65px; top:37px; z-index:2; display:grid; place-items:center; transform:rotate(-2deg); background:#fff; color:var(--navy-700); }
.photo-frame.three svg { width:42px; height:42px; }

.main { padding-top:20px; }
.gallery-tools {
  margin-bottom:18px; padding:13px; display:grid; grid-template-columns:minmax(260px,1fr) 170px auto; align-items:center; gap:11px;
  border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 8px 26px rgba(15,32,74,.05);
}
.gallery-search { min-height:50px; margin:0; padding:0 14px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.gallery-search:focus-within { border-color:var(--navy-700); box-shadow:0 0 0 4px rgba(29,47,110,.1); }
.gallery-search svg { width:19px; height:19px; flex:none; color:#6f7b8f; }
.gallery-search input { width:100%; min-width:0; padding:0; border:0; outline:0; color:var(--ink); background:transparent; font:14.5px var(--sans); }
.gallery-search input::placeholder { color:#96a0b1; }
.gallery-tools select { min-height:50px; padding:0 13px; border:1px solid var(--line); border-radius:12px; outline:0; background:#fff; color:var(--navy-700); font:14px var(--sans); }
.gallery-tools select:focus { border-color:var(--navy-700); box-shadow:0 0 0 4px rgba(29,47,110,.1); }
.album-count { min-width:94px; min-height:50px; padding:8px 14px; display:flex; align-items:baseline; justify-content:center; gap:6px; border-radius:12px; background:#eef3ff; color:var(--navy-700); }
.album-count b { font:800 22px/1 var(--serif); }
.album-count span { font-size:11.5px; font-weight:700; }

.agrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:17px; }
.acard { overflow:hidden; width:100%; padding:0; display:block; border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer; text-align:left; font-family:inherit; transition:.18s; }
.acard:hover { transform:translateY(-2px); border-color:rgba(184,145,47,.56); box-shadow:0 14px 30px rgba(15,32,74,.1); }
.acard .cv { position:relative; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(145deg,#eef3fb,#e4eaf4); }
.acard .cv::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(7,17,48,.36)); pointer-events:none; }
.acard .cv img { width:100%; height:100%; object-fit:cover; transition:transform .28s; }
.acard:hover .cv img { transform:scale(1.035); }
.acard .cv .cnt { position:absolute; right:11px; bottom:11px; z-index:1; padding:5px 10px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(14,28,70,.84); color:#fff; font-size:12px; font-weight:700; }
.acard .bd { padding:16px; }
.acard .bd .t { color:var(--navy-900); font:700 17px/1.4 var(--serif); }
.acard .bd .d { margin-top:5px; color:var(--muted); font-size:13px; }

.album-toolbar { margin-bottom:13px; }
.btn { min-height:42px; padding:0 15px; display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px; cursor:pointer; font:700 13.5px var(--sans); }
.btn svg { width:17px; height:17px; }
.btn.outline { border-color:#cbd5e5; background:#fff; color:var(--navy-700); }
.btn.outline:hover { border-color:var(--navy-700); background:#f4f7fd; }
.alb-head { margin:0 0 17px; padding:21px 23px; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:14px; background:#fff; box-shadow:0 8px 26px rgba(15,32,74,.05); }
.alb-head > div > span { color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.05em; }
.alb-head h2 { margin:3px 0 0; color:var(--navy-900); font:800 27px/1.35 var(--serif); }
.alb-head .muted { margin-top:3px; color:var(--muted); font-size:14px; }
.phgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:13px; }
.phgrid .ph { overflow:hidden; aspect-ratio:4/3; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--tint); cursor:zoom-in; }
.phgrid .ph img { width:100%; height:100%; object-fit:cover; transition:.25s; }
.phgrid .ph:hover img { transform:scale(1.045); }

.state { grid-column:1/-1; min-height:320px; padding:48px 24px; display:grid; place-items:center; align-content:center; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--muted); text-align:center; }
.gallery-empty-icon { width:68px; height:68px; display:grid; place-items:center; border:1px solid #dbe5fb; border-radius:20px; background:#eef3ff; color:var(--navy-700); }
.gallery-empty-icon svg { width:32px; height:32px; }
.state h3 { margin:18px 0 5px; color:var(--navy-900); font:800 21px/1.35 var(--serif); }
.state p { max-width:460px; margin:0; font-size:14px; }
.state .btn { margin-top:18px; }
.sk { aspect-ratio:4/3; border-radius:16px; background:linear-gradient(90deg,var(--tint) 25%,#f8fafc 50%,var(--tint) 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.lb { position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(7,13,32,.95); }
.lb.open { display:flex; }
.lb img { max-width:90vw; max-height:84vh; border:4px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb-close { position:absolute; top:18px; right:22px; width:44px; height:44px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(255,255,255,.08); color:#fff; font-size:20px; cursor:pointer; }
.lb-nav { position:absolute; top:50%; width:50px; height:50px; border:1px solid rgba(255,255,255,.2); border-radius:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); color:#fff; font-size:32px; cursor:pointer; }
.lb-nav:hover,.lb-close:hover { background:rgba(255,255,255,.2); }
.lb-nav.prev { left:18px; } .lb-nav.next { right:18px; }
.lb-count { position:absolute; bottom:20px; left:50%; padding:5px 12px; border-radius:999px; transform:translateX(-50%); background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); font-size:13px; }

.ft { margin:0; padding:23px max(24px,calc((100vw - 1080px)/2)); display:flex; justify-content:space-between; gap:20px; background:var(--navy-900); color:rgba(255,255,255,.64); font-size:13px; }
.ft-links { display:flex; gap:18px; }
.ft a { color:inherit; }
.ft a:hover { color:var(--gold-2); }

@media (max-width:760px) {
  .gallery-main { padding:16px 12px 48px; }
  .head { min-height:0; padding:28px 24px; border-radius:18px; }
  .gallery-visual { display:none; }
  .head p { font-size:14px; }
  .gallery-tools { grid-template-columns:1fr auto; }
  .gallery-search { grid-column:1/-1; }
  .agrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .acard { border-radius:12px; }
  .acard .bd { padding:12px; }
  .acard .bd .t { font-size:14.5px; }
  .phgrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .alb-head { padding:18px; }
  .lb-nav { width:42px; height:42px; font-size:27px; }
  .lb-nav.prev { left:7px; } .lb-nav.next { right:7px; }
  .ft { align-items:center; flex-direction:column; text-align:center; }
}

@media (max-width:420px) {
  .head { padding:25px 21px; }
  .head h1 { font-size:29px; }
  .gallery-tools { padding:11px; }
  .gallery-tools select { min-width:0; }
  .album-count { min-width:82px; }
  .state { min-height:330px; }
}