/* =========================================================
   Patty Channel — หน้าร้าน
   ========================================================= */
body.site {
  background:
    radial-gradient(1200px 520px at 50% -180px, rgba(240,199,211,.55), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(198,161,95,.16) 1px, transparent 1.4px) 0 0 / 26px 26px,
    var(--ivory);
}

/* ---------- Topbar (เส้นบนสุดของแบบร่าง) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 249, 244, .82);
  backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-line); opacity: .8; }
.topbar-inner {
  max-width: 1040px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand {
  font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.45rem;
  color: var(--plum); text-decoration: none; letter-spacing: .01em;
}
.admin-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; min-height: 38px; border-radius: 999px;
  border: 1px solid var(--gold-soft); background: #fff;
  color: #8A6A2E; font-size: .86rem; text-decoration: none;
  transition: background .2s;
}
.admin-link:hover { background: #FBF4E6; }
.admin-link svg { width: 18px; height: 18px; }
.is-preview .admin-link { visibility: hidden; }

.page { max-width: 1040px; margin: 0 auto; padding: 28px 20px 40px; }
.block { margin-top: 56px; }

.sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sec-head h2.script {
  margin: 0; font-family: var(--f-script); font-weight: 400;
  font-size: 2.6rem; line-height: 1.1; color: var(--berry);
}
.sec-sub { font-size: .86rem; color: var(--ink-soft); letter-spacing: .04em; }
.sec-sub::before { content: '✦'; color: var(--gold); margin-right: 8px; font-size: .7rem; vertical-align: 2px; }

.card {
  background: rgba(255,255,255,.88); border: 1px solid #F1DCE3;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.empty { color: var(--ink-soft); font-size: .92rem; }

/* =========================================================
   1) HERO — ตั๋ววีไอพี: Banner + Logo + Contact ×2 + Barcode stub
   ========================================================= */
.ticket {
  --stub: 96px;
  position: relative;
  display: grid; grid-template-columns: 1fr var(--stub);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 0 6px #fff, 0 0 0 7px rgba(198,161,95,.35), var(--shadow-soft);
  animation: rise .5s ease both;
}
.ticket::before, .ticket::after {
  content: ''; position: absolute; right: calc(var(--stub) - 12px);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold-soft);
  z-index: 2;
}
.ticket::before { top: -19px; }
.ticket::after { bottom: -19px; }

.ticket-main { display: grid; grid-template-rows: auto auto; min-width: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); overflow: hidden; }

.banner {
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: 270px;
  background:
    radial-gradient(420px 220px at 18% 30%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(115deg, #FBE1EA 0%, #FCE9EF 48%, #FFF3E4 100%);
}
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-veil { position: absolute; inset: 0; pointer-events: none; }
.banner.has-img .banner-veil { background: linear-gradient(100deg, rgba(255,241,246,.93) 0%, rgba(255,241,246,.82) 55%, rgba(255,246,236,.55) 100%); }
.banner-demo-tag {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--petal);
  color: var(--berry); font-size: .76rem; font-weight: 600; letter-spacing: .1em;
}
.banner-deco { position: absolute; z-index: 1; font-size: 1.15rem; opacity: .55; pointer-events: none; }
.banner-deco.d1 { top: 22px; left: 32%; }
.banner-deco.d2 { bottom: 16px; left: 56%; }
.banner-inner {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 36px;
  padding: 42px 44px 40px 36px;
}
.logo-badge { position: relative; width: 176px; height: 176px; border-radius: 50%; padding: 7px; background: #fff;
  box-shadow: 0 0 0 2.5px var(--gold), 0 16px 30px -16px rgba(74,42,58,.45); }
.logo-crown { position: absolute; top: -17px; left: 50%; width: 34px; height: 34px; transform: translateX(-50%); fill: var(--gold); filter: drop-shadow(0 1px 1px rgba(138,106,46,.3)); }
.logo-circle { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 1.5px dashed var(--gold-soft); }
.logo-circle img { width: 100%; height: 100%; object-fit: cover; }
.logo-demo {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #fff, #FFF1F5);
}
.logo-demo span { font-family: var(--f-display); font-weight: 600; font-size: 1.9rem; line-height: 1; color: var(--rose); }
.logo-demo small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: #A88443; }
.logo-demo em { font-style: normal; font-size: .8rem; color: var(--ink-soft); }

.banner-copy { min-width: 0; }
.banner-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px;
  background: #FFF8EA; border: 1px solid var(--gold-soft); color: #8A6A2E; font-size: .84rem; font-weight: 500;
}
.banner-copy h1 {
  margin: 10px 0 8px; font-family: var(--f-display); font-weight: 600;
  font-size: clamp(2.3rem, 5vw, 3.7rem); line-height: 1; color: var(--plum); letter-spacing: .005em;
}
.banner-copy p { margin: 0; max-width: 34em; font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }

.contacts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gold-soft); }
.contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 72px; padding: 12px 16px; text-decoration: none; color: var(--plum);
  background: #fff; transition: background .2s ease;
}
.contact-btn + .contact-btn { border-left: 1px solid var(--gold-soft); }
.contact-btn:hover { background: var(--blush); }
.contact-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush); color: var(--berry);
  box-shadow: inset 0 0 0 1px var(--petal);
}
.contact-ic .ic { width: 21px; height: 21px; }
.contact-txt { display: grid; line-height: 1.25; min-width: 0; }
.contact-txt b { font-weight: 600; }
.contact-txt small { color: var(--ink-soft); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ต้นขั้วตั๋ว + บาร์โค้ด (ตกแต่ง) */
.ticket-stub {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  border-radius: 0 var(--r-lg) var(--r-lg) 0; overflow: hidden;
  background: linear-gradient(180deg, #FFFDF9, var(--cream));
}
.ticket-stub::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: radial-gradient(circle, var(--gold) 1.1px, transparent 1.6px) 0 0 / 2px 9px repeat-y;
  opacity: .8;
}
.stub-label {
  margin: 14px 12px 0 14px; padding: 8px 0;
  border: 1px solid var(--gold-soft); border-radius: 10px;
  text-align: center; font-family: var(--f-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .22em; padding-left: .22em; color: #8A6A2E; background: #fff;
}
.stub-code { display: flex; gap: 6px; align-items: stretch; justify-content: center; padding: 14px 12px 16px 14px; min-height: 0; }
.barcode { width: 30px; height: 100%; min-height: 140px; fill: var(--plum); opacity: .85; }
.stub-code span {
  writing-mode: vertical-rl; font-size: .62rem; letter-spacing: .18em; color: var(--ink-soft);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; text-align: center;
}

/* =========================================================
   2) HIGHLIGHT
   ========================================================= */
.hl-carousel { position: relative; }
.hl-row {
  display: flex; justify-content: space-around; gap: 18px;
  padding: 6px 4px 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 4px;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hl-row::-webkit-scrollbar { display: none; }
.hl-row.is-overflow { justify-content: flex-start; }
.hl-item { scroll-snap-align: start; }

.hl-nav {
  position: absolute; z-index: 3; top: 68px; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--berry);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 8px 18px -10px rgba(74,42,58,.55);
  transition: opacity .2s ease, transform .15s ease, background .2s;
}
.hl-nav svg { width: 18px; height: 18px; }
.hl-nav.prev { left: -8px; }
.hl-nav.next { right: -8px; }
.hl-nav:hover:not(:disabled) { background: var(--blush); }
.hl-nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.hl-nav:disabled { opacity: 0; pointer-events: none; }

.hl-carousel::before, .hl-carousel::after {
  content: ''; position: absolute; top: 0; bottom: 30px; width: 44px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.hl-carousel::before { left: 0; background: linear-gradient(90deg, var(--ivory), rgba(255,249,244,0)); }
.hl-carousel::after { right: 0; background: linear-gradient(270deg, var(--ivory), rgba(255,249,244,0)); }
.hl-carousel.can-prev::before, .hl-carousel.can-next::after { opacity: 1; }

.hl-item {
  display: grid; justify-items: center; gap: 10px;
  background: none; border: 0; padding: 0; width: 132px; flex: none;
}
.hl-ring {
  display: block; width: 124px; height: 124px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--gold-soft), var(--gold), var(--rose), var(--petal), var(--gold-soft));
  transition: transform .25s ease, box-shadow .25s ease;
}
.hl-img {
  display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--ivory); background: var(--blush);
}
.hl-img img { width: 100%; height: 100%; object-fit: cover; }
.hl-demo {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 600; letter-spacing: .25em; font-size: .85rem; color: var(--berry);
  background: repeating-linear-gradient(135deg, rgba(216,138,162,.12) 0 8px, transparent 8px 16px), linear-gradient(160deg, #FBE9EE, #F6DCE3);
}
.hl-item:hover .hl-ring { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(163,70,107,.55); }
.hl-title { font-size: .92rem; font-weight: 500; color: var(--plum); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   3) REVIEW SUMMARY
   ========================================================= */
.summary {
  display: grid; grid-template-columns: minmax(260px, 1fr) 1.15fr; gap: 28px 40px;
  padding: 28px 34px; align-items: center;
}
.shape-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px dashed #EBD3DB;
}
.shape-label { font-size: .84rem; color: var(--ink-soft); }
.shape-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.shape-opt {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 13px 4px 9px;
  border-radius: 999px; border: 1px solid #EBD3DB; background: #fff;
  font-size: .82rem; color: var(--ink-soft); transition: background .2s, border-color .2s, transform .15s;
}
.shape-opt svg { width: 20px; height: 20px; fill: var(--rose); }
.shape-opt:hover { background: #FFF5F8; transform: translateY(-1px); }
.shape-opt.active { background: var(--blush); border-color: var(--berry); color: var(--berry); box-shadow: inset 0 0 0 1px var(--berry); font-weight: 500; }
.sum-left { display: grid; justify-items: start; gap: 6px; }
.score { display: flex; align-items: baseline; gap: 8px; }
.score b { font-family: var(--f-display); font-weight: 600; font-size: 4.2rem; line-height: .9; color: var(--plum); }
.score span { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink-soft); }
.sum-count { margin: 0 0 10px; font-size: .9rem; color: var(--ink-soft); }

.vote-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.vote {
  display: inline-flex; align-items: stretch; min-height: 48px; padding: 0;
  border-radius: 999px; overflow: hidden; border: 1.5px solid var(--berry);
  background: #fff; color: var(--berry); font-weight: 500;
  transition: transform .15s ease, box-shadow .2s ease;
}
.vote:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(163,70,107,.8); }
.vote .v-num {
  display: grid; place-items: center; min-width: 50px; padding: 0 12px;
  font-family: var(--f-display); font-weight: 600; font-size: 1.25rem;
  background: var(--berry); color: #fff;
}
.vote .v-label { display: grid; place-items: center; padding: 0 12px 0 14px; white-space: nowrap; }
.vote .v-count {
  display: grid; place-items: center; min-width: 34px; margin: 8px 8px 8px 0; padding: 0 8px;
  border-radius: 999px; background: var(--blush); font-size: .8rem;
}
.vote.minus { border-color: #B79AA8; color: var(--plum); }
.vote.minus .v-num { background: #fff; color: var(--plum); border-right: 1.5px solid #B79AA8; }
.vote.minus .v-count { background: #F3ECEF; }
.is-preview .vote { pointer-events: none; }

.sum-bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 44px 1fr 74px; align-items: center; gap: 12px; font-size: .9rem; }
.bar-k { white-space: nowrap; color: var(--ink-soft); }
.bar { height: 10px; border-radius: 999px; background: #F6E6EB; overflow: hidden; box-shadow: inset 0 1px 2px rgba(74,42,58,.06); }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--petal), var(--rose) 60%, var(--berry)); transition: width .6s ease; }
.bar-v { text-align: right; white-space: nowrap; }
.bar-v small { color: var(--ink-soft); }

/* =========================================================
   4) REVIEWS — กรอบแชท + โพลารอยด์
   ========================================================= */
.review-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; align-items: start;
}
.review:nth-child(even) { margin-top: 64px; }
.review { animation: rise .45s ease both; }

.bubble {
  position: relative;
  display: grid; grid-template-columns: 54px 1fr; gap: 14px;
  padding: 18px 20px 30px;
  background: #fff;
  border: 1px solid #F1DCE3;
  border-radius: 24px 24px 24px 6px; /* มุมแชท */
  box-shadow: var(--shadow-card);
}
.bubble.is-minus { border-color: #E6DCE2; background: #FFFDFE; }
.avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--berry);
  background: radial-gradient(circle at 30% 25%, #fff, var(--blush));
  box-shadow: inset 0 0 0 1.5px var(--petal);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.rv-body { min-width: 0; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rv-name { font-weight: 600; }
.rv-text { margin: 6px 0 8px; overflow-wrap: anywhere; }
.rv-meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-soft); }
.mood-tag { padding: 1px 9px; border-radius: 999px; font-weight: 600; font-size: .75rem; }
.mood-tag.plus { background: var(--blush); color: var(--berry); }
.mood-tag.minus { background: #EFE8EC; color: var(--plum); }

.view-photo-btn {
  margin-top: 10px; padding: 6px 14px;
  border-radius: 16px; border: 1px solid var(--petal);
  background: #fff; color: var(--berry);
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: background 0.2s, color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.view-photo-btn:hover, .view-photo-btn.active { background: var(--blush); }

.polaroid-wrapper {
  margin: 12px 0 0 40px;
  padding-top: 4px;
  animation: slideDownPolaroid 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: top center;
}
.polaroid-wrapper[hidden] {
  display: none !important;
  animation: none;
}
@keyframes slideDownPolaroid {
  0% { transform: translateY(-30px) scale(0.95); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.reply-btn {
  position: absolute; right: 18px; bottom: -17px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 4px 16px;
  border-radius: 999px 999px 4px 999px;
  border: 1px solid var(--petal); background: var(--blush);
  color: var(--berry); font-weight: 600; font-size: .86rem;
  transition: background .2s, color .2s;
}
.reply-btn::after {
  content: ''; position: absolute; right: 4px; bottom: -8px;
  border-left: 10px solid transparent; border-top: 9px solid var(--petal);
}
.reply-btn em { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 999px; background: #fff; font-size: .72rem; }
.reply-btn:hover, .reply-btn.active { background: var(--berry); color: #fff; border-color: var(--berry); }
.reply-btn.active::after, .reply-btn:hover::after { border-top-color: var(--berry); }
.reply-btn.active em, .reply-btn:hover em { color: var(--berry); }

.reply-thread { margin: 30px 0 0 34px; animation: rise .25s ease; }
.reply-bubble {
  display: grid; grid-template-columns: 38px 1fr; gap: 10px;
  padding: 12px 16px; background: var(--blush);
  border-radius: 20px 20px 6px 20px; border: 1px solid var(--petal);
  font-size: .92rem;
}
.reply-bubble .avatar { width: 38px; height: 38px; font-size: 1.05rem; background: #fff; }
.reply-bubble b { font-size: .86rem; color: var(--berry); }
.reply-bubble p { margin: 2px 0 2px; }
.reply-bubble time { font-size: .74rem; color: var(--ink-soft); }
.no-reply { margin: 0; font-size: .86rem; color: var(--ink-soft); text-align: right; padding-right: 8px; }

.review .polaroid {
  width: min(100%, 280px); margin: 0;
  transform: rotate(var(--tilt, -2deg));
  transition: transform .3s ease; cursor: zoom-in;
}
.review .polaroid:hover { transform: rotate(0) scale(1.02); }
.review .polaroid .pol-img { aspect-ratio: 4 / 3.4; }

.more-wrap { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 24px 20px 44px; color: var(--ink-soft); font-size: .86rem; }
.site-footer p { margin: 6px 0; }
.ribbon-rule { width: min(380px, 80%); height: 1px; margin: 0 auto 22px; background: var(--gold-line); position: relative; }
.ribbon-rule::after { content: '♡'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); background: var(--ivory); color: var(--rose); padding: 0 12px; font-size: .95rem; }
.demo-note { font-size: .76rem; opacity: .85; }

/* =========================================================
   Story viewer
   ========================================================= */
.story-modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(40, 22, 32, .92); animation: fade .2s ease;
}
.story-frame {
  position: relative; width: min(420px, 100vw); height: min(92vh, 760px);
  aspect-ratio: 9 / 16; max-height: 100dvh;
  border-radius: 22px; overflow: hidden; background: #2E1A25; color: #fff;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.story-bars { position: absolute; top: 10px; left: 12px; right: 12px; z-index: 3; display: flex; gap: 4px; }
.story-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-bars i { display: block; height: 100%; width: 0; background: #fff; }
.story-bars span.done i { width: 100%; }
.story-head { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; }
.story-head b { flex: 1; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.story-head .icon-btn { width: 36px; height: 36px; font-size: .85rem; }
.story-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--blush); color: var(--berry); font-family: var(--f-display); font-weight: 600; border: 2px solid #fff; }
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-media { position: absolute; inset: 0; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-media .story-demo { background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px), linear-gradient(170deg, #C77D98, #7E3A5A); color: #fff; }
.story-media .story-demo small { color: rgba(255,255,255,.8); }
.story-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0;
  padding: 60px 22px 30px; font-size: 1.02rem; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(30,14,22,.75));
}
.story-nav { position: absolute; top: 80px; bottom: 90px; z-index: 2; width: 38%; background: none; border: 0; }
.story-nav.prev { left: 0; }
.story-nav.next { right: 0; }

/* =========================================================
   Composer — กล่องรีวิวแบบแชท
   ========================================================= */
.chat-card {
  width: min(460px, 100%); max-height: min(92vh, 760px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(74,42,58,.5);
  animation: rise .25s ease;
}
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid #F1DCE3; background: linear-gradient(180deg, #fff, #FFF7F9);
}
.chat-head > div:nth-child(2) { flex: 1; display: grid; line-height: 1.3; }
.chat-head small { color: var(--ink-soft); font-size: .78rem; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--blush); color: var(--berry); font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; box-shadow: 0 0 0 1.5px var(--gold); }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 8px;
  display: flex; flex-direction: column; gap: 10px;
  background: radial-gradient(circle at 1px 1px, rgba(216,138,162,.18) 1px, transparent 1.4px) 0 0 / 18px 18px, #FFF9FA;
}
.msg { max-width: 86%; }
.msg p { margin: 0; }
.msg.them { align-self: flex-start; background: #fff; border: 1px solid #F1DCE3; padding: 9px 14px; border-radius: 18px 18px 18px 4px; font-size: .94rem; }
.msg.me { align-self: flex-end; background: var(--blush); border: 1px solid var(--petal); padding: 10px 12px; border-radius: 18px 18px 4px 18px; }
.field-bubble { width: 86%; display: grid; gap: 4px; }
.field-bubble label { font-size: .78rem; color: var(--berry); font-weight: 500; padding-left: 4px; }
.field-bubble input, .field-bubble textarea {
  width: 100%; border: 1px solid transparent; background: #fff; border-radius: 12px;
  padding: 9px 12px; min-height: 42px; resize: vertical;
}
.field-bubble input:focus, .field-bubble textarea:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(216,138,162,.2); }

.mood-switch { display: flex; gap: 6px; }
.mood-switch label { cursor: pointer; }
.mood-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mood-switch span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--petal); font-size: .86rem; font-weight: 500; color: var(--berry); }
.mood-switch input:checked + span { background: var(--berry); border-color: var(--berry); color: #fff; }
.mood-switch input:focus-visible + span { outline: 2px solid var(--berry); outline-offset: 2px; }

.heart-picker { display: flex; align-items: center; gap: 2px; }
.hp { width: 40px; height: 40px; padding: 6px; border: 0; background: none; border-radius: 50%; transition: transform .15s; }
.hp svg { width: 100%; height: 100%; fill: #fff; stroke: var(--rose); stroke-width: 1.4; }
.hp.on svg { fill: var(--rose); stroke: var(--berry); }
.hp:hover { transform: scale(1.12); }
.hp-val { margin-left: 6px; font-size: .84rem; color: var(--berry); font-weight: 600; }

.attach-preview { align-self: flex-end; display: flex; align-items: flex-end; gap: 10px; }
.attach-preview .polaroid { transform: rotate(2.5deg); }
.form-error { min-height: 1.2em; margin: 2px 0 0; color: #B23A55; font-size: .86rem; align-self: flex-end; }

.chat-foot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #F1DCE3; }
.chat-foot .attach { cursor: pointer; flex: none; }
.foot-hint { flex: 1; font-size: .8rem; color: var(--ink-soft); }

/* ---------- Lightbox ---------- */
.lightbox .polaroid.big { width: min(520px, 88vw); transform: rotate(-1.5deg); animation: rise .25s ease; }
.lightbox .polaroid.big .pol-img { aspect-ratio: auto; max-height: 72vh; }
.lightbox .polaroid.big .pol-img img { object-fit: contain; max-height: 72vh; }
.lightbox .polaroid.big .demo-ph { aspect-ratio: 1; }
.lightbox .polaroid.big figcaption { font-size: 1.2rem; }
.lb-close { position: fixed; top: 16px; right: 16px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .banner-inner { gap: 24px; padding: 36px 28px 32px 26px; }
  .logo-badge { width: 140px; height: 140px; }
  .summary { grid-template-columns: 1fr; padding: 24px; }
  .sum-left { justify-items: center; text-align: center; }
  .vote-btns { justify-content: center; }
}

@media (max-width: 720px) {
  /* จัดขนาดของคอนเทนต์โดยรวมให้มีช่องว่างกำลังดี */
  .page { padding: 14px 14px 24px; }
  .block { margin-top: 40px; }
  .sec-head h2.script { font-size: 2.15rem; }
  
  /* --- 1. Hero Banner --- */
  /* ยกเลิกรูปแบบตั๋วที่ติดกัน เปลี่ยนเป็น Card แยกกัน */
  .ticket { display: flex; flex-direction: column; gap: 16px; background: transparent; box-shadow: none; border-radius: 0; }
  .ticket::before, .ticket::after { display: none; } /* ซ่อนรอยเว้า */
  
  .ticket-main { display: flex; flex-direction: column; gap: 16px; border-radius: 0; }
  
  /* แบนเนอร์ลดความสูง วางรูปซ้าย รายละเอียดขวา */
  .banner { min-height: unset; border-radius: 20px; box-shadow: var(--shadow-card); }
  .banner-inner { grid-template-columns: 76px 1fr; gap: 14px; padding: 24px 16px; align-items: center; }
  
  .logo-badge { width: 76px; height: 76px; padding: 4px; margin: 0; }
  .logo-crown { width: 22px; height: 22px; top: -10px; }
  .logo-demo span { font-size: 1.1rem; }
  .logo-demo small { font-size: .45rem; }
  .logo-demo em { font-size: .5rem; }
  
  /* ป้าย VIP ย้ายไปอยู่มุมขวาบนแบนเนอร์ */
  .ticket-stub { position: absolute; top: 12px; right: 12px; background: none; border-radius: 0; width: auto; z-index: 10; }
  .stub-code { display: none; } /* ซ่อนบาร์โค้ด */
  .stub-label { margin: 0; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; letter-spacing: 0.1em; background: rgba(255,255,255,0.9); box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
  
  .banner-copy h1 { font-size: 1.5rem; margin: 0 0 4px; }
  .banner-copy p { font-size: .8rem; line-height: 1.4; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .banner-badge { font-size: .65rem; padding: 2px 8px; margin-bottom: 6px; }
  .banner-demo-tag { top: 12px; right: 60px; font-size: .6rem; padding: 4px 8px; }
  
  .banner-deco.d1 { top: 15%; right: 15%; left: auto; }
  .banner-deco.d2 { bottom: 15%; right: 5%; left: auto; }
  
  /* --- 2. Contacts (LINE / IG) --- */
  /* แยกเป็นสองช่องชัดเจนตาม Request */
  .contacts { grid-template-columns: 1fr 1fr; gap: 12px; border: none; background: transparent; }
  .contact-btn { 
    flex-direction: row; gap: 10px; min-height: 64px; padding: 12px 14px; text-align: left;
    background: #fff; border-radius: 20px; box-shadow: var(--shadow-card);
    border: 1px solid #F1DCE3; justify-content: flex-start;
  }
  .contact-btn + .contact-btn { border-left: 1px solid #F1DCE3; }
  .contact-ic { width: 36px; height: 36px; }
  .contact-ic .ic { width: 18px; height: 18px; }
  .contact-txt b { font-size: .85rem; }
  .contact-txt small { font-size: .7rem; }
  
  /* --- Highlight --- */
  .hl-carousel { margin: 0 -14px; }
  .hl-row { gap: 14px; padding: 6px 14px 10px; scroll-padding-inline: 14px; }
  .hl-nav { top: 46px; width: 34px; height: 34px; }
  .hl-nav.prev { left: 4px; } .hl-nav.next { right: 4px; }
  .hl-nav svg { width: 16px; height: 16px; }
  .hl-item { width: 84px; }
  .hl-ring { width: 80px; height: 80px; padding: 2.5px; }
  .hl-img { border-width: 3px; }
  .hl-title { font-size: .82rem; }
  
  /* --- 3. Review Summary --- */
  /* กลับไปใช้รูปแบบเดิม (กราฟแยกส่วนกัน) */
  .summary { grid-template-columns: 1fr; padding: 20px 16px; align-items: start; }
  .shape-bar { justify-content: center; padding-bottom: 16px; border-bottom: 1px dashed #EBD3DB; margin-bottom: 12px; }
  .shape-label { width: 100%; text-align: center; }
  .shape-opts { gap: 6px; justify-content: center; }
  .shape-opt { flex-direction: column; gap: 1px; min-width: 54px; padding: 6px 6px 4px; border-radius: 14px; font-size: .72rem; }
  
  .sum-left { justify-items: center; text-align: center; }
  .score b { font-size: 2.8rem; }
  .score span { font-size: 1.2rem; }
  .sum-count { margin: 4px 0 12px; font-size: .8rem; }
  
  .vote-btns { flex-direction: row; justify-content: center; width: 100%; }
  .vote { min-height: 40px; border-radius: 999px; }
  .vote .v-num { min-width: 40px; font-size: 1rem; }
  .vote .v-label { padding: 0 12px; font-size: .8rem; display: grid; } /* นำ label กลับมาแสดง */
  .vote .v-count { display: grid; } /* นำ count กลับมาแสดง */
  
  .sum-bars { gap: 8px; margin-top: 10px; }
  .bar-row { grid-template-columns: 40px 1fr 66px; gap: 10px; font-size: .84rem; }
  
  /* --- 4. Reviews --- */
  /* ให้กล่องรีวิวแสดง 1 คอลัมน์บนมือถือ */
  .review-grid { grid-template-columns: 1fr; gap: 24px; }
  .review:nth-child(even) { margin-top: 0; }
  
  /* กลับไปใช้รูปแบบเดิม (แชทบับเบิ้ลมีหาง) */
  .bubble { 
    grid-template-columns: 36px 1fr; gap: 10px; 
    padding: 12px 14px 22px; 
    border-radius: 18px 18px 18px 4px; /* มุมแชทมีหางเหมือนเดิม */
  }
  .avatar { width: 36px; height: 36px; font-size: 1rem; }
  .rv-head { gap: 6px; justify-content: space-between; }
  .rv-name { font-size: .95rem; }
  .rv-text { font-size: .88rem; margin: 4px 0 8px; }
  
  /* นำปุ่ม Reply กลับไปไว้มุมขวาล่างแบบมีหาง */
  .reply-btn {
    position: absolute; right: 14px; bottom: -16px;
    display: inline-flex; margin-top: 0;
    border-radius: 999px 999px 4px 999px;
  }
  .reply-btn::after { display: block; border-left: 8px solid transparent; border-top: 8px solid var(--petal); right: 4px; bottom: -7px; } 
  .reply-btn.active::after, .reply-btn:hover::after { border-top-color: var(--berry); }
  
  .view-photo-btn { margin-top: 8px; }
  
  .polaroid-wrapper { margin-left: 12px; margin-top: 10px; }
  .reply-thread { margin-left: 18px; }
  .review .polaroid { width: 75%; margin-left: 10%; }
  
  .modal#composer { padding: 0; align-items: end; }
  .chat-card { width: 100%; max-height: 94dvh; border-radius: 24px 24px 0 0; }
  .story-frame { width: 100vw; height: 100dvh; border-radius: 0; aspect-ratio: auto; }
}

@media (max-width: 380px) {
  .vote .v-label { display: none; }
  .vote .v-num { min-width: 46px; }
}