:root{
    --navy-950:#0a0f1f;
    --navy-900:#0d1428;
    --navy-800:#121c36;
    --navy-700:#1a2544;
    --navy-line:#26315a;
    --gold-400:#f2c063;
    --gold-500:#e6ab3c;
    --gold-600:#c9922c;
    --silver-300:#d8dee8;
    --text-100:#f4f6fb;
    --text-300:#c3cae0;
    --text-500:#8a93b3;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    background:var(--navy-950);
    color:var(--text-100);
    font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
    line-height:1.4;
  }
  body #app > .page {
    margin: 15px;
}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

  /* ---------- HEADER ---------- */
  header{
    background:var(--navy-900);
    border: 1px solid var(--gold-600); /* Viền màu vàng var(--gold-600) */
    border-radius: 12px;
    max-width: 1200px;
    margin: 0 auto 16px auto;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 32px;
    max-width:1200px;
    margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .logo{
    width:44px;height:44px;
    /* border-radius:10px; */
    /* background:linear-gradient(145deg,var(--gold-400),var(--gold-600)); */
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:20px;color:var(--navy-950);
    /* border:1px solid var(--gold-400); */
  }
  .brand-text .name{font-weight:700;font-size:18px;letter-spacing:1px;}
  .brand-text .tag{font-size:11px;color:var(--gold-400);letter-spacing:.5px;}

  nav.main-nav{display:flex;gap:32px;font-size:14px;color:var(--text-300);}
  nav.main-nav a:hover{color:var(--gold-400);}

  .header-actions{display:flex;gap:12px;}
  .btn{
    display:inline-block;
    padding:9px 22px;
    border-radius:24px;
    font-size:13px;
    font-weight:600;
    border:1px solid var(--gold-500);
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-outline{background:transparent;color:var(--gold-400);}
  .btn-outline:hover{background:rgba(230,171,60,.08);}
  .btn-solid{background:var(--gold-500);color:var(--navy-950);border-color:var(--gold-500);}
  .btn-solid:hover{background:var(--gold-400);}
  .btn-ghost-white{background:transparent;color:var(--text-100);border-color:var(--text-300);}
  .btn-ghost-white:hover{border-color:var(--gold-400);color:var(--gold-400);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:radial-gradient(1200px 500px at 75% 30%, #14203f 0%, var(--navy-950) 60%);
    overflow:hidden;
    border: 1px solid var(--gold-600); /* Viền màu vàng var(--gold-600) */
    border-radius: 12px;
    max-width: 1200px;
    margin: 0 auto 10px;
    background: url(/images/banner-gold.png) 50% / contain no-repeat;
    background-size: contain;
  }
  .hero-inner{
    max-width:1200px;margin:0 auto;padding:70px 32px 80px;
    display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;
  }
  .hero h1{
    font-size:44px;
    font-weight:800;
    line-height:1.18;
    letter-spacing:.2px;
  }
  .hero h1 .accent{color:var(--gold-400);}
  .hero p{
    margin-top:20px;
    color:var(--text-300);
    font-size:15px;
    max-width:440px;
    line-height:1.7;
  }
  .hero-ctas{margin-top:30px;display:flex;gap:14px;}
  .hero-ctas .btn{padding:13px 26px;font-size:14px;border-radius:8px;}

  /* ---------- PRODUCTS ---------- */
  .section.product-section .wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 28px;
    background: radial-gradient(1200px 500px at 75% 30%, #14203f 0%, var(--navy-950) 60%);
    border: 1px solid var(--gold-600);
    border-radius: 12px;
  }
  .section.top-dashboard-section .wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
  }
  .section {
        padding: 9px 0 15px;
}
  .section-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:24px;
  }
  .section-head h2{
    font-size:18px;font-weight:700;
    display:flex;align-items:center;gap:10px;
  }
  .section-head h2 .diamond{color:var(--gold-400);}
  .section-head .view-all{font-size:13px;color:var(--gold-400);font-weight:600;}

  .product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
  }
  .card{
    background:var(--navy-800);
    border:1px solid var(--navy-line);
    border-radius:10px;
    overflow:hidden;
    display:flex;flex-direction:column;
  }
  .card-media{
    height:190px;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .card-media .cap{
    position:absolute;top:10px;left:12px;
    font-size:10px;font-weight:700;letter-spacing:1px;color:#fff;
    background:rgba(0,0,0,.35);padding:3px 8px;border-radius:4px;
  }
  .card-body{padding:14px 16px 18px;}
  .card-body .pname{font-size:13.5px;color:var(--text-300);margin-bottom:6px;}
  .card-body .price{font-size:16px;font-weight:700;color:var(--gold-400);}

  /* media fills for cards, css-only mockups */
  .m-necklace{background:radial-gradient(circle at 35% 30%, #3a4260, #0c1226 70%);}
  .m-necklace::after{
    content:"";width:140px;height:100px;border-radius:0 0 140px 140px/0 0 90px 90px;
    border:8px solid var(--gold-500);border-top:none;
  }
  .m-silverbars{background:linear-gradient(160deg,#3c4356,#161b28);}
  .m-silverbars::after{
    content:"PHÚ QUÝ • BẠC 999";
    color:var(--silver-300);font-size:11px;letter-spacing:2px;
  }
  .m-jewelry{background:linear-gradient(160deg,#eef0f4,#c9cfdb);}
  .m-jewelry::after{content:"✦ ✦ ✦";color:#1a1a2e;font-size:20px;letter-spacing:8px;}
  .m-goldhand{background:linear-gradient(160deg,#7a5a12,#3a2705);}
  .m-goldhand::after{content:"";width:80px;height:56px;background:linear-gradient(160deg,var(--gold-400),var(--gold-600));border-radius:4px;}
  .m-rings{background:linear-gradient(160deg,#e9e4d8,#c7bfa9);}
  .m-rings::after{content:"◯ ◯";color:var(--gold-600);font-size:34px;}
  .m-bracelet{background:linear-gradient(160deg,#efe6d3,#cfc3a3);}
  .m-bracelet::after{content:"○○○○○";color:#8a93b3;font-size:16px;letter-spacing:3px;}
  .m-silveringot{background:linear-gradient(160deg,#4a5164,#181d2b);}
  .m-silveringot::after{
    content:"";width:120px;height:70px;border-radius:4px;
    background:linear-gradient(160deg,#f2f4f8,#9aa2b4);
  }
  .card-media::after{display:flex;align-items:center;justify-content:center;}

  .pagination{
    display:flex;justify-content:center;align-items:center;gap:10px;
    margin-top:32px;
  }
  .pagination .pg{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--navy-line);
    font-size:13px;color:var(--text-300);
  }
  .pagination .pg.active{background:var(--gold-500);color:var(--navy-950);border-color:var(--gold-500);font-weight:700;}

  /* ---------- CONTACT BANNER ---------- */
  .contact-banner{
    max-width:1200px;
    margin: 0 auto 16px;
    padding: 15px 28px;
    border:1px solid var(--gold-600);
    border-radius:10px;
    background:linear-gradient(90deg, rgba(230,171,60,.06), transparent 60%);
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;
  }
  .contact-banner .left{display:flex;align-items:center;gap:16px;}
  .contact-banner .phone-ic{
    width:44px;height:44px;border-radius:50%;
    border:1px solid var(--gold-500);
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-400);font-size:18px;
  }
  .contact-banner .lbl{font-size:12px;color:var(--text-500);}
  .contact-banner .num{font-size:20px;font-weight:800;color:var(--gold-400);letter-spacing:.5px;}

  /* ---------- FOOTER ---------- */
  footer{
    border: 1px solid var(--gold-600); /* Viền màu vàng var(--gold-600) */
    border-radius: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 0 10px;
    background: var(--navy-900);
  }
  .footer-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
    padding-bottom:32px;
  }
  .footer-col h4{
    font-size:13px;color:var(--gold-400);letter-spacing:1px;margin-bottom:14px;
  }
  .footer-col a, .footer-col p{
    display:block;font-size:13.5px;color:var(--text-300);margin-bottom:9px;
  }
  .footer-col p b{color:var(--gold-400);}
  .footer-bottom{
    border-top:1px solid var(--navy-line);
    padding-top:18px;
    display:flex;justify-content:space-between;align-items:center;
    font-size:12.5px;color:var(--text-500);
  }
  .socials{display:flex;gap:10px;}
  .socials a{
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--navy-line);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    nav.main-nav{display:none;}
    .hero-inner{grid-template-columns:1fr;}
    .hero-art{height:260px;margin-top:20px;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:560px){
    body { padding: 8px; }
    .hero h1{font-size:30px;}
    .product-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .contact-banner{flex-direction:column;align-items:flex-start;}
    .header-inner{flex-wrap:wrap;gap:12px;}
  }