// D_full_booking.jsx — Direction D · Booking + Payment + Confirm + Account + Showroom + Story

function DCal({ selected, onSelect, month='Tháng 5 · MMXXVI', startDay=4, daysInMonth=31,
  reserved=[12,13,14,22,23,24,25], blackout=[1,7,14,21,28] }) {
  const cells = [];
  for (let i=0;i<startDay;i++) cells.push(null);
  for (let d=1;d<=daysInMonth;d++) cells.push(d);
  const isSel = (d) => selected && ((d===selected.start) || (selected.end && d>=selected.start && d<=selected.end));
  const isStart = d => selected && d===selected.start;
  const isEnd = d => selected && d===selected.end;
  return (
    <div style={{ fontFamily:D.sans }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16, paddingBottom:14, borderBottom:`1px solid ${D.lineBord}` }}>
        <div style={{ fontFamily:D.serif, fontSize:26, color:D.ink, letterSpacing:'-.01em' }}>{month}</div>
        <div style={{ fontFamily:D.sans, fontSize:10, letterSpacing:'.24em', color:D.bord, fontWeight:700 }}>← →</div>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:4, fontSize:9, letterSpacing:'.24em', textTransform:'uppercase', color:D.stone, marginBottom:6, fontWeight:700 }}>
        {['H','B','T','N','S','B','CN'].map((d,i)=><div key={i} style={{ textAlign:'center', padding:'4px 0' }}>{d}</div>)}
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:4 }}>
        {cells.map((d,i)=>{
          if (d===null) return <div key={i} style={{ height:44 }}/>;
          const res = reserved.includes(d);
          const bo = blackout.includes(d);
          const sel = isSel(d);
          const s = isStart(d), e = isEnd(d);
          let bg='transparent', fg=D.ink, deco=null;
          if (bo) { fg='rgba(26,21,18,.3)'; deco = <div style={{ position:'absolute', inset:6, background:`repeating-linear-gradient(135deg, rgba(26,21,18,.18) 0 1px, transparent 1px 5px)` }}/>; }
          else if (res) { bg=D.inkDeep; fg='rgba(255,255,255,.5)'; }
          else if (sel) { bg=D.bord; fg='#fff'; }
          return (
            <div key={i} onClick={()=>!bo && !res && onSelect && onSelect(d)}
              style={{ height:44, position:'relative', cursor:(bo||res)?'not-allowed':'pointer', background:bg,
                display:'flex', alignItems:'center', justifyContent:'center', fontFamily:D.serif, fontSize:16, color:fg, fontWeight:sel?500:400,
                textDecoration:res?'line-through':'none',
                border: (s||e) ? `1.5px solid ${D.bordDeep}` : '1px solid transparent',
                transition:'all .2s cubic-bezier(0.2,0.8,0.2,1)' }}>
              {deco}<span style={{ position:'relative', zIndex:1 }}>{d}</span>
            </div>
          );
        })}
      </div>
      <div style={{ display:'flex', gap:18, marginTop:18, paddingTop:14, borderTop:`1px solid ${D.lineBord}`, fontSize:9, letterSpacing:'.22em', textTransform:'uppercase', color:D.stone, fontWeight:700, flexWrap:'wrap' }}>
        <span style={{ display:'flex', alignItems:'center', gap:6 }}><span style={{ width:10, height:10, background:D.bord }}/> Buổi tối của anh</span>
        <span style={{ display:'flex', alignItems:'center', gap:6 }}><span style={{ width:10, height:10, background:D.inkDeep }}/> Đã giữ</span>
        <span style={{ display:'flex', alignItems:'center', gap:6 }}><span style={{ width:10, height:10, background:'repeating-linear-gradient(135deg, rgba(26,21,18,.2) 0 1px, transparent 1px 4px)' }}/> Nghỉ</span>
      </div>
    </div>
  );
}

