*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --gold: #B5871A;
    --gold-light: #CDA030;
    --gold-pale: #E8C870;
    --forest: #F8F4EE;
    --forest-mid: #FFFDF8;
    --forest-light: #F3EDD8;
    --navy: #2A1F0E;
    --navy-mid: #6B5535;
    --navy-light: #B5871A;
    --cream: #1C1C1E;
    --cream-warm: rgba(28,28,30,0.5);
    --silver: #888888;
  }
  html { scroll-behavior: smooth; }
  body {
    background: linear-gradient(160deg, #F9F5F0 0%, #F4EDE4 50%, #EEE3D6 100%);
    background-attachment: fixed;
    color: var(--navy);
    font-family: 'Lora', serif;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .stars-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .star { position: absolute; border-radius: 50%; background: var(--gold); opacity: 0; animation: twinkle var(--dur,4s) var(--delay,0s) infinite; }
  @keyframes twinkle { 0%,100%{opacity:0} 50%{opacity:var(--max-op,0.4)} }
  .ocean-bg { position: fixed; bottom: 0; left: 0; right: 0; height: 180px; pointer-events: none; z-index: 0; opacity: 0.18; overflow: hidden; }
  .wave { position: absolute; bottom: 0; width: 200%; height: 120px; border-radius: 50% 50% 0 0; }
  .wave-1 { background: linear-gradient(180deg, var(--navy-light), transparent); animation: waveMove 8s linear infinite; bottom: 10px; }
  .wave-2 { background: linear-gradient(180deg, var(--gold), transparent); animation: waveMove 12s linear infinite reverse; bottom: 0; opacity: 0.5; }
  @keyframes waveMove { 0%{transform:translateX(-50%)} 100%{transform:translateX(0%)} }
  .page-wrapper { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 40px 20px 80px; }
  .invitation-card {
    border: 1px solid rgba(181,135,26,0.30);
    position: relative;
    background:
      linear-gradient(160deg, rgba(255,253,248,0.97) 0%, rgba(252,247,236,0.98) 100%);
    box-shadow: 0 8px 60px rgba(181,135,26,0.12), 0 2px 20px rgba(0,0,0,0.07);
    animation: fadeInUp 1.2s ease both;
    overflow: hidden;
  }
  /* Decorative SVG pattern layer */
  .card-pattern {
    position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  }
  .card-inner { position:relative; z-index:1; padding: 60px 70px; }
  @media(max-width:600px){ .card-inner{padding:36px 22px;} }
  .invitation-card::before,.invitation-card::after { content:''; position:absolute; width:60px; height:60px; border-color:var(--gold); border-style:solid; opacity:0.5; z-index:2; }
  .invitation-card::before { top:12px; left:12px; border-width:1px 0 0 1px; }
  .invitation-card::after  { bottom:12px; right:12px; border-width:0 1px 1px 0; }
  .corner-tr,.corner-bl { position:absolute; width:60px; height:60px; border-color:var(--gold); border-style:solid; opacity:0.5; z-index:2; }
  .corner-tr { top:12px; right:12px; border-width:1px 1px 0 0; }
  .corner-bl { bottom:12px; left:12px; border-width:0 0 1px 1px; }
  @keyframes fadeInUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

  /* Gold bar shimmer sweep */
  @keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }

  /* Scroll reveal */
  .reveal { opacity:0; transform:translateY(22px); transition:opacity 0.65s ease, transform 0.65s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* HERO */
  .hero-ship { width:100%; position:relative; height:340px; overflow:hidden; }
  .hero-ship img { width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block; filter:brightness(0.58) saturate(1.1); }
  .hero-overlay {
    position:absolute; inset:0;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.12) 0%,
      rgba(0,0,0,0.0) 30%,
      rgba(255,248,240,0.6) 75%,
      rgba(255,252,248,1) 100%);
  }
  .hero-caption {
    position:absolute; bottom:22px; left:0; right:0;
    text-align:center;
    font-family:'Playfair Display',serif;
    font-size:14px;
    letter-spacing:7px;
    color:var(--gold-light);
    text-transform:uppercase;
    opacity:0.9;
  }

  .gold-bar {
    height:3px;
    background:linear-gradient(90deg, transparent 0%, var(--gold-light) 20%, #fff 50%, var(--gold-light) 80%, transparent 100%);
    background-size:200% 100%;
    animation: goldShimmer 3.5s 2s linear infinite;
  }
  .gold-bar-top { margin-bottom: 0; }

  .crest-area { text-align:center; margin-bottom:28px; }
  .crest-svg { width:120px; height:auto; margin:0 auto 16px; display:block; object-fit:contain; background:#fff; padding:8px; border-radius:4px; box-shadow:0 2px 16px rgba(0,0,0,0.2); }
  .company-name { font-family:'Playfair Display',serif; font-size:15px; letter-spacing:5px; color:var(--gold); text-transform:uppercase; font-weight:700; }

  .divider { display:flex; align-items:center; gap:16px; margin:26px 0; }
  .divider-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
  .divider-diamond { width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }

  .invite-header { text-align:center; }
  .invite-label { font-family:'Playfair Display',serif; font-size:14px; letter-spacing:8px; color:var(--gold); opacity:1; text-transform:uppercase; margin-bottom:14px; }
  .invite-main-title {
    font-family:'Playfair Display',serif;
    text-align:center; margin-bottom:8px; line-height:1;
  }
  /* "LỄ HẠ THỦY" / "LỄ ĐẶT KY" — label tier */
  .t-label {
    font-size:clamp(22px,2.8vw,30px);
    letter-spacing:clamp(6px,1.5vw,12px);
    color:var(--gold-light);
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:6px;
    margin-top:18px;
    opacity:0.85;
  }
  .t-label:first-child { margin-top:0; }
  /* "TÀU DẦU HÓA CHẤT" — main big */
  .t-main {
    font-size:clamp(30px,4.2vw,46px);
    font-weight:700;
    color:var(--gold-light);
    letter-spacing:2px;
    line-height:1.15;
    margin-bottom:6px;
  }
  /* "TÀU CHỞ HÀNG TỔNG HỢP" — slightly smaller */
  .t-main-sm {
    font-size:clamp(30px,4.2vw,46px);
  }
  /* "(11.500 m³)" */
  .t-spec {
    font-size:clamp(22px,3vw,32px);
    font-style:italic;
    color:var(--gold-light);
    letter-spacing:4px;
    margin-bottom:4px;
  }
  /* "&" separator */
  .t-sep {
    font-size:clamp(22px,3vw,32px);
    color:var(--gold-light);
    opacity:0.5;
    letter-spacing:10px;
    margin:14px 0;
    font-weight:400;
  }
  /* "RS65-05" */
  .t-code {
    font-size:clamp(22px,3vw,32px);
    font-style:italic;
    color:var(--gold-light);
    letter-spacing:4px;
    margin-top:4px;
  }
  @media(max-width:600px){
    .t-label { letter-spacing:5px; margin-top:14px; }
    .t-sep { letter-spacing:6px; margin:10px 0; }
  }
  .invite-sub { font-family:'Lora',serif; font-style:italic; font-size:clamp(18px,3vw,23px); color:var(--navy); opacity:1; font-weight:500; margin-top:22px; }
  .mob-br { display:none; }
  @media(max-width:600px){ .mob-br { display:block; } }

  .invite-body { text-align:center; margin:32px 0 20px; }
  .formal-text { font-size:clamp(17px,2.5vw,21px); line-height:2; color:#4A3020; opacity:1; font-style:italic; max-width:620px; margin:0 auto; }

  .events-section { margin:36px 0; }
  .section-title { font-family:'Playfair Display',serif; font-size:13px; letter-spacing:6px; color:var(--gold); opacity:1; text-transform:uppercase; text-align:center; margin-bottom:28px; font-weight:700; }
  .timeline { position:relative; }
  .timeline::before {
    content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
    background:linear-gradient(180deg,transparent,rgba(200,104,26,0.3) 10%,rgba(200,104,26,0.3) 90%,transparent);
    transform:translateX(-50%);
  }
  @media(max-width:620px){ .timeline::before{left:28px;} }
  .event-item { display:grid; grid-template-columns:1fr 60px 1fr; gap:0 16px; align-items:start; margin-bottom:32px; position:relative; }
  @media(max-width:620px){
    .event-item { display:flex; flex-direction:row; align-items:flex-start; gap:14px; }
    .event-item > div:not(.event-card):not(.event-mid) { display:none; }
    .event-mid { flex-shrink:0; order:-1; }
    .event-card-left, .event-card-right { flex:1; min-width:0; text-align:left; }
  }
  .event-card { border:1px solid rgba(200,104,26,0.18); padding:22px 24px; background:rgba(200,104,26,0.04); transition:background 0.3s,border-color 0.3s; }
  .event-card:hover { background:rgba(200,104,26,0.09); border-color:rgba(200,104,26,0.4); }
  .event-card-left { text-align:right; }
  .event-card-right { text-align:left; }
  .event-date-badge {
    font-family:'Playfair Display',serif; font-size:15px; letter-spacing:2px;
    color:#fff; display:inline-block; margin-bottom:12px;
    background:var(--gold); border:1px solid rgba(200,104,26,0.4);
    padding:5px 16px; font-weight:700;
  }
  .event-time {
    font-family:'Playfair Display',serif; font-size:clamp(34px,5.5vw,52px);
    font-weight:800;
    color:var(--gold);
    display:block; line-height:1; margin-bottom:12px;
    letter-spacing:2px;
  }
  .event-name { font-family:'Playfair Display',serif; font-size:clamp(16px,2.5vw,20px); font-weight:700; color:var(--navy); margin-bottom:8px; line-height:1.3; }
  .event-detail { font-size:clamp(15px,2vw,18px); color:var(--navy-mid); opacity:1; line-height:1.6; font-style:italic; font-weight:500; }
  .event-tag { display:inline-block; font-family:'Playfair Display',serif; font-size:12px; letter-spacing:3px; padding:4px 10px; border:1px solid rgba(201,168,76,0.35); color:var(--gold); text-transform:uppercase; margin-top:10px; }
  .event-mid { display:flex; flex-direction:column; align-items:center; padding-top:18px; }
  .dot-outer { width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; background:#fff; }
  .dot-inner { width:16px; height:16px; border-radius:50%; background:var(--gold); opacity:0.85; }
  .dot-num { font-family:'Playfair Display',serif; font-size:13px; color:var(--gold); margin-top:6px; opacity:1; font-weight:700; }
  .event-card.meal { background:rgba(200,104,26,0.08); border-color:rgba(200,104,26,0.35); }

  .countdown-section { text-align:center; margin:36px 0; animation:fadeInUp 1.4s 0.65s both ease; }
  .countdown-label { font-family:'Playfair Display',serif; font-size:14px; letter-spacing:5px; color:var(--gold); opacity:1; margin-bottom:18px; text-transform:uppercase; font-weight:700; }
  .countdown-boxes { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
  .count-box { min-width:68px; padding:14px 10px 10px; border:1px solid rgba(168,114,26,0.35); background:rgba(168,114,26,0.07); text-align:center; }
  .count-num { font-family:'Playfair Display',serif; font-size:clamp(32px,5vw,46px); font-weight:700; color:var(--navy); display:block; line-height:1; margin-bottom:5px; }
  .count-unit { font-family:'Playfair Display',serif; font-size:12px; letter-spacing:3px; color:var(--navy-mid); text-transform:uppercase; opacity:0.75; font-weight:600; }

  .card-footer { text-align:center; margin-top:44px; padding-top:28px; border-top:1px solid rgba(201,168,76,0.2); }
  .footer-note { font-size:16px; color:var(--navy); opacity:0.65; letter-spacing:1px; margin-bottom:6px; }
  .footer-contact { font-size:18px; color:var(--navy); opacity:1; font-weight:700; }
  .footer-sig { margin-top:22px; font-size:14px; letter-spacing:4px; color:var(--gold); opacity:1; font-family:'Playfair Display',serif; font-weight:700; }

  /* SHIP BACKGROUND */
  .ship-bg-inner { position:relative; width:100%; height:130px; pointer-events:none; overflow:hidden; margin-top:32px; }
  .ship-sail {
    position:absolute; bottom:0;
    animation: sailAcross 38s linear infinite;
    opacity:0.22;
    filter: drop-shadow(0 0 12px rgba(201,168,76,0.4));
  }
  @keyframes sailAcross {
    0%   { transform: translateX(105%) scaleX(1); }
    49%  { transform: translateX(-65%) scaleX(1); }
    50%  { transform: translateX(-65%) scaleX(-1); }
    100% { transform: translateX(105%) scaleX(-1); }
  }

/* Block YouTube iframe from intercepting clicks */
#yt-container, #yt-container iframe { pointer-events:none !important; }

/* Music Player */
@keyframes barBounce {
  0%,100%{transform:scaleY(1)} 50%{transform:scaleY(2)}
}
#music-icon.playing .bar {
  animation:barBounce 0.6s ease-in-out infinite;
  transform-origin:50% 100%;
}
#music-icon.playing .bar:nth-child(1){animation-delay:0s;}
#music-icon.playing .bar:nth-child(2){animation-delay:0.15s;}
#music-icon.playing .bar:nth-child(3){animation-delay:0.3s;}
#music-icon.playing .bar:nth-child(4){animation-delay:0.1s;}
@media(max-width:480px){
  #music-player { top:12px; right:12px; padding:8px 12px 8px 10px; gap:8px; }
}