:root { color-scheme: light; --cream:#fffaf6; --paper:#fff; --blush:#f8e6e3; --wine:#7f2436; --wine-dark:#571421; --ink:#301b1e; --muted:#786266; --line:#ead7d4; --serif:"DM Serif Display",Georgia,serif; --sans:"Be Vietnam Pro",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--cream); color:var(--ink); font-family:var(--sans); }
button,input,select { font:inherit; }
.gallery-header { padding:0 24px 70px; background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.85),transparent 30%),linear-gradient(135deg,#f7d9d8,#edbab9); }
.gallery-header nav { display:flex; width:min(1200px,100%); min-height:72px; align-items:center; justify-content:space-between; margin:auto; border-bottom:1px solid rgba(127,36,54,.13); }
.gallery-header nav > a:last-child { color:var(--wine-dark); font-size:.78rem; font-weight:700; text-decoration:none; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--wine-dark); font-family:var(--serif); font-size:1.25rem; text-decoration:none; }
.brand__logo { width:52px; height:52px; border:1px solid rgba(127,36,54,.35); border-radius:50%; background:white; object-fit:cover; box-shadow:0 6px 18px rgba(87,20,33,.1); }
.gallery-hero { width:min(1200px,100%); margin:65px auto 0; }
.gallery-hero p { margin:0 0 12px; color:var(--wine); font-size:.7rem; font-weight:700; letter-spacing:.15em; }
.gallery-hero h1 { margin:0; color:var(--wine-dark); font-family:var(--serif); font-size:clamp(3.5rem,8vw,7rem); font-weight:400; line-height:.9; }
.gallery-hero > span { display:block; margin-top:22px; color:#6e4951; }
.gallery-container { width:min(1240px,calc(100% - 32px)); margin:-30px auto 90px; }
.admin-notice { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 16px; padding:15px 20px; border:1px solid #d7b36b; border-radius:16px; background:#fff3d7; color:#6d4611; box-shadow:0 12px 32px rgba(87,20,33,.09); }
.admin-notice strong { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.admin-notice span { font-size:.78rem; }
.admin-notice--error { border-color:#d69a9a; background:#fff4f3; color:#722b37; }
.admin-view .gallery-hero > p::after { content:" · CHẾ ĐỘ QUẢN TRỊ"; }
.event-picker,.selected-event { padding:34px; border:1px solid rgba(255,255,255,.8); border-radius:26px; background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(87,20,33,.11); }
.event-picker__heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:28px; }
.event-picker__heading > p { max-width:470px; margin:0; color:var(--muted); font-size:.84rem; line-height:1.7; }
.section-kicker { margin:0 0 9px; color:var(--wine); font-size:.68rem; font-weight:700; letter-spacing:.14em; }
.event-picker h2,.selected-event h2 { margin:0; color:var(--wine-dark); font-family:var(--serif); font-size:clamp(2rem,5vw,4rem); font-weight:400; line-height:1; }
.event-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.event-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 8px 25px rgba(87,20,33,.07); }
.event-card button { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.event-card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--blush); transition:transform .3s; }
.event-card:hover img { transform:scale(1.035); }
.event-card button > div { padding:18px; }
.event-card__date { color:var(--wine); font-size:.68rem; font-weight:700; }
.event-card h3 { margin:7px 0; overflow:hidden; color:var(--wine-dark); font-family:var(--serif); font-size:1.55rem; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.event-card p { margin:0 0 15px; color:var(--muted); font-size:.75rem; }
.event-card strong { color:var(--wine); font-size:.75rem; }
.selected-event { margin-bottom:18px; background:linear-gradient(135deg,#fff,#faece9); }
.back-button { margin:0 0 24px; padding:0; border:0; background:transparent; color:var(--wine); font-weight:700; cursor:pointer; }
.selected-event__layout { display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; }
.selected-event__meta { color:var(--muted); }
.event-link { display:grid; gap:7px; margin-top:22px; }
.event-link span { color:var(--muted); font-size:.7rem; font-weight:700; }
.event-link code { max-width:720px; padding:12px 14px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:white; color:var(--wine-dark); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.event-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.button--secondary-dark { border:1px solid var(--line); background:white; color:var(--wine-dark); }
.event-action-status { min-height:20px; margin:10px 0 0; color:var(--wine); font-size:.74rem; }
.event-qr-card { display:grid; width:190px; gap:9px; place-items:center; padding:14px; border:1px solid var(--line); border-radius:18px; background:white; color:var(--muted); font-size:.68rem; }
.event-qr-card canvas { width:160px; height:160px; image-rendering:pixelated; }
.toolbar { display:grid; grid-template-columns:minmax(150px,.8fr) minmax(230px,1.35fr) repeat(2,minmax(125px,.65fr)) auto; gap:14px; align-items:end; padding:20px; border:1px solid rgba(255,255,255,.8); border-radius:22px; background:rgba(255,255,255,.92); box-shadow:0 18px 55px rgba(87,20,33,.11); backdrop-filter:blur(14px); }
[hidden] { display:none!important; }
.toolbar label { display:grid; gap:8px; }
.toolbar label > span { color:var(--muted); font-size:.74rem; font-weight:700; }
select,input { width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:12px; outline:none; background:var(--paper); color:var(--ink); }
select:focus,input:focus { border-color:var(--wine); box-shadow:0 0 0 3px rgba(127,36,54,.12); }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 19px; border:0; border-radius:999px; background:var(--wine); color:white; font-weight:700; cursor:pointer; }
.button--secondary { border:1px solid rgba(255,255,255,.35); background:transparent; }
.button--danger { background:#c93636; color:white; }
.button--danger:hover { background:#a82020; }
.button:disabled { opacity:.6; cursor:wait; }
.status-row { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:15px; color:var(--muted); font-size:.82rem; }
.status-row p { margin:0; }
.status-text--error { color:var(--wine); font-weight:600; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; }
.photo-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--paper); box-shadow:0 8px 25px rgba(87,20,33,.07); transition:transform .2s,box-shadow .2s; }
.photo-card:hover { transform:translateY(-4px); box-shadow:0 18px 45px rgba(87,20,33,.13); }
.photo-card__button { display:block; width:100%; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.photo-card__media { position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--blush); }
.photo-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.photo-card:hover img { transform:scale(1.03); }
.photo-card__badge { position:absolute; top:11px; left:11px; padding:7px 9px; border-radius:999px; background:rgba(87,20,33,.8); color:white; font-size:.65rem; font-weight:700; backdrop-filter:blur(6px); }
.photo-card__play-indicator { position:absolute; right:11px; bottom:11px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:rgba(87,20,33,.85); color:white; box-shadow:0 4px 12px rgba(0,0,0,.25); backdrop-filter:blur(6px); transition:transform .2s,background .2s; }
.photo-card:hover .photo-card__play-indicator { transform:scale(1.1); background:var(--wine); }
.photo-card__play-indicator svg { width:16px; height:16px; fill:currentColor; margin-left:2px; }
.photo-card__body { display:grid; gap:5px; padding:14px 15px 16px; }
.photo-card__event { overflow:hidden; color:var(--wine-dark); text-overflow:ellipsis; white-space:nowrap; }
.photo-card__time { color:var(--muted); font-size:.75rem; }
.pagination { display:flex; max-width:100%; justify-content:center; gap:8px; padding:28px 0 4px; overflow-x:auto; scrollbar-width:thin; }
.pagination[aria-busy="true"] { opacity:.6; pointer-events:none; }
.pagination button,.pagination span { display:grid; flex:0 0 44px; min-height:44px; place-items:center; border-radius:50%; }
.pagination button { border:1px solid var(--line); background:var(--paper); color:var(--wine-dark); font-weight:700; cursor:pointer; }
.pagination button[aria-current="page"] { border-color:var(--wine); background:var(--wine); color:white; }
.pagination span { color:var(--muted); }
.message-panel { padding:45px 24px; border:1px solid var(--line); border-radius:22px; background:var(--paper); text-align:center; }
.message-panel h2 { margin-top:0; color:var(--wine-dark); font-family:var(--serif); font-size:2rem; font-weight:400; }
.message-panel--error { border-color:#d69a9a; background:#fff4f3; color:#722b37; }
.photo-dialog { width:min(1050px,calc(100% - 24px)); max-height:calc(100vh - 24px); padding:0; overflow:hidden; border:0; border-radius:22px; background:#150d0f; color:white; box-shadow:0 28px 90px rgba(0,0,0,.45); }
.photo-dialog::backdrop { background:rgba(21,13,15,.82); backdrop-filter:blur(7px); }
.photo-dialog > img, .photo-dialog > video { display:block; width:100%; max-height:calc(100vh - 130px); object-fit:contain; background:#0d090a; }
.dialog-close { position:absolute; top:12px; right:12px; z-index:2; width:42px; height:42px; border:0; border-radius:50%; background:rgba(0,0,0,.62); color:white; font-size:1.8rem; cursor:pointer; }
.dialog-info { position:relative; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 18px 18px; }
.dialog-info p { margin:5px 0 0; color:#d9c6ca; font-size:.78rem; }
.dialog-actions { display:flex; gap:10px; }
.dialog-action-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.dialog-action-status--visible { position:static; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; color:#ffd7d7!important; white-space:normal; }
.mobile-nav { display:none; }
.contact-rail { position:fixed; right:22px; bottom:28px; z-index:25; display:grid; gap:12px; }
.contact-rail__link { position:relative; display:grid; width:58px; height:58px; place-items:center; border:2px solid rgba(255,255,255,.82); border-radius:50%; box-shadow:0 10px 22px rgba(87,20,33,.18); color:white; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.contact-rail__link:hover { box-shadow:0 15px 28px rgba(87,20,33,.24); transform:translateY(-3px) scale(1.04); }
.contact-rail__link svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.contact-rail__link--instagram { background:radial-gradient(circle at 30% 108%,#ffdc80 0 18%,#fcaf45 25%,#f77737 43%,#e1306c 62%,#c13584 78%,#833ab4 100%); }
.contact-rail__link--facebook { background:#1877f2; }
.contact-rail__link--facebook svg { fill:currentColor; stroke:none; }
.contact-rail__link--zalo { background:#fff; color:#0068ff; }
.contact-rail__link--zalo strong { font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:-.06em; }
.contact-rail__link > span { position:absolute; right:calc(100% + 11px); padding:8px 11px; border-radius:999px; background:var(--wine-dark); color:white; font-size:.69rem; font-weight:700; opacity:0; pointer-events:none; transform:translateX(5px); transition:opacity .2s ease,transform .2s ease; white-space:nowrap; }
.contact-rail__link:hover > span,.contact-rail__link:focus-visible > span { opacity:1; transform:translateX(0); }
:focus-visible { outline:3px solid #e8aaa9; outline-offset:3px; }
@media(max-width:980px){.event-grid{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar>.button{width:100%}.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){body{padding-bottom:75px}.gallery-header{padding-inline:14px;padding-bottom:54px}.gallery-header nav{min-height:64px}.brand{font-size:1.05rem}.brand__logo{width:42px;height:42px}.gallery-hero{margin-top:48px}.gallery-container{width:calc(100% - 20px);margin-top:-22px}.admin-notice{align-items:flex-start;flex-direction:column}.event-picker,.selected-event{padding:20px 15px}.event-picker__heading{display:block}.event-picker__heading>p{margin-top:14px}.event-grid{grid-template-columns:1fr}.selected-event__layout{grid-template-columns:1fr}.event-qr-card{width:100%}.event-actions{display:grid}.toolbar{grid-template-columns:1fr;padding:15px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-card{border-radius:14px}.photo-card__body{padding:11px 12px 13px}.pagination{justify-content:flex-start}.photo-dialog > img,.photo-dialog > video{max-height:calc(100vh - 245px);max-height:calc(100dvh - 245px)}.dialog-info{align-items:stretch;flex-direction:column}.dialog-actions{flex-direction:column}.dialog-info .button{width:100%}.contact-rail{right:14px;bottom:87px;gap:9px}.contact-rail__link{width:52px;height:52px}.contact-rail__link > span{display:none}.mobile-nav{position:fixed;right:0;bottom:0;left:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);min-height:68px;padding:7px 5px max(7px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,250,246,.95);box-shadow:0 -10px 30px rgba(87,20,33,.08);backdrop-filter:blur(18px)}.mobile-nav a{display:grid;place-items:center;gap:2px;color:var(--muted);font-size:.58rem;text-decoration:none}.mobile-nav span{font-size:1rem}.mobile-nav a[aria-current]{border-radius:16px;background:var(--blush);color:var(--wine)}}
@media(max-width:380px){.gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}