:root{
    --ink:#1a1a1a;
    --ink-soft:#4a4a48;
    --paper:#ffffff;
    --hair:#e2e0da;
    --hair-strong:#c9c6bd;
    --panel:#faf9f6;
    --brand-red:#c9385a;
    --font-ui:'Poppins',sans-serif;
    --tracking-ui:normal;
  }
  body.lang-vn{ --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --tracking-ui:normal; }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Lora', Georgia, serif;
  }

  /* ---- HEADER ---- */
  .site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:#fff;
    border-bottom:1px solid var(--hair);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 60px;
  }
  .logo{
    height:24px;
    width:auto;
    display:block;
    cursor:pointer;
  }
  .site-nav{
    display:flex;
    gap:30px;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
  }
  .site-nav a{
    background:none;
    border:none;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:13.5px;
    letter-spacing:0.3px;
    color:var(--ink-soft);
    cursor:pointer;
    padding:6px 0;
    border-bottom:2px solid transparent;
  }
  .site-nav a.active{ color:var(--ink); border-bottom-color:var(--ink); font-weight:500; }
  .site-nav a:hover{ color:var(--ink); }

  .lang-switch{
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:13px;
    letter-spacing:0.3px;
    color:var(--ink-soft);
    display:flex;
    gap:4px;
  }
  .lang-switch a{
    background:none; border:none; cursor:pointer;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:13px; color:var(--ink-soft); padding:2px;
  }
  .lang-switch a.active{ color:var(--brand-red); font-weight:600; }
  .lang-switch span{ color:var(--hair-strong); }

  /* ---- PAGES ---- */

  h1.section-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:34px; margin:0 0 28px; }
  h2.section-title{ font-family:'Playfair Display', serif; font-weight:700; font-size:28px; margin:0 0 20px; }

  .inner{ padding:56px 60px 72px; }

  /* ---- HOME ---- */
  .hero{
    position:relative;
    height:640px;
    background-image:
      linear-gradient(180deg, rgba(10,15,30,0.05) 0%, rgba(10,15,30,0.4) 100%),
      url("images/preview-9d1973654070.jpg");
    background-attachment:fixed;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    padding:0 60px 64px;
  }
  .hero-slogan{
    color:#fff;
    font-family:'Playfair Display', serif;
    font-weight:600;
    font-size:46px;
    text-shadow:0 2px 18px rgba(0,0,0,0.35);
  }
  .hero-tag{
    position:absolute;
    top:16px; right:20px;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:10px;
    color:rgba(255,255,255,0.55);
    letter-spacing:0.06em;
  }

  .site-footer{
    border-top:1px solid var(--hair);
    padding:32px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--panel);
  }
  .footer-brand div:first-child{ font-weight:500; color:var(--ink); }
  .footer-brand div{ line-height:1.9; }
  .footer-slogan{ font-family:'Playfair Display', serif; font-style:italic; font-size:15px; color:var(--ink-soft); }
  .social-links{ display:flex; gap:14px; }
  .social-links a{
    color:var(--ink-soft); text-decoration:none;
    border:1px solid var(--hair-strong); width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .social-links a:hover{ color:var(--ink); border-color:var(--ink); }

  /* ---- ABOUT ---- */
  #page-about .inner{ max-width:900px; margin:0 auto; }
  #page-services .inner{ max-width:900px; margin:0 auto; }
  #page-latest .inner{ max-width:900px; margin:0 auto; }
  #page-contact .inner{ max-width:1060px; margin:0 auto; }
  #page-about .inner > h1.section-title{ margin-left:0; }
  .about-grid{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start; }
  .about-icon{ width:220px; height:auto; aspect-ratio:3/4.4; border:1px solid var(--hair); object-fit:cover; display:block; }
  .about-copy p{ margin:0 0 16px; font-size:15px; line-height:1.75; color:var(--ink-soft); }
  .about-copy p:last-child{ margin-bottom:0; }

  .facts-strip{
    margin-top:28px;
    margin-left:260px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .fact{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-size:13.5px;
  }
  .fact .fact-label{
    display:inline;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    min-width:170px;
  }
  .fact .fact-separator{ color:var(--hair-strong); font-size:13px; }
  .fact .fact-value{
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui);
    font-weight:500;
    font-size:14px;
    color:var(--ink);
  }

  .people-block{ margin-top:64px; padding-top:48px; border-top:1px solid var(--hair); margin-left:0; }
  .person{ display:grid; grid-template-columns:220px 1fr; gap:40px; padding:32px 0; }
  .person + .person{ border-top:1px solid var(--hair); }
  .person-meta .meta-label{ display:block; font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:18px 0 6px; }
  .person-meta .meta-label:first-child{ margin-top:0; }
  .person-meta .meta-value{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:13px; color:var(--ink-soft); line-height:1.6; }
  .person-body h3{ font-family:'Playfair Display', serif; font-size:21px; font-weight:600; margin:0 0 4px; }
  .person-role{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:13px; color:var(--ink-soft); margin:0 0 14px; }
  .person-body p{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:14px; line-height:1.75; color:var(--ink-soft); margin:0; }

  /* ---- LATEST ---- */
  .latest-post{ display:grid; grid-template-columns:220px 1fr; gap:32px; padding:32px 0; align-items:start; cursor:pointer; }
  .post + .latest-post{ border-top:1px solid var(--hair); }
  .post-thumb{
    width:100%; aspect-ratio:16/10; background:linear-gradient(135deg,#1c2c4a,#0d1830);
    border-radius:4px; display:flex; align-items:center; justify-content:center; color:#fff;
    font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
    text-align:center; padding:12px;
  }
  .post-thumb.alt{ background:linear-gradient(135deg,#122b2c,#0a1616); }
  .latest-post h2{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-weight:500; font-size:19px; margin:0 0 10px; color:var(--ink); }
  .latest-post p{ font-family:'Lora',serif; font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin:0; }
  .latest-post:hover h2{ text-decoration:underline; }

  .article-view{ display:none; }
  .article-view.active{ display:block; }
  .back-link{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:0 0 24px; display:inline-block; }
  .back-link:hover{ color:var(--ink); }
  .article-view .post-thumb{ max-width:100%; aspect-ratio:3/2; margin-bottom:28px; }
  .article-view h1{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-weight:500; font-size:26px; margin:0 0 20px; }
  .article-view p{ font-family:'Lora',serif; font-size:15.5px; line-height:1.85; color:var(--ink-soft); }
  .article-view ul{ font-family:'Lora',serif; font-size:15.5px; line-height:1.85; color:var(--ink-soft); margin:0 0 20px; padding-left:22px; }
  .article-view table{ width:100%; border-collapse:collapse; font-family:'Lora',serif; font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0 0 24px; }
  .article-view th{ font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-weight:600; font-size:13px; color:var(--ink); text-align:left; background:var(--panel); padding:10px 14px; border:1px solid var(--hair-strong); }
  .article-view td{ padding:10px 14px; border:1px solid var(--hair-strong); vertical-align:top; }
  .article-view ul li{ margin:0 0 4px; }

  /* ---- SERVICES ---- */
  .services-wrap{ max-width:640px; margin:0 auto; }
  .services-photo{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:2px; display:block; margin:0 0 32px; }
  .services-intro{ font-family:'Lora',serif; font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 16px; }
  .services-intro:last-of-type{ margin-bottom:32px; }
  .accordion{ width:100%; }
  .acc-item{ border:1px solid var(--hair); margin-bottom:14px; background:var(--paper); }
  .acc-trigger{ width:100%; text-align:left; background:none; border:none; padding:22px 24px; font-family:var(--font-ui); letter-spacing:var(--tracking-ui); font-size:17px; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .acc-trigger .chev{ font-size:14px; color:var(--ink-soft); transition:transform .2s ease; }
  .acc-item.open .acc-trigger .chev{ transform:rotate(180deg); }
  .acc-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .acc-item.open .acc-panel{ max-height:600px; }
  .acc-panel-inner{ padding:0 24px 26px; font-family:'Lora',serif; }
  .acc-panel-inner .lead{ font-style:italic; font-size:14px; color:var(--ink-soft); margin:0 0 14px; }
  .acc-panel-inner ul{ margin:0; padding-left:18px; font-size:14px; line-height:1.9; color:var(--ink-soft); }

  /* ---- CONTACT ---- */
  .contact-grid{ display:grid; grid-template-columns:440px 1fr; gap:56px; align-items:start; }
  .contact-photo{
    width:100%; aspect-ratio:3/2; border-radius:2px;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  .contact-info h1{ font-family:'Playfair Display', serif; font-weight:700; font-size:30px; margin:0 0 22px; }
  .contact-info p{ font-family:'Lora',serif; font-size:15.5px; line-height:1.9; color:var(--ink-soft); margin:0 0 20px; }
  body.lang-vn .contact-info p{ font-size:15px; line-height:1.75; }
  .contact-info strong{ color:var(--ink); }
  .contact-info a{ color:var(--brand-red); text-decoration:none; border-bottom:1px solid transparent; }
  .contact-info a:hover{ border-bottom-color:var(--brand-red); }

  @media (max-width:640px){
    .site-header{ flex-direction:column; gap:14px; padding:16px 20px; }
    .site-nav{ gap:16px; flex-wrap:wrap; justify-content:center; }
    .inner{ padding:32px 22px 48px; }
    .about-grid, .person, .latest-post, .contact-grid{ grid-template-columns:1fr; }
    .facts-strip, .people-block{ margin-left:0; }
    #page-about .inner > h1.section-title{ margin-left:0; }
    .fact{ flex-direction:column; gap:2px; }
    .fact .fact-label{ min-width:0; }
    .site-footer{ flex-direction:column; gap:14px; padding:24px 22px; }
    .hero{ height:480px; padding:0 24px 40px; background-attachment:scroll; }
    .hero-slogan{ font-size:32px; }
  }