/* Filmode store — landing-page design language, layout theo shop.hieubk.vn/mua */
:root{
  --bg:#0b0b0c; --ink:#f3efe8; --muted:#9b968c; --accent:#57e3cf; --line:#2a2a2c;
  --surface:#101014; --surface-2:#17171b;
  --success:#57e38a; --danger:#ff6b6b;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* film grain, same as landing */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:var(--accent);text-decoration:none}

/* header — same as landing */
header{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
.logo{font-weight:700;letter-spacing:.06em;font-size:14px;text-transform:uppercase;color:var(--ink)}
.logo em{color:var(--accent);font-style:normal}
.header-nav{display:flex;align-items:center;gap:22px}
.header-nav a{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.header-nav a:hover,.header-nav a.current{color:var(--ink)}
.header-nav a.current{border-bottom:1px solid var(--accent);padding-bottom:2px}
.header-nav a.cta{color:var(--bg);background:var(--ink);padding:10px 18px;border-radius:100px;font-weight:600;letter-spacing:0;text-transform:none;border:none}
/* language switcher */
.lang{display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.lang button{
  background:none;border:none;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;padding:6px 11px;cursor:pointer;
}
.lang button.active{background:var(--accent);color:var(--bg)}

/* page head — breadcrumb + title, like the reference store */
.page-head{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0 40px;background:var(--surface)}
.breadcrumb{color:var(--muted);font-size:13px;margin-bottom:14px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.page-head h1{font-size:clamp(40px,6.5vw,64px);line-height:1.05;font-weight:400}
.page-head h1 i{font-style:italic;color:var(--accent)}
.page-head p{color:var(--muted);max-width:560px;margin-top:12px;font-size:16px}

/* toolbar — result count + filter chips + sort */
.toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:30px 0 26px;
}
.toolbar-left{display:flex;flex-direction:column;gap:14px}
.result-count{color:var(--muted);font-size:14px}
.filters{display:flex;gap:8px}
.chip{
  background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:100px;
  padding:7px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .15s;
}
.chip:hover{color:var(--ink);border-color:var(--muted)}
.chip.active{border-color:var(--accent);color:var(--accent)}
.sort{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:14px;font-family:inherit;cursor:pointer;min-width:250px;
}
.sort:focus{outline:none;border-color:var(--accent)}

/* grid — 3 large cards per row, tall portrait images like the reference */
.grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(3,1fr);
  padding-bottom:24px;
}
.empty{color:var(--muted);grid-column:1/-1;text-align:center;padding:70px 0}

.card{display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card-image{
  aspect-ratio:3/4;background:var(--surface-2);position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;
}
.card-image img{width:100%;height:100%;object-fit:cover;display:block;position:relative;transition:transform .3s}
.card:hover .card-image img{transform:scale(1.03)}
.card-image .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:40px}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  border:1px solid var(--accent);color:var(--accent);background:rgba(11,11,12,.72);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px;
}
.card-body{padding:16px 4px 0;display:flex;flex-direction:column;gap:4px;flex:1}
.card-title{font-size:17px;font-weight:600;margin:0}
.card-cat{color:var(--muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.price{font-weight:700;font-size:17px;color:var(--ink);margin-top:8px}
.price small{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px}
.btn-buy{
  margin-top:14px;background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;
  font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;cursor:pointer;transition:all .15s;text-align:center;
}
.btn-buy:hover{border-color:var(--accent);color:var(--accent)}
.btn-buy:disabled{color:var(--muted);cursor:not-allowed;border-color:var(--line)}

/* pagination — 1 2 → */
.pagination{display:flex;gap:8px;justify-content:center;padding:14px 0 9vh}
.pagination button{
  min-width:42px;height:42px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:14px;cursor:pointer;transition:all .15s;
}
.pagination button:hover{color:var(--ink);border-color:var(--muted)}
.pagination button.active{border-color:var(--accent);color:var(--accent)}
.pagination button:disabled{opacity:.35;cursor:not-allowed}

.btn{
  background:var(--ink);color:var(--bg);border:none;border-radius:100px;
  font-weight:600;font-size:13.5px;padding:9px 18px;cursor:pointer;transition:opacity .15s;
  display:inline-block;text-align:center;text-decoration:none;
}
.btn:hover{opacity:.85}
.btn:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed;opacity:1}
.btn-paypal{background:#ffc439;color:#111;width:100%;padding:13px;font-size:15px;border-radius:14px}
.btn-download{background:var(--success);color:#06130b;width:100%;padding:13px;font-size:15px;border-radius:14px}

/* modal */
.modal-backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.65);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  width:100%;max-width:420px;max-height:92vh;overflow-y:auto;padding:26px;position:relative;
}
.modal-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--muted);font-size:26px;cursor:pointer;line-height:1;
}
.modal-close:hover{color:var(--ink)}
.modal-head h2{margin:0 0 4px;font-size:26px;font-weight:400}
.modal-head h2 i{font-style:italic;color:var(--accent)}
.modal-product{color:var(--muted);font-size:14px;margin:0 0 18px}

.pay-tabs{display:flex;gap:8px;margin-bottom:20px}
.pay-tab{
  flex:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:100px;
  padding:9px 8px;font-size:12.5px;cursor:pointer;font-weight:600;letter-spacing:.03em;
}
.pay-tab.active{border-color:var(--accent);color:var(--accent)}

.pane-loading{color:var(--muted);text-align:center;padding:26px 0}

.qr-wrap{display:flex;justify-content:center;margin-bottom:16px}
.qr-wrap img{border-radius:14px;background:#fff;padding:6px}

.bank-info{display:flex;flex-direction:column;gap:8px}
.bank-row{
  display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:13.5px;
}
.bank-row span{color:var(--muted);width:105px;flex-shrink:0}
.bank-row strong{flex:1;word-break:break-all}
.memo{color:var(--accent);letter-spacing:.06em}
.copy{
  background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:100px;font-size:11px;padding:3px 11px;cursor:pointer;
}
.copy:hover{color:var(--ink);border-color:var(--muted)}

.note{color:var(--muted);font-size:12.5px;margin:15px 0 0}
.waiting{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px;margin-top:15px;justify-content:center}
.spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

.paypal-body{text-align:center;padding:8px 0}
.paypal-price{font-size:15px;margin:0 0 15px}
.paypal-price strong{color:var(--accent);font-size:18px}

.pay-success{text-align:center;padding:10px 0}
.success-icon{
  width:56px;height:56px;border-radius:50%;
  background:rgba(87,227,138,.12);color:var(--success);border:1px solid rgba(87,227,138,.4);
  font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
}
.pay-success h3{margin:0 0 6px;font-size:24px;font-weight:400}
.pay-success h3 i{font-style:italic;color:var(--success)}
.pay-success p{color:var(--muted);font-size:14px;margin:0 0 16px}

.pay-expired{text-align:center;padding:14px 0}
.pay-expired h3{color:var(--danger);margin:0 0 6px;font-weight:600;font-size:18px}
.pay-expired p{color:var(--muted);font-size:14px;margin:0 0 16px}

.modal-error{color:var(--danger);font-size:13.5px;text-align:center;margin:15px 0 0}

.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
  border-radius:100px;padding:11px 22px;font-size:14px;z-index:80;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}

footer{border-top:1px solid var(--line);padding:36px 0;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;color:var(--muted);font-size:13px}
footer a{color:var(--muted)}

@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .toolbar{align-items:stretch;flex-direction:column}
  .sort{width:100%}
  .header-nav a:not(.cta){display:none}
  .bank-row span{width:90px}
}