function DBooking({ go, params }) {
  const g = GARMENTS.find(x => x.id === params?.id) || GARMENTS[0];
  const [sel, setSel] = React.useState({ start:3, end:6 });
  const [fitMode, setFitMode] = React.useState('showroom');
  const [fitTime, setFitTime] = React.useState('15:30');
  const [note, setNote] = React.useState('');
  const days = sel.end ? (sel.end - sel.start + 1) : 1;
  const deposit = 1500000;
  const total = g.price + deposit;

  return (
    <div style={{ background:D.paper, padding:'60px 60px 120px', minHeight:'100%' }}>
      <div style={{ maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16 }}>
          <DLabel>— IV — Giữ chỗ</DLabel>
          <DLabel>F·2·F — MMXXVI · 0503 · AQ·81 — nháp</DLabel>
        </div>
        <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:92, margin:'0 0 40px', letterSpacing:'-.03em', lineHeight:1, color:D.ink }}>
          Giữ một <span style={{ fontStyle:'italic', color:D.bord }}>buổi tối</span>.
        </h1>

        <div style={{ display:'grid', gridTemplateColumns:'1.25fr 1fr', background:D.paper, border:`1px solid ${D.bord}`, position:'relative' }}>
          {/* inner hairline */}
          <div style={{ position:'absolute', inset:8, border:`1px solid ${D.lineBord}`, pointerEvents:'none' }}/>
          {/* vertical perforation */}
          <div style={{ position:'absolute', left:'55.5%', top:20, bottom:20, borderLeft:`2px dashed ${D.bord}`, opacity:.35, zIndex:1 }}/>

          {/* Left panel */}
          <div style={{ padding:40, position:'relative' }}>
            <div style={{ display:'grid', gridTemplateColumns:'120px 1fr', gap:20, paddingBottom:24, borderBottom:`1px solid ${D.line}`, marginBottom:28 }}>
              <div style={{ width:120, height:150, backgroundImage:`url('${g.img}')`, backgroundSize:'cover', filter:D.imgCard, border:`1px solid ${D.line}` }}/>
              <div>
                <DLabel>Bộ vest</DLabel>
                <div style={{ fontFamily:D.serif, fontSize:30, color:D.ink, marginTop:6 }}>{g.name} <span style={{ fontStyle:'italic', color:D.bord, fontSize:22 }}>· {g.sub}</span></div>
                <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:14, color:D.stone, marginTop:4 }}>{g.mill} · Size 52</div>
                <div style={{ marginTop:12, fontFamily:D.sans, fontSize:10, letterSpacing:'.22em', color:D.bord, fontWeight:700, cursor:'pointer', textTransform:'uppercase' }} onClick={()=>go('pdp',{id:g.id})}>Đổi bộ vest →</div>
              </div>
            </div>

            <div style={{ marginBottom:28 }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:14 }}>
                <DLabel>I · Ngày mặc</DLabel>
                <span style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:15, color:D.bord }}>
                  {sel.start}{sel.end && sel.end !== sel.start ? ` – ${sel.end}` : ''} Tháng 5 · {days} ngày
                </span>
              </div>
              <DCal selected={sel} onSelect={d => setSel({ start: d, end: d + (g.days - 1) })}/>
            </div>

            <div>
              <DLabel style={{ marginBottom:14 }}>II · Thử đồ</DLabel>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:16 }}>
                {[
                  ['showroom','Thử tại showroom','142 Lê Thánh Tôn · 30 phút · miễn phí'],
                  ['delivery','Giao tận tay','Chúng tôi mang đến · chỉnh tại nhà anh'],
                ].map(([k,t,s])=>(
                  <div key={k} onClick={()=>setFitMode(k)} style={{ padding:'20px 22px',
                    border: fitMode===k ? `1.5px solid ${D.bord}` : `1px solid ${D.line}`,
                    background: fitMode===k ? 'rgba(107,18,32,.05)' : 'transparent', cursor:'pointer' }}>
                    <div style={{ fontFamily:D.serif, fontSize:22, color:D.ink, marginBottom:4 }}>{t}</div>
                    <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone }}>{s}</div>
                  </div>
                ))}
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap' }}>
                <DLabel style={{ marginRight:6 }}>Giờ:</DLabel>
                {['10:00','11:30','14:00','15:30','17:00','18:30'].map(t=>(
                  <DChip key={t} active={t===fitTime} onClick={()=>setFitTime(t)}>{t}</DChip>
                ))}
              </div>
            </div>

            <div style={{ marginTop:28 }}>
              <DLabel style={{ marginBottom:14 }}>III · Lời nhắn cho tailor <span style={{ opacity:.5, marginLeft:8 }}>(tuỳ chọn)</span></DLabel>
              <textarea value={note} onChange={e=>setNote(e.target.value)}
                placeholder="Vd: 'Hơi rộng ở vai — tôi sẽ cầm lời chúc. Đừng làm chặt quá cổ.'"
                style={{ width:'100%', minHeight:88, background:D.paperAlt, border:`1px solid ${D.line}`, color:D.ink,
                  fontFamily:D.serif, fontStyle:'italic', fontSize:15, padding:'16px 18px', outline:'none', resize:'vertical' }}/>
            </div>
          </div>

          {/* Right panel — ticket ledger */}
          <div style={{ padding:40, background:D.paperAlt, position:'relative' }}>
            <DLabel>Vé · nháp</DLabel>
            <div style={{ fontFamily:D.serif, fontSize:32, color:D.ink, marginTop:8, lineHeight:1.1 }}>
              {g.name} <span style={{ fontStyle:'italic', color:D.bord }}>· {g.sub}</span>
            </div>
            <DDivider style={{ margin:'20px 0' }}/>

            {[
              ['Ngày mặc',       `${sel.start} – ${sel.end} Tháng 5 · ${days} ngày`],
              ['Thử đồ',         fitMode==='showroom' ? `2 Thg 5 · ${fitTime} · Showroom` : `2 Thg 5 · ${fitTime} · Tại nhà`],
              ['Bộ vest',        formatVND(g.price)],
              ['Cọc (hoàn lại)', formatVND(deposit)],
              ['Bảo hiểm',       'Đã bao gồm'],
              ['Giặt, ủi sau',   'Đã bao gồm'],
            ].map(([k,v])=>(
              <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'11px 0', borderBottom:`1px dotted ${D.line}` }}>
                <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.22em', textTransform:'uppercase', color:D.stone, fontWeight:600 }}>{k}</span>
                <span style={{ fontFamily:D.serif, fontSize:15, color:D.ink }}>{v}</span>
              </div>
            ))}

            <div style={{ display:'flex', justifyContent:'space-between', padding:'22px 0 18px', marginTop:10, borderTop:`2px solid ${D.bord}`, fontFamily:D.serif, fontSize:26, alignItems:'baseline' }}>
              <span style={{ color:D.ink }}>Thanh toán hôm nay</span>
              <span style={{ color:D.bord }}>{formatVND(total)}</span>
            </div>

            <DBtn kind="bord" size="lg" fullWidth onClick={()=>go('payment',{ id:g.id, start:sel.start, end:sel.end, fitMode, fitTime })} style={{ marginTop:14 }}>Tiếp tục thanh toán →</DBtn>

            <div style={{ marginTop:14, padding:14, background:D.paper, border:`1px dashed ${D.bord}`, fontFamily:D.sans, fontSize:10, letterSpacing:'.14em', color:D.bord, textAlign:'center', fontWeight:700 }}>
              MÃ GIỮ CHỖ · F2F · MMXXVI · 0503 · AQ·81
            </div>

            <div style={{ marginTop:16, fontFamily:D.serif, fontSize:13, color:D.stone, fontStyle:'italic', lineHeight:1.55 }}>
              ✦ Có thể huỷ miễn phí trước 72h. Sau đó, cọc chuyển thành credit cho lần tiếp theo.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DQRBlock({ size=220, seed=31 }) {
  const n = 25;
  const cell = size / n;
  const rand = (i,j) => {
    const x = Math.sin((i+1) * 12.9898 + (j+1) * 78.233 + seed) * 43758.5453;
    return (x - Math.floor(x));
  };
  const finder = (ox, oy) => {
    const cells = [];
    for (let i=0;i<7;i++) for (let j=0;j<7;j++) {
      const edge = i===0||i===6||j===0||j===6;
      const inner = i>=2 && i<=4 && j>=2 && j<=4;
      if (edge || inner) cells.push(<rect key={`f-${ox}-${oy}-${i}-${j}`} x={(ox+i)*cell} y={(oy+j)*cell} width={cell} height={cell} fill={D.ink}/>);
    }
    return cells;
  };
  const cells = [];
  for (let i=0;i<n;i++) for (let j=0;j<n;j++) {
    const inFinder = (i<7 && j<7) || (i>=n-7 && j<7) || (i<7 && j>=n-7);
    if (inFinder) continue;
    if (rand(i,j) > 0.52) cells.push(<rect key={`c-${i}-${j}`} x={i*cell} y={j*cell} width={cell} height={cell} fill={D.ink}/>);
  }
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display:'block' }}>
      <rect width={size} height={size} fill="#fff"/>
      {cells}{finder(0,0)}{finder(n-7,0)}{finder(0,n-7)}
      <rect x={size/2-18} y={size/2-18} width={36} height={36} fill="#fff"/>
      <text x={size/2} y={size/2+4} textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="16" fontWeight="600" fill={D.bord}>F·F</text>
    </svg>
  );
}

