:root {
  --showcase-bg:#fbf6f2;
  --showcase-paper:#fffaf7;
  --showcase-text:#563127;
  --showcase-muted:#8f6f66;
  --showcase-accent:#cf5b67;
  --showcase-accent-dark:#b94655;
  --showcase-line:#ead8d1;
  --showcase-shadow:0 10px 30px rgba(91,57,43,.09);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--showcase-bg) url("page-background-desktop.png") center top/cover fixed; color:var(--showcase-text); font-family:Inter,"Segoe UI",Arial,sans-serif; }
body.modal-open { overflow:hidden; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; }
img { max-width:100%; }
[hidden] { display:none !important; }

.showcase-header { position:sticky; z-index:100; top:0; height:64px; border-bottom:1px solid rgba(222,205,197,.85); background:rgba(255,252,249,.96); box-shadow:0 3px 16px rgba(76,47,36,.05); backdrop-filter:blur(14px); }
.header-inner { width:min(1448px,100%); height:100%; margin:auto; padding:0 34px; display:flex; align-items:center; gap:28px; }
.brand { flex:none; display:flex; align-items:center; width:282px; }
.brand img { display:block; width:100%; height:auto; }
.desktop-nav { flex:1; display:flex; align-items:center; justify-content:center; gap:34px; white-space:nowrap; }
.desktop-nav a { position:relative; padding:22px 0 18px; color:#5b4138; font:500 14px/1.2 Georgia,"Times New Roman",serif; text-decoration:none; }
.desktop-nav a:hover,.desktop-nav a.active { color:#bd4857; }
.desktop-nav a.active:after { content:""; position:absolute; right:0; bottom:12px; left:0; height:2px; background:#cf5b67; }
.header-actions { flex:none; display:flex; align-items:center; gap:10px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.icon-button:hover,.icon-button.is-active { background:#f8e9e7; }
.icon-button img { width:23px; height:23px; }
.mobile-menu-button { display:none; }
.mobile-cart-button { display:none; }
.login-link,.header-contact { border:1px solid #df9ca4; border-radius:999px; padding:10px 22px; color:#8e3d47; background:#fffaf8; font:600 13px/1 Georgia,serif; text-decoration:none; white-space:nowrap; }
.header-contact { border-color:var(--showcase-accent); background:linear-gradient(135deg,#d86874,#c34f5c); color:#fff; cursor:pointer; }

.showcase-hero { position:relative; width:min(1448px,100%); min-height:238px; margin:auto; overflow:hidden; background:url("hero-desktop.png") center/cover no-repeat; }
.hero-copy { position:relative; z-index:2; width:52%; padding:42px 0 23px 112px; }
.hero-eyebrow { margin:0 0 5px; color:#7a352b; font:500 15px/1.2 Georgia,serif; letter-spacing:.34em; }
.hero-copy h1 { margin:0; color:#672b20; font:500 clamp(42px,4.1vw,64px)/.97 Georgia,"Times New Roman",serif; letter-spacing:-.045em; }
.hero-script { margin:3px 0 22px; color:#bc4d51; font:italic 25px/1.25 "Segoe Script","Brush Script MT",cursive; }
.hero-benefits { display:flex; align-items:flex-start; gap:34px; color:#735a50; font:500 12px/1.32 Georgia,serif; }
.hero-benefits span { display:flex; align-items:center; gap:8px; }
.hero-benefits b { width:39px; height:39px; flex:none; display:grid; place-items:center; border:1px solid #d6757f; border-radius:50%; color:#cc5966; font:500 22px/1 Georgia,serif; }
.hero-quote { position:absolute; z-index:2; top:49px; right:52px; margin:0; color:#b8494e; font:italic 19px/1.6 "Segoe Script","Brush Script MT",cursive; text-align:center; transform:rotate(-5deg); }

.showcase-toolbar { position:relative; z-index:4; width:min(1448px,100%); margin:auto; padding:16px 45px 14px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,430px); gap:15px 28px; background:rgba(255,250,247,.92); border-bottom:1px solid rgba(234,216,209,.8); }
.category-row { min-width:0; display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; }
.category-row::-webkit-scrollbar { display:none; }
.category-chip { flex:none; min-height:42px; border:1px solid transparent; border-radius:999px; padding:0 19px; background:#f8efeb; color:#815b51; font:500 13px/1 Georgia,serif; cursor:pointer; white-space:nowrap; }
.category-chip:hover { border-color:#e5c3bd; }
.category-chip.active { background:linear-gradient(135deg,#d56773,#c8525f); color:#fff; box-shadow:0 5px 14px rgba(190,75,88,.18); }
.grid-symbol { margin-right:7px; font-size:17px; }
.search-row { display:flex; align-items:center; gap:10px; }
.search-box { height:42px; flex:1; display:flex; align-items:center; gap:10px; border:1px solid var(--showcase-line); border-radius:999px; padding:0 17px; background:#fff; }
.search-box img { width:19px; height:19px; opacity:.78; }
.search-box input { min-width:0; width:100%; border:0; outline:0; color:var(--showcase-text); background:transparent; font-size:13px; }
.search-box input::placeholder { color:#aa928a; }
.advanced-filter-button { height:42px; flex:none; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:0 18px; background:linear-gradient(135deg,#d56773,#c8525f); color:#fff; font:600 12px/1 Georgia,serif; cursor:pointer; }
.advanced-filter-button img { width:18px; filter:brightness(0) invert(1); }
.advanced-filters { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-end; gap:16px; border-top:1px solid #eedfd9; padding-top:12px; color:var(--showcase-muted); font-size:12px; }
.advanced-filters label { display:flex; align-items:center; gap:8px; }
.advanced-filters select { border:1px solid var(--showcase-line); border-radius:999px; padding:7px 28px 7px 12px; background:#fff; color:var(--showcase-text); outline:none; }
.favorite-only input { accent-color:var(--showcase-accent); }

.showcase-notice { position:relative; z-index:3; width:min(1448px,100%); height:36px; margin:auto; overflow:hidden; display:flex; align-items:center; border-bottom:1px solid rgba(234,216,209,.8); background:rgba(255,247,242,.96); color:#a13f4b; }
.showcase-notice-track { width:max-content; min-width:max-content; display:flex; align-items:center; white-space:nowrap; will-change:transform; animation:showcase-notice-run 25s linear infinite; }
.showcase-notice-track span { flex:none; padding:0 54px; font:600 12px/1.2 Georgia,"Times New Roman",serif; letter-spacing:.012em; }
@keyframes showcase-notice-run { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.template-grid { width:min(1448px,100%); margin:auto; padding:18px 40px 46px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 16px; }
.template-card { min-width:0; overflow:hidden; border:1px solid var(--showcase-line); border-radius:15px; background:rgba(255,250,247,.98); box-shadow:0 6px 19px rgba(91,57,43,.055); transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease; content-visibility:auto; contain-intrinsic-size:290px 520px; }
.template-card:hover { transform:translateY(-3px); box-shadow:var(--showcase-shadow); }
.template-card.is-hidden { display:none; }
.template-preview { position:relative; height:340px; display:grid; place-items:center; overflow:hidden; background:#f5e7e1 url("card-desktop.png") center/cover no-repeat; }
.preview-decoration { position:absolute; inset:0; opacity:.78; background:url("flower-corner.png") left top/70% auto no-repeat; transform:scaleX(-1); }
.variant-2 .preview-decoration,.variant-5 .preview-decoration { transform:none; background-position:right top; }
.variant-3 .template-preview { background-color:#f1ebe1; }
.variant-4 .template-preview { background-color:#f7dfdb; }
.variant-5 .template-preview { background-color:#f1ece3; }
.variant-6 .template-preview { background-color:#e9f0f1; }
.phone-visual { position:relative; z-index:2; width:min(80%,205px); aspect-ratio:31/50; filter:drop-shadow(0 9px 8px rgba(42,31,28,.16)); }
.phone-frame { position:absolute; z-index:3; inset:0; display:block; pointer-events:none; }
.phone-frame img { display:block; width:100%; height:100%; }
.phone-screen { position:absolute; z-index:1; left:12.95%; top:3.95%; width:74.1%; height:90%; overflow:hidden; border-radius:15% / 4%; background:#fff7f1; }
.phone-screen iframe { position:absolute; z-index:2; top:0; left:0; display:block; border:0; margin:0; background:#fff; transform-origin:left top; pointer-events:none; opacity:0; transition:opacity .35s ease; }
.preview-placeholder { position:absolute; z-index:1; inset:0; display:grid; align-content:center; justify-items:center; gap:7px; color:#a27269; background:linear-gradient(160deg,#fff9f5,#f1ded7); }
.preview-placeholder span { width:25px; height:25px; border:2px solid rgba(197,84,96,.25); border-top-color:#c55460; border-radius:50%; animation:showcase-spin .8s linear infinite; }
.preview-placeholder small { font-size:8px; font-weight:700; letter-spacing:.04em; }
.template-card.preview-ready .phone-screen iframe { opacity:1; }
.template-card.preview-ready .preview-placeholder { opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; }
.template-card.is-previewing .phone-visual { filter:drop-shadow(0 9px 10px rgba(42,31,28,.18)) drop-shadow(0 0 8px rgba(210,91,104,.26)); }
@keyframes showcase-spin { to { transform:rotate(360deg); } }
.favorite-button { position:absolute; z-index:6; top:10px; right:10px; width:38px; height:38px; display:grid; place-items:center; border:0; padding:0; border-radius:50%; background:transparent; cursor:pointer; filter:drop-shadow(0 4px 7px rgba(86,49,39,.13)); }
.favorite-button img { width:100%; height:100%; }
.favorite-button:after { content:""; position:absolute; color:#c34f5c; font:700 19px/1 Arial,sans-serif; }
.favorite-button[aria-pressed="true"]:after { content:"♥"; }
.favorite-button[aria-pressed="true"] { transform:scale(1.06); }
.card-copy { padding:10px 10px 11px; }
.card-title-row { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:7px; margin-bottom:9px; }
.card-title-row h2 { min-width:0; margin:0; overflow:hidden; color:#3f2d27; font:600 14px/1.2 Georgia,"Times New Roman",serif; text-overflow:ellipsis; white-space:nowrap; }
.card-title-row span { flex:none; border-radius:999px; padding:5px 9px; background:#fff0ed; color:#bf4d58; font:500 10px/1 Georgia,serif; }
.card-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.card-button { min-width:0; min-height:38px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid #e9aab1; border-radius:999px; padding:5px 8px; background:#fffaf8; color:#b94655; font:600 12px/1.1 Georgia,"Times New Roman",serif; text-decoration:none; cursor:pointer; white-space:nowrap; }
.card-button img { width:17px; height:17px; }
.card-button:hover { filter:brightness(.97); }
.choose-button { border-color:#cf5b67; background:linear-gradient(135deg,#d96975,#c74e5b); color:#fff; }
.choose-button img { filter:brightness(0) invert(1); }
.no-results { width:min(900px,calc(100% - 32px)); margin:36px auto 80px; border:1px dashed #dcbeb6; border-radius:16px; padding:28px; background:#fffaf7; color:var(--showcase-muted); text-align:center; }

.showcase-footer { min-height:150px; display:flex; align-items:center; justify-content:center; gap:24px; padding:28px; border-top:1px solid var(--showcase-line); background:rgba(255,250,247,.92); color:var(--showcase-muted); text-align:center; }
.showcase-footer img { width:220px; }
.showcase-footer a { color:var(--showcase-accent-dark); font-weight:700; text-decoration:none; }

.selection-modal { position:fixed; z-index:500; inset:0; display:grid; place-items:center; padding:18px; }
.selection-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(50,31,26,.62); backdrop-filter:blur(4px); cursor:pointer; }
.selection-card { position:relative; z-index:1; width:min(460px,100%); max-height:calc(100vh - 36px); overflow:auto; border:1px solid rgba(255,255,255,.6); border-radius:24px; padding:30px 28px 25px; background:#fffaf7; box-shadow:0 24px 80px rgba(45,27,22,.35); text-align:center; }
.selection-close { position:absolute; top:8px; right:12px; border:0; padding:4px 8px; background:transparent; color:#9c7770; font-size:30px; cursor:pointer; }
.selection-kicker { margin:0 0 7px; color:#c35461; font-size:10px; font-weight:800; letter-spacing:.2em; }
.selection-card h2 { margin:0 0 13px; color:#5f3128; font:600 29px/1.15 Georgia,serif; }
.selection-card>strong { display:block; margin:0 auto 13px; border-radius:999px; padding:9px 15px; background:#f8e9e5; color:#ba4855; font:600 17px/1.2 Georgia,serif; }
.selection-card>p { margin:0 auto 20px; color:#866b63; font-size:13px; line-height:1.55; }
.selection-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.contact-button,.copy-selection { min-height:45px; display:flex; align-items:center; justify-content:center; border:0; border-radius:999px; padding:10px 14px; color:#fff; font-weight:750; text-decoration:none; cursor:pointer; }
.contact-button.zalo { background:#0877dd; }
.contact-button.facebook { background:#1877f2; }
.contact-button[aria-disabled="true"] { opacity:.42; pointer-events:none; }
.copy-selection { width:100%; margin-top:10px; background:#7d574b; }
.selection-card small { display:block; min-height:17px; margin-top:11px; color:#9a6c61; line-height:1.35; }

.music-toggle { position:fixed; z-index:300; right:17px; bottom:17px; min-width:53px; height:53px; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid rgba(255,255,255,.72); border-radius:999px; padding:0 16px; background:rgba(191,72,86,.9); color:#fff; box-shadow:0 8px 24px rgba(104,38,45,.25); cursor:pointer; backdrop-filter:blur(8px); }
.music-toggle span { font-size:22px; }
.music-toggle small { font-size:11px; font-weight:700; white-space:nowrap; }
.music-toggle.is-playing span { animation:music-pulse 1.4s ease-in-out infinite; }
@keyframes music-pulse { 50% { transform:scale(1.18) rotate(7deg); } }

@media (max-width:1240px) {
  .header-inner { padding-inline:24px; gap:18px; }
  .brand { width:230px; }
  .desktop-nav { gap:19px; }
  .desktop-nav a { font-size:13px; }
  .login-link { display:none; }
  .template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hero-copy { padding-left:70px; }
}
@media (max-width:980px) {
  .desktop-nav,.header-contact { display:none; }
  .mobile-menu-button { display:grid; }
  .mobile-cart-button { display:grid; background:linear-gradient(135deg,#d56773,#c8525f); }
  .mobile-cart-button img { filter:brightness(0) invert(1); }
  .header-inner { justify-content:space-between; }
  .brand { width:min(310px,44vw); margin-right:auto; }
  .desktop-nav.is-open { position:absolute; top:63px; left:0; right:0; display:grid; gap:0; padding:10px 18px 18px; border-bottom:1px solid var(--showcase-line); background:#fffaf7; box-shadow:0 10px 20px rgba(71,45,37,.1); }
  .desktop-nav.is-open a { padding:12px; text-align:center; }
  .desktop-nav.is-open a.active:after { bottom:5px; left:40%; right:40%; }
  .template-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .showcase-toolbar { grid-template-columns:1fr; }
  .hero-quote { display:none; }
  .hero-copy { width:60%; }
}
@media (max-width:680px) {
  body { background-image:url("page-background-mobile.png"); background-size:100% auto; background-attachment:scroll; }
  .showcase-header { height:58px; }
  .header-inner { padding:0 12px; gap:5px; }
  .brand { width:min(290px,48vw); margin:0 auto 0 4px; }
  .mobile-menu-button { width:36px; }
  .header-actions { gap:2px; }
  .header-actions .icon-button { width:34px; height:34px; }
  .header-actions .icon-button img { width:21px; height:21px; }
  .login-link { display:none; }
  .desktop-nav.is-open { top:57px; }
  .showcase-hero { min-height:172px; border-radius:0 0 12px 12px; background-image:url("hero-mobile.png"); background-position:right center; }
  .hero-copy { width:60%; padding:26px 0 16px 22px; }
  .hero-eyebrow { margin-bottom:3px; font-size:9px; letter-spacing:.29em; }
  .hero-copy h1 { font-size:clamp(27px,8vw,38px); line-height:1; }
  .hero-script { margin:5px 0 13px; font-size:15px; line-height:1.25; }
  .hero-benefits { gap:10px; font-size:7px; }
  .hero-benefits span { gap:4px; }
  .hero-benefits b { width:23px; height:23px; font-size:13px; }
  .showcase-toolbar { padding:10px 10px 8px; gap:8px; background:rgba(255,250,247,.96); }
  .category-row { gap:6px; }
  .category-chip { min-height:36px; padding:0 13px; font-size:10px; }
  .grid-symbol { margin-right:5px; }
  .search-row { gap:7px; }
  .search-box,.advanced-filter-button { height:40px; }
  .search-box { padding-inline:13px; }
  .search-box input { font-size:11px; }
  .advanced-filter-button { width:44px; padding:0; border-radius:50%; font-size:0; }
  .advanced-filter-button img { width:18px; }
  .advanced-filters { align-items:flex-start; flex-direction:column; gap:10px; padding:10px 5px 4px; }
  .showcase-notice { height:32px; }
  .showcase-notice-track { animation-duration:21s; }
  .showcase-notice-track span { padding-inline:36px; font-size:10px; }
  .template-grid { padding:9px 8px 28px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 8px; }
  .template-card { border-radius:12px; contain-intrinsic-size:180px 330px; }
  .template-card:hover { transform:none; }
  .template-preview { height:235px; background-image:url("card-mobile.png"); }
  .phone-visual { width:min(84%,142px); aspect-ratio:31/50; }
  .favorite-button { top:6px; right:6px; width:31px; height:31px; }
  .favorite-button:after { font-size:16px; }
  .card-copy { padding:7px; }
  .card-title-row { align-items:flex-start; gap:4px; margin-bottom:7px; }
  .card-title-row h2 { font-size:12px; line-height:1.5; }
  .card-title-row span { padding:4px 6px; font-size:8px; }
  .card-actions { gap:5px; }
  .card-button { min-height:33px; gap:4px; padding-inline:4px; font-size:9px; }
  .card-button img { width:13px; height:13px; }
  .showcase-footer { align-items:center; flex-direction:column; gap:10px; padding-bottom:84px; font-size:12px; }
  .showcase-footer img { width:200px; }
  .selection-card { border-radius:20px; padding:28px 18px 21px; }
  .selection-card h2 { font-size:25px; }
  .selection-actions { grid-template-columns:1fr; }
  .music-toggle { right:10px; bottom:10px; height:47px; min-width:47px; padding:0 13px; }
}
@media (max-width:370px) {
  .brand { width:154px; }
  .header-actions [data-favorite-filter] { display:none; }
  .template-grid { gap:7px 6px; padding-inline:6px; }
  .template-preview { height:216px; }
  .phone-visual { width:min(84%,132px); }
  .card-title-row span { display:none; }
  .card-button { font-size:8.5px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .showcase-notice { height:auto; min-height:32px; padding:6px 12px; }
  .showcase-notice-track { width:100%; min-width:0; transform:none !important; animation:none !important; white-space:normal; }
  .showcase-notice-track span { width:100%; padding:0; text-align:center; }
  .showcase-notice-track span+span { display:none; }
}