/* NOW·STUDIO — Feedback: hero quote, collection, mini strip. Dùng chung: NOW Studio.html + feedback/index.html */
/* ── TESTIMONIAL ── */
#testimonial{background:var(--dark);text-align:center;--illus-bg:var(--dark);overflow:hidden;padding:0}
.t-hero{padding:100px 60px 64px}
.testimonial-quote{font-family:var(--serif);font-size:clamp(24px,3vw,40px);font-weight:400;font-style:italic;color:#f4efe6;max-width:820px;margin:0 auto;line-height:1.5;text-wrap:pretty}
.testimonial-quote::before{content:'\201C';color:var(--gold);margin-right:.08em}
.testimonial-quote::after{content:'\201D';color:var(--gold);margin-left:.08em}
.testimonial-author{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);text-wrap:balance}
.nfi path,.nfi circle,.nfi ellipse{vector-effect:non-scaling-stroke}
.t-illus{display:block;width:260px;max-width:70%;height:auto;margin:44px auto 26px;color:var(--gold)}
.t-illus-gap{display:block;height:40px}
.t-viewport{display:grid;outline:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.t-viewport:focus-visible{box-shadow:0 0 0 1px rgba(201,168,118,.45);border-radius:2px}
.t-slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateX(var(--t-from,0));transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s}
.t-slide.active{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease,transform .6s ease,visibility 0s}
.testimonial-dots{display:flex;justify-content:center;margin-top:30px}
button.t-dot{width:14px;height:34px;padding:0;border:0;border-radius:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
button.t-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.2);transition:background .3s}
button.t-dot:hover::before{background:rgba(255,255,255,0.4)}
button.t-dot.active::before{background:var(--gold)}
button.t-dot:focus{outline:0}
button.t-dot:focus-visible::before{box-shadow:0 0 0 3px var(--dark),0 0 0 4px var(--gold)}
.t-list{display:grid;grid-template-columns:repeat(var(--t-cols,3),minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08)}
.t-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:40px 22px 50px;background:var(--dark);border:0;border-radius:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .4s}
.t-card:hover{background:#1f1b18}
.t-card:focus{outline:0}
.t-card:focus-visible{box-shadow:inset 0 0 0 1px rgba(201,168,118,.6)}
.t-card-art{display:block;width:100%;max-width:170px;color:var(--gold);opacity:.62;transition:opacity .4s}
.t-illus-s{display:block;width:100%;height:auto}
.t-card:hover .t-card-art,.t-card.active .t-card-art{opacity:1}
.t-card-t{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px;min-width:0}
.t-card-n{font-family:var(--serif);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#d9d0c2;line-height:1.35;text-wrap:balance;transition:color .4s}
.t-card.active .t-card-n{color:var(--gold-light)}
.t-card-m{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9d9184}
.t-card::after{content:'';position:absolute;left:50%;bottom:24px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold);opacity:0;transition:opacity .4s}
.t-card.active::after{opacity:1}
.t-strip-wrap{background:var(--bg);padding:40px 60px 56px}
.t-strip-wrap:has(.t-strip[style*="none"]){display:none}
.t-strip{max-width:1120px;margin:0 auto;background:#221e1a;border:1px solid rgba(201,168,118,.12);border-radius:14px;overflow:hidden;text-align:left;--illus-bg:#221e1a;transition:border-color .4s,background .4s}
.t-strip:hover{border-color:rgba(201,168,118,.32);background:#25201c}
.t-strip:focus-within{border-color:rgba(201,168,118,.55)}
.t-strip-btn{display:block;width:100%;text-decoration:none;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.t-strip-btn:focus{outline:0}
.t-strip-btn:hover{color:inherit}
.t-strip-track{display:flex;transition:transform .9s cubic-bezier(.45,0,.2,1);will-change:transform}
.t-ms{flex:0 0 100%;min-width:0;box-sizing:border-box;display:grid;grid-template-columns:56px minmax(0,1fr) 20px;align-items:center;gap:22px;padding:22px 30px;min-height:132px}
.t-ms-art{width:56px;height:56px;border-radius:50%;border:1px solid rgba(201,168,118,.32);overflow:hidden;display:flex;justify-content:center;color:var(--gold)}
.t-ms-svg{flex:none;width:92px;height:auto;margin-top:6px}
.t-ms-art.ph{align-items:center;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold)}
.t-ms-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.t-ms-lab{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.t-ms-who{display:flex;align-items:baseline;gap:10px;min-width:0;white-space:nowrap}
.t-ms-name{font-size:13px;font-weight:500;letter-spacing:.06em;color:#f4efe6;flex:none}
.t-ms-meta{font-size:11px;letter-spacing:.08em;color:#9d9184;overflow:hidden;text-overflow:ellipsis}
.t-ms-meta::before{content:'·';margin-right:10px;color:#6b625a}
.t-ms-q{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.45;color:#cfc6b8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.t-ms-go{width:20px;height:20px;color:var(--gold);opacity:.55;transition:opacity .3s,transform .3s}
.t-strip:hover .t-ms-go,.t-strip:focus-within .t-ms-go{opacity:1;transform:translateX(3px)}
@media (max-width:900px){.t-strip-wrap{padding:32px 32px 44px}.t-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
@media (max-width:640px){
  .t-hero{padding:72px 24px 44px}
  .testimonial-quote{font-size:22px;line-height:1.55}
  .t-illus{width:190px;margin:30px auto 16px}
  .t-illus-gap{height:28px}
  .testimonial-author{font-size:10.5px;letter-spacing:.15em;line-height:1.8;max-width:300px;margin:0 auto}
  .testimonial-dots{margin-top:18px}
  button.t-dot{width:24px;height:44px}
  .t-list{grid-template-columns:minmax(0,1fr)}
  .t-card{flex-direction:row;align-items:center;gap:18px;padding:14px 48px 14px 24px;text-align:left}
  .t-card-art{width:84px;flex:none}
  .t-card-t{align-items:flex-start;gap:5px;margin:0}
  .t-card-n{font-size:13.5px;letter-spacing:.1em}
  .t-card-m{font-size:9.5px;letter-spacing:.16em}
  .t-card::after{left:auto;right:24px;bottom:auto;top:50%;margin:-2.5px 0 0}
  .t-strip-wrap{padding:20px 16px 32px}
  .t-strip{border-radius:12px}
  .t-ms{grid-template-columns:46px minmax(0,1fr) 14px;gap:14px;padding:16px 16px 16px 16px;min-height:112px}
  .t-ms-art{width:46px;height:46px}
  .t-ms-svg{width:76px;margin-top:5px}
  .t-ms-t{gap:4px}
  .t-ms-lab{font-size:8.5px;letter-spacing:.2em}
  .t-ms-who{gap:8px}
  .t-ms-name{font-size:12px;letter-spacing:.04em}
  .t-ms-meta{font-size:10px;letter-spacing:.04em}
  .t-ms-meta::before{margin-right:8px}
  .t-ms-q{font-size:15px;line-height:1.4}
  .t-ms-go{width:14px;height:14px}
}
@media (prefers-reduced-motion:reduce){.t-slide,.t-slide.active,.t-card,.t-card-art,.t-ms-go{transition:none;transform:none}.t-strip-track{transition:none}}