function DPayment({ go, params }) {
  const g = GARMENTS.find(x => x.id === params?.id) || GARMENTS[0];
  const start = params?.start || 3, end = params?.end || 6;
  const days = end - start + 1;
  const deposit = 1500000;
  const balance = g.price + 300000;
  const total = g.price + deposit;
  const [method, setMethod] = React.useState('vietqr');
  const [copied, setCopied] = React.useState(false);
  const ref = 'F2F2026' + String(g.id).toUpperCase().slice(0,3) + String(start).padStart(2,'0');

  return (
    <div style={{ background:D.paper, minHeight:'100%' }}>
      {/* Step tracker */}
      <section style={{ borderBottom:`1px solid ${D.line}`, background:D.paper }}>
        <div style={{ maxWidth:1100, margin:'0 auto', padding:'22px 60px', display:'flex', alignItems:'center', gap:18, fontFamily:D.sans, fontSize:10, letterSpacing:'.22em', fontWeight:700, textTransform:'uppercase' }}>
          <span style={{ color:D.stone }}>I · Chọn bộ</span>
          <span style={{ color:D.line }}>———</span>
          <span style={{ color:D.stone }}>II · Ngày & Thử đồ</span>
          <span style={{ color:D.line }}>———</span>
          <span style={{ color:D.bord, display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ width:8, height:8, borderRadius:'50%', background:D.bord }}/> III · Đặt cọc
          </span>
          <span style={{ color:D.line }}>———</span>
          <span style={{ color:D.stone }}>IV · Vào tủ</span>
        </div>
      </section>

      <section style={{ maxWidth:1100, margin:'0 auto', padding:'60px 60px 100px' }}>
        <DLabel>— III — Giữ chỗ</DLabel>
        <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:78, margin:'14px 0 10px', letterSpacing:'-.03em', lineHeight:1, color:D.ink }}>
          Đặt <span style={{ fontStyle:'italic', color:D.bord }}>một triệu rưỡi</span>.<br/>
          Phần còn lại, khi thử vừa vặn.
        </h1>
        <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:18, color:D.stone, marginTop:18, maxWidth:620, lineHeight:1.55 }}>
          Cọc 1.500.000₫ giữ chỗ bộ vest và buổi thử — hoàn lại toàn bộ nếu bạn huỷ trước 72 giờ.
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:40, marginTop:48 }}>

          <div style={{ background:D.paper, border:`1px solid ${D.bord}`, padding:36, position:'relative' }}>
            <div style={{ position:'absolute', inset:8, border:`1px solid ${D.lineBord}`, pointerEvents:'none' }}/>
            <DLabel style={{ marginBottom:18 }}>Chọn phương thức</DLabel>
            <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:24 }}>
              {[
                ['vietqr',   'VietQR · Mọi ngân hàng', 'Quét bằng app ngân hàng · khoảng 30 giây'],
                ['transfer', 'Chuyển khoản thủ công',   'VCB · 007 1000 142 142 · F2F ATELIER'],
                ['fitting',  'Trả tại buổi thử',        'Tiền mặt hoặc POS · giữ chỗ bằng Zalo OTP'],
              ].map(([k,t,s])=>(
                <div key={k} onClick={()=>setMethod(k)} style={{ padding:'18px 20px', cursor:'pointer',
                  border: method===k ? `1.5px solid ${D.bord}` : `1px solid ${D.line}`,
                  background: method===k ? 'rgba(107,18,32,.05)' : 'transparent',
                  display:'grid', gridTemplateColumns:'20px 1fr', gap:14, alignItems:'start' }}>
                  <div style={{ width:14, height:14, borderRadius:'50%', border:`1.5px solid ${method===k ? D.bord : D.line}`, marginTop:4,
                    display:'flex', alignItems:'center', justifyContent:'center' }}>
                    {method===k && <div style={{ width:7, height:7, borderRadius:'50%', background:D.bord }}/>}
                  </div>
                  <div>
                    <div style={{ fontFamily:D.serif, fontSize:18, color:D.ink }}>{t}</div>
                    <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:2 }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>

            {method==='vietqr' && (
              <div style={{ padding:24, border:`1px dashed ${D.bord}`, background:D.paperAlt, display:'grid', gridTemplateColumns:'auto 1fr', gap:24, alignItems:'center' }}>
                <DQRBlock size={200} seed={start*31 + end*7}/>
                <div>
                  <DLabel style={{ color:D.bord, marginBottom:8 }}>Nội dung chuyển</DLabel>
                  <div style={{ fontFamily:D.sans, fontSize:12, color:D.ink, padding:'10px 12px', background:D.paper, border:`1px solid ${D.line}`, letterSpacing:'.08em', marginBottom:10, fontWeight:600 }}>{ref}</div>
                  <DLabel style={{ color:D.bord, marginBottom:6 }}>Số tiền cố định</DLabel>
                  <div style={{ fontFamily:D.serif, fontSize:28, color:D.bord, lineHeight:1, marginBottom:14 }}>{formatVND(deposit)}</div>
                  <div style={{ display:'flex', gap:8 }}>
                    <button onClick={()=>{ navigator.clipboard?.writeText(ref); setCopied(true); setTimeout(()=>setCopied(false),1500); }}
                      style={{ padding:'8px 14px', fontFamily:D.sans, fontSize:9, letterSpacing:'.22em', fontWeight:700, textTransform:'uppercase', cursor:'pointer',
                        background:'transparent', color:D.ink, border:`1px solid ${D.ink}` }}>
                      {copied ? 'Đã chép ✓' : 'Chép mã'}
                    </button>
                    <button style={{ padding:'8px 14px', fontFamily:D.sans, fontSize:9, letterSpacing:'.22em', fontWeight:700, textTransform:'uppercase', cursor:'pointer',
                      background:'transparent', color:D.ink, border:`1px solid ${D.ink}` }}>
                      Lưu ảnh QR
                    </button>
                  </div>
                </div>
              </div>
            )}
            {method==='transfer' && (
              <div style={{ padding:24, border:`1px dashed ${D.bord}`, background:D.paperAlt }}>
                {[
                  ['Ngân hàng','Vietcombank — Chi nhánh TPHCM'],
                  ['Số tài khoản','007 1000 142 142'],
                  ['Chủ tài khoản','CONG TY TNHH F2F ATELIER'],
                  ['Số tiền',formatVND(deposit)],
                  ['Nội dung',ref],
                ].map(([k,v])=>(
                  <div key={k} style={{ display:'grid', gridTemplateColumns:'130px 1fr', padding:'10px 0', borderBottom:`1px dotted ${D.line}`, alignItems:'center' }}>
                    <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.24em', color:D.stone, fontWeight:700, textTransform:'uppercase' }}>{k}</span>
                    <span style={{ fontFamily:D.serif, fontSize:15, color:D.ink }}>{v}</span>
                  </div>
                ))}
                <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:14, lineHeight:1.5 }}>
                  ✦ Anh Minh sẽ xác nhận trong vòng 1 giờ qua Zalo và gửi vé.
                </div>
              </div>
            )}
            {method==='fitting' && (
              <div style={{ padding:24, border:`1px dashed ${D.bord}`, background:D.paperAlt, fontFamily:D.serif, fontSize:15, color:D.ink, lineHeight:1.6 }}>
                Không cần thanh toán bây giờ. Chúng tôi giữ chỗ bằng xác nhận Zalo; bạn có 24 giờ để phản hồi. Thanh toán đầy đủ vào buổi thử — tiền mặt hoặc thẻ.
                <div style={{ marginTop:14, fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone }}>
                  ✦ Dành cho khách đã giao dịch với F2F từ tập trước.
                </div>
              </div>
            )}
          </div>

          {/* RIGHT — ledger */}
          <div>
            <div style={{ background:D.paperAlt, border:`1px solid ${D.line}`, padding:32 }}>
              <DLabel style={{ marginBottom:18 }}>Phiếu tạm · F·2·F</DLabel>
              <div style={{ paddingBottom:18, borderBottom:`1px solid ${D.line}` }}>
                <div style={{ fontFamily:D.serif, fontSize:28, color:D.ink, letterSpacing:'-.01em' }}>{g.name} <span style={{ fontStyle:'italic', color:D.bord, fontSize:22 }}>· {g.sub}</span></div>
                <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:4 }}>{g.mill} · Size 52</div>
              </div>
              {[
                ['Ngày mặc',       `${start} – ${end} Tháng 5 · ${days} ngày`],
                ['Buổi thử',       params?.fitMode==='delivery' ? `2 Thg 5 · ${params?.fitTime||'15:30'} · Tại nhà` : `2 Thg 5 · ${params?.fitTime||'15:30'} · Showroom`],
                ['Bộ vest',        formatVND(g.price)],
                ['Cọc (hoàn lại)', formatVND(deposit)],
                ['Bảo hiểm',       'Đã bao gồm'],
                ['Giặt, ủi sau',   'Đã bao gồm'],
              ].map(([k,v])=>(
                <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'12px 0', borderBottom:`1px dotted ${D.line}` }}>
                  <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.22em', textTransform:'uppercase', color:D.stone, fontWeight:700 }}>{k}</span>
                  <span style={{ fontFamily:D.serif, fontSize:14, color:D.ink }}>{v}</span>
                </div>
              ))}

              <div style={{ display:'flex', justifyContent:'space-between', padding:'20px 0 6px', marginTop:8, fontFamily:D.serif, fontSize:15, color:D.stone, alignItems:'baseline' }}>
                <span>Hôm nay (cọc)</span>
                <span style={{ color:D.bord, fontSize:22 }}>{formatVND(deposit)}</span>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', padding:'6px 0 14px', fontFamily:D.serif, fontSize:13, color:D.stone, alignItems:'baseline' }}>
                <span style={{ fontStyle:'italic' }}>Còn lại · trả tại buổi thử</span>
                <span style={{ fontFamily:D.sans, fontSize:12 }}>{formatVND(balance)}</span>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', padding:'16px 0 6px', marginTop:4, borderTop:`2px solid ${D.bord}`, fontFamily:D.serif, fontSize:18, alignItems:'baseline' }}>
                <span style={{ color:D.ink }}>Tổng cộng</span>
                <span style={{ color:D.ink }}>{formatVND(total)}</span>
              </div>
            </div>

            <DBtn kind="bord" size="lg" fullWidth onClick={()=>go('confirm',{ id:g.id, start, end, fitMode:params?.fitMode, fitTime:params?.fitTime, method })} style={{ marginTop:16 }}>
              {method==='fitting' ? 'Giữ chỗ qua Zalo →' : 'Tôi đã chuyển khoản →'}
            </DBtn>
            <div style={{ marginTop:12, textAlign:'center' }}>
              <span onClick={()=>go('booking',{ id:g.id })} style={{ fontFamily:D.sans, fontSize:10, letterSpacing:'.22em', fontWeight:700, color:D.stone, cursor:'pointer', textTransform:'uppercase' }}>
                ← Quay lại chọn ngày
              </span>
            </div>

            <div style={{ marginTop:24, padding:'18px 20px', background:D.paper, border:`1px solid ${D.line}`, display:'grid', gridTemplateColumns:'20px 1fr', gap:12, alignItems:'start' }}>
              <div style={{ fontFamily:D.serif, fontSize:20, color:D.bord, lineHeight:1 }}>✦</div>
              <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:14, color:D.ink, lineHeight:1.55 }}>
                Cọc hoàn lại toàn bộ nếu huỷ trước 72 giờ. Sau đó, cọc chuyển thành credit giữ nguyên giá trị cho lần sau.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function DConfirm({ go, params }) {
  const g = GARMENTS.find(x => x.id === params?.id) || GARMENTS[0];
  const start = params?.start || 3, end = params?.end || 6;
  return (
    <div style={{ background:D.paper, padding:'80px 60px 120px', minHeight:'100%' }}>
      <div style={{ maxWidth:900, margin:'0 auto', textAlign:'center' }}>
        <DSeal size={64} style={{ margin:'0 auto 24px' }}/>
        <DLabel style={{ marginBottom:20 }}>— V — Đã nhận · Cảm ơn anh</DLabel>
        <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:112, letterSpacing:'-.035em', lineHeight:1, color:D.ink, margin:0 }}>
          Ngày <span style={{ fontStyle:'italic', color:D.bord }}>mùng {start}</span>,<br/>tại <span style={{ fontStyle:'italic', color:D.bord }}>phòng vest</span>.
        </h1>
        <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:20, color:D.stone, marginTop:32, lineHeight:1.6, maxWidth:580, margin:'32px auto 0' }}>
          {g.name} sẽ được ủi, treo sẵn dưới tên bạn. Buổi thử vào mùng 2, lúc 3:30 chiều. Bạn sẽ nhận email và tin nhắn Zalo sáng mai.
        </div>
      </div>

      <div style={{ maxWidth:720, margin:'64px auto 0' }}>
        <DTicket garment={`${g.name} · ${g.sub}`} mill={`${g.mill} · Size 52`}
          wear={`${start} – ${end} Tháng 5, 2026`} fitting="2 Thg 5 · 15:30 · Showroom" total={formatVND(g.price + 1500000)} status="confirmed"/>
      </div>

      <div style={{ maxWidth:720, margin:'48px auto 0', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
        <DBtn kind="ink" size="md" fullWidth>Tải vé PDF</DBtn>
        <DBtn kind="ink" size="md" fullWidth>Thêm vào lịch</DBtn>
        <DBtn kind="bord" size="md" fullWidth onClick={()=>go('account')}>Mở tủ của tôi</DBtn>
      </div>

      <div style={{ maxWidth:900, margin:'80px auto 0', padding:'36px 40px', border:`1px solid ${D.line}`, background:D.paper }}>
        <DLabel>Tiếp theo sẽ ra sao</DLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24, marginTop:24 }}>
          {[
            ['Hôm nay',     'Xác nhận Zalo',     'Anh Minh nhắn trong 1 giờ.'],
            ['2 Thg 5',     'Buổi thử · 15:30',  'Trà sẽ được rót.'],
            ['3 Thg 5',     `${g.name} đã ủi`,   'Giao tại 17:00.'],
            ['7 Thg 5',     'Nhận lại',          'Chúng tôi ghé lấy.'],
          ].map(([d,t,s],i)=>(
            <div key={i} style={{ borderTop: `1px solid ${D.lineBord}`, paddingTop:14 }}>
              <DLabel>{toRoman(i+1)} · {d}</DLabel>
              <div style={{ fontFamily:D.serif, fontSize:20, color:D.ink, marginTop:6 }}>{t}</div>
              <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:2 }}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DAccount({ go }) {
  const tickets = [
    { code:'F·2·F · MMXXVI · 0503 · AQ·81', g:GARMENTS[0], wear:'3 – 6 Tháng 5, 2026',   fit:'2 Thg 5 · 15:30',  total:'4.300.000₫', status:'confirmed' },
    { code:'F·2·F · MMXXVI · 0422 · KL·37', g:GARMENTS[3], wear:'22 Tháng 5, 2026',       fit:'21 Thg 5 · 10:00', total:'3.900.000₫', status:'fitting' },
    { code:'F·2·F · MMXXV · 1109 · BT·05',  g:GARMENTS[2], wear:'9 – 11 Tháng 11, 2025',  fit:'Đã thử',            total:'5.100.000₫', status:'worn' },
    { code:'F·2·F · MMXXV · 0614 · MN·22',  g:GARMENTS[1], wear:'14 – 17 Tháng 6, 2025',  fit:'Đã thử',            total:'4.700.000₫', status:'returned' },
  ];
  const [tab, setTab] = React.useState('upcoming');
  const filtered = tickets.filter(t => tab==='upcoming' ? ['confirmed','fitting'].includes(t.status) : ['worn','returned'].includes(t.status));

  return (
    <div style={{ background:D.paper, minHeight:'100%' }}>
      <section style={{ padding:'60px 60px 40px', maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <div>
            <DLabel>— Tủ của tôi — Chào mừng trở lại</DLabel>
            <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:84, margin:'14px 0 0', letterSpacing:'-.025em', color:D.ink, lineHeight:1 }}>
              Những buổi tối của <span style={{ fontStyle:'italic', color:D.bord }}>Dương</span>.
            </h1>
            <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:17, color:D.stone, marginTop:12 }}>
              Thành viên từ Tháng 3, MMXXV · 4 tối · 3 sự kiện
            </div>
          </div>
          <DBtn kind="bord" size="md" onClick={()=>go('occasions')}>Đặt bộ mới</DBtn>
        </div>
      </section>

      <section style={{ padding:'20px 60px 60px', maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, borderTop:`1px solid ${D.lineBord}`, borderBottom:`1px solid ${D.lineBord}`, padding:'28px 0' }}>
          {[
            ['Tối đã đặt',    '4',    'Kể từ MMXXV'],
            ['Đã tiết kiệm',  '46tr', 'So với may mới'],
            ['Lần tiếp theo', '3 Thg 5', 'Còn 16 ngày'],
            ['Credit',        '0₫',   'Chưa sử dụng'],
          ].map(([k,v,s],i)=>(
            <div key={k}>
              <DLabel>{k}</DLabel>
              <div style={{ fontFamily:D.serif, fontSize:44, color:D.ink, lineHeight:1, marginTop:6 }}>{v}</div>
              <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:4 }}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding:'0 60px 20px', maxWidth:1280, margin:'0 auto', display:'flex', gap:28 }}>
        {[['upcoming','Sắp tới'],['past','Đã qua']].map(([k,l])=>(
          <div key={k} onClick={()=>setTab(k)} style={{ cursor:'pointer', padding:'10px 0', fontFamily:D.sans, fontSize:10, letterSpacing:'.26em', textTransform:'uppercase', fontWeight:700,
            color: tab===k ? D.bord : D.stone, borderBottom: tab===k ? `1.5px solid ${D.bord}` : '1.5px solid transparent' }}>{l}</div>
        ))}
      </section>

      <section style={{ padding:'20px 60px 120px', maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'grid', gap:24 }}>
          {filtered.map(t => (
            <div key={t.code} onClick={()=>go('confirm',{ id:t.g.id })} style={{ cursor:'pointer' }}>
              <DTicket code={t.code} garment={`${t.g.name} · ${t.g.sub}`} mill={t.g.mill}
                wear={t.wear} fitting={t.fit} total={t.total} status={t.status}
                ghost={['worn','returned'].includes(t.status)}/>
            </div>
          ))}
          {filtered.length===0 && (
            <div style={{ textAlign:'center', padding:'60px 0', fontFamily:D.serif, fontStyle:'italic', fontSize:18, color:D.stone }}>
              Chưa có tối nào trong tab này.
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function DShowroom({ go }) {
  const [slot, setSlot] = React.useState('Thứ Bảy · 15:30');
  return (
    <div style={{ background:D.paper, minHeight:'100%' }}>
      <section style={{ position:'relative', minHeight:520, padding:'100px 60px' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:"url('assets/photos/detail_01.jpg')", backgroundSize:'cover', backgroundPosition:'center', filter:D.imgHero, opacity:.45 }}/>
        <div style={{ position:'absolute', inset:0, background:`linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.95) 100%)` }}/>
        <div style={{ position:'relative', maxWidth:1100, margin:'0 auto', textAlign:'center' }}>
          <DSeal size={56} style={{ margin:'0 auto 22px' }}/>
          <DLabel style={{ marginBottom:22 }}>Phòng vest · 142 Lê Thánh Tôn · Q1</DLabel>
          <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:116, margin:0, letterSpacing:'-.035em', lineHeight:1, color:D.ink }}>
            Một <span style={{ fontStyle:'italic', color:D.bord }}>ấm trà</span>.<br/>Sáu bộ vest.
          </h1>
          <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:20, color:D.stone, marginTop:28, maxWidth:620, margin:'28px auto 0', lineHeight:1.55 }}>
            Không form. Không báo giá. Ba mươi phút bạn, master tailor, và tủ đồ của mùa này. Không ràng buộc — chỉ là chuyện trò.
          </div>
        </div>
      </section>

      <section style={{ padding:'80px 60px', maxWidth:1100, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, background:D.paper, border:`1px solid ${D.bord}`, padding:48, position:'relative' }}>
          <div style={{ position:'absolute', inset:8, border:`1px solid ${D.lineBord}`, pointerEvents:'none' }}/>
          <div style={{ position:'relative' }}>
            <DLabel>Đặt lịch ghé thăm</DLabel>
            <h2 style={{ fontFamily:D.serif, fontWeight:300, fontSize:44, margin:'12px 0 20px', letterSpacing:'-.02em', color:D.ink }}>
              Cuối tuần này <span style={{ fontStyle:'italic', color:D.bord }}>còn trống</span>.
            </h2>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {['Thứ Sáu · 10:00','Thứ Sáu · 14:00','Thứ Bảy · 11:00','Thứ Bảy · 15:30','Thứ Bảy · 17:00','Chủ nhật · 10:30','Chủ nhật · 14:00'].map(s=>(
                <div key={s} onClick={()=>setSlot(s)} style={{ padding:'16px 20px', cursor:'pointer',
                  border: s===slot ? `1.5px solid ${D.bord}` : `1px solid ${D.line}`,
                  background: s===slot ? 'rgba(107,18,32,.05)' : 'transparent',
                  display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                  <span style={{ fontFamily:D.serif, fontSize:20, color:D.ink }}>{s}</span>
                  <DLabel>{s===slot ? 'Đã chọn' : 'Còn trống'}</DLabel>
                </div>
              ))}
            </div>
            <DBtn kind="bord" size="lg" fullWidth style={{ marginTop:20 }}>Xác nhận {slot}</DBtn>
          </div>
          <div style={{ position:'relative' }}>
            <DLabel>Trong buổi gặp</DLabel>
            <div style={{ marginTop:16 }}>
              {[
                ['I','Trà & giới thiệu','Mười lăm phút. Bạn kể về mấy buổi tối sắp tới.'],
                ['II','Đo ba vòng căn bản','Vai, eo, dài tay — không chi tiết, không ràng buộc.'],
                ['III','Sáu bộ vest đã treo sẵn','Master tailor chọn theo lời bạn kể. Bạn mặc thử bộ nào thích.'],
                ['IV','Giữ chỗ (nếu muốn)','Đặt cọc tại chỗ; vé Zalo nhận trong 5 phút.'],
              ].map(([n,t,s])=>(
                <div key={n} style={{ padding:'18px 0', borderBottom:`1px solid ${D.line}`, display:'grid', gridTemplateColumns:'44px 1fr', gap:14 }}>
                  <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:24, color:D.bord, lineHeight:1 }}>{n}.</div>
                  <div>
                    <div style={{ fontFamily:D.serif, fontSize:20, color:D.ink }}>{t}</div>
                    <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:13, color:D.stone, marginTop:2 }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop:20, padding:'18px 20px', background:D.paperAlt, fontFamily:D.serif, fontStyle:'italic', fontSize:15, color:D.ink, lineHeight:1.5 }}>
              ✦ Miễn phí. Không cần giữ chỗ tối sau buổi gặp — nhưng 8 trong 10 khách đều giữ.
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding:'0 60px 120px', maxWidth:1280, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:40 }}>
          <div style={{ aspectRatio:'16/10', backgroundImage:"url('assets/photos/detail_06.jpg')", backgroundSize:'cover', filter:D.imgEd, border:`1px solid ${D.line}` }}/>
          <div style={{ padding:20 }}>
            <DLabel>Chỉ đường</DLabel>
            <div style={{ fontFamily:D.serif, fontSize:44, color:D.ink, marginTop:14, letterSpacing:'-.02em', lineHeight:1.05 }}>
              142 Lê Thánh Tôn<br/><span style={{ fontStyle:'italic', color:D.bord }}>Quận 1, Sài Gòn</span>
            </div>
            <DDivider style={{ margin:'24px 0' }}/>
            {[
              ['Giờ mở','Thứ Ba – Chủ nhật · 10:00 – 20:00 (đóng Thứ Hai)'],
              ['Điện thoại','+84 28 3823 4567'],
              ['Zalo','f2f.saigon · hồi đáp TB 4 phút'],
              ['Đỗ xe','Vincom Đồng Khởi · 3 phút đi bộ'],
              ['Gần nhất','Park Hyatt · Caravelle · Nhà hát Thành phố'],
            ].map(([k,v])=>(
              <div key={k} style={{ padding:'12px 0', borderBottom:`1px dotted ${D.line}`, display:'grid', gridTemplateColumns:'140px 1fr' }}>
                <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.24em', textTransform:'uppercase', color:D.stone, fontWeight:700 }}>{k}</span>
                <span style={{ fontFamily:D.serif, fontSize:16, color:D.ink }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function DStory({ go }) {
  return (
    <div style={{ background:D.paper, minHeight:'100%' }}>
      <section style={{ padding:'90px 60px 40px', maxWidth:1100, margin:'0 auto', textAlign:'center' }}>
        <DSeal size={64} style={{ margin:'0 auto 24px' }}/>
        <DLabel>Tập · I · Tuyên ngôn · Thg 4 · MMXXVI</DLabel>
        <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:140, margin:'24px 0 0', letterSpacing:'-.04em', lineHeight:.94, color:D.ink }}>
          Bạn nên sở hữu<br/><span style={{ fontStyle:'italic', color:D.bord }}>ký ức</span>.
        </h1>
        <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:22, color:D.stone, marginTop:28, lineHeight:1.55 }}>
          Không phải bộ vest. Về một phép tính sai mà đàn ông Việt Nam vẫn trả, và về ngôi nhà sinh ra để gỡ nó.
        </div>
        <DRule style={{ marginTop:56 }} wide/>
      </section>

      {/* Big 87% — on white */}
      <section style={{ padding:'60px 60px', textAlign:'center' }}>
        <div style={{ fontFamily:D.serif, fontWeight:300, fontSize:400, letterSpacing:'-.07em', lineHeight:.82, color:D.bord }}>
          87<span style={{ fontSize:130, verticalAlign:'super', color:D.goldSoft }}>%</span>
        </div>
        <DLabel style={{ marginTop:10 }}>n = 412 · đàn ông Việt Nam 28–42 · F2F nội bộ · MMXXIV</DLabel>
      </section>

      {/* Body copy — editorial two-column */}
      <section style={{ padding:'60px 60px 100px', maxWidth:1000, margin:'0 auto' }}>
        <div style={{ columnCount:2, columnGap:52, fontFamily:D.body, fontSize:19, lineHeight:1.8, color:D.ink }}>
          <p style={{ marginTop:0 }}>
            <span style={{ fontFamily:D.serif, fontSize:80, float:'left', lineHeight:.8, marginRight:12, color:D.bord, fontWeight:300 }}>M</span>
            ười lăm triệu đồng. Bốn lần thử. Bảy tuần chờ. Đó là cái giá trung bình cho một bộ vest bespoke tại Sài Gòn. Và trong khảo sát của chúng tôi với 412 người đàn ông từ 28 đến 42 tuổi, 87% mặc bộ vest ấy đúng hai lần: lễ hỏi, rồi lễ cưới. Sau đó, ba mươi năm trong tủ.
          </p>
          <p>F2F không ra đời để bán thêm vest. Chúng tôi ra đời để gỡ bỏ phép tính này. Một bộ vest Savile Row — vải Anh, kiểu Ý, cắt bởi master đào tạo tại London — cho đúng buổi tối bạn cần, rồi trả lại. Giá bằng một bữa tối tại Park Hyatt. Thời gian bằng một cuộc gọi điện thoại.</p>
          <p>Đây không phải là thuê vest. Cho thuê vest là Sharetribe dành cho đàn ông không có lựa chọn. F2F là một ngôi nhà. Mỗi bộ vest được tailor của chúng tôi chấm, gắn tên, và giữ trong tủ gỗ — không phải trong kho. Khi bạn giữ chỗ, chúng tôi không lấy ra một sản phẩm; chúng tôi để dành một buổi tối.</p>
          <p>Khi bạn đến, trà đã được rót. Bộ vest đã được ủi. Tên bạn đã trên phiếu. Master tailor chỉnh cho vai bạn, eo bạn, và buổi tối phía trước. Bạn mặc. Bạn để lại ấn tượng. Bạn trả. Chúng tôi giặt, ủi, gập — và đợi bộ vest tiếp theo xứng đáng với nó.</p>
          <p style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:28, color:D.bord, breakInside:'avoid', marginTop:32, lineHeight:1.4 }}>
            Một người đàn ông không mặc một bộ vest nhiều lần. Anh ta bước vào nhiều căn phòng khác nhau. F2F tin rằng mỗi căn phòng xứng đáng một bộ vest riêng — và không một căn phòng nào xứng đáng một túi vải trong tủ suốt ba mươi năm.
          </p>
          <p>Đây là Tập. I. Sáu bộ vest, sáu sự kiện, một xưởng nhỏ ở 142 Lê Thánh Tôn. Không ràng buộc. Không phí thành viên. Chỉ một cuốn lịch, một ấm trà, và một câu hỏi đơn giản: <em style={{ color:D.bord }}>Là buổi tối nào vậy?</em></p>
        </div>
      </section>

      <section style={{ padding:'0 60px 120px', maxWidth:1000, margin:'0 auto', textAlign:'center' }}>
        <DRule style={{ marginBottom:36 }} wide/>
        <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:26, color:D.ink }}>— Ban biên tập F·2·F</div>
        <DLabel style={{ marginTop:10 }}>Sài Gòn · 14 Thg 4 · MMXXVI</DLabel>
        <div style={{ marginTop:40, display:'flex', gap:14, justifyContent:'center' }}>
          <DBtn kind="bord" size="lg" onClick={()=>go('occasions')}>Chọn bộ vest</DBtn>
          <DBtn kind="ink" size="lg" onClick={()=>go('showroom')}>Ghé phòng vest</DBtn>
        </div>
      </section>
    </div>
  );
}

// Occasions list (full page) — uses collection with all events
function DOccasions({ go }) {
  return (
    <div style={{ background:D.paper, padding:'80px 60px 120px' }}>
      <div style={{ maxWidth:1400, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:60 }}>
          <DLabel>— Sự kiện —</DLabel>
          <h1 style={{ fontFamily:D.serif, fontWeight:300, fontSize:108, margin:'16px 0 0', letterSpacing:'-.035em', lineHeight:.98, color:D.ink }}>
            Là buổi tối <span style={{ fontStyle:'italic', color:D.bord }}>nào vậy?</span>
          </h1>
          <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:18, color:D.stone, marginTop:20 }}>
            Sáu loại buổi tối — mỗi loại một chương.
          </div>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
          {OCCASIONS.map((o, i)=>(
            <div key={o.id} onClick={()=>{ setActiveOccD(o.id); go('collection', { occ: o.id }); }}
              style={{ position:'relative', height:360, cursor:'pointer', overflow:'hidden', background:o.tone, border:`1px solid ${D.line}` }}>
              <div style={{ position:'absolute', inset:0, backgroundImage:`url('${o.img}')`, backgroundSize:'cover', backgroundPosition:'center', filter:D.imgHero, opacity:.82 }}/>
              <div style={{ position:'absolute', inset:0, background:`linear-gradient(to top, ${o.tone}ee 0%, ${o.tone}55 40%, transparent 75%)` }}/>
              <div style={{ position:'absolute', inset:12, border:`1px solid rgba(255,255,255,.2)` }}/>
              <div style={{ position:'absolute', top:20, left:20, right:20, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:18, color:'rgba(255,255,255,.85)' }}>{toRoman(i+1)}</span>
                <span style={{ fontFamily:D.sans, fontSize:9, letterSpacing:'.3em', color:'rgba(255,255,255,.85)', fontWeight:700 }}>{o.n} BỘ</span>
              </div>
              <div style={{ position:'absolute', bottom:26, left:26, right:26, color:'#fff' }}>
                <div style={{ fontFamily:D.serif, fontWeight:300, fontSize:44, lineHeight:1, letterSpacing:'-.02em' }}>{o.t}</div>
                <div style={{ fontFamily:D.serif, fontStyle:'italic', fontSize:15, color:'rgba(255,255,255,.85)', marginTop:8 }}>{o.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DBooking, DPayment, DConfirm, DAccount, DShowroom, DStory, DOccasions });