:root{
  --sp-dark:#0c1f1c;
  --sp-green:#0c3b34;
  --sp-green-2:#155f53;
  --sp-gold:#c9a84c;
  --sp-gold-2:#f4d58d;
  --sp-cream:#fbf7ee;
}
*{font-family:'Prompt',system-ui,sans-serif}
body{background:#fafafa;color:#222}
h1,h2,h3,.display-1,.display-2,.display-3,.display-4,.display-5{font-family:'Playfair Display','Prompt',serif;letter-spacing:.3px}
.text-gold{color:var(--sp-gold)!important}
.bg-gold{background:var(--sp-gold)!important}
.btn-gold{background:linear-gradient(135deg,var(--sp-gold),var(--sp-gold-2));color:#1a1a1a;border:none;font-weight:600;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 4px 12px rgba(201,168,76,.2)}
.btn-gold:hover{background:linear-gradient(135deg,var(--sp-gold-2),var(--sp-gold));color:#000;box-shadow:0 6px 20px rgba(201,168,76,.35);transform:translateY(-1px)}
.btn-green{background:var(--sp-green);color:#fff;border:none;font-weight:500;transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);box-shadow:0 4px 12px rgba(12,59,52,.15)}
.btn-green:hover{background:var(--sp-green-2);color:#fff;box-shadow:0 6px 20px rgba(12,59,52,.25);transform:translateY(-1px)}
.btn-outline-gold{border:1px solid var(--sp-gold);color:var(--sp-gold);transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1)}
.btn-outline-gold:hover{background:var(--sp-gold);color:#1a1a1a;transform:translateY(-1px)}

.sp-nav{background:rgba(12,31,28,0.95)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,168,76,0.12)}
.sp-nav .nav-link{color:#f0e6cf!important;font-weight:500;padding:.6rem 1rem!important;transition:color 0.2s ease}
.sp-nav .nav-link:hover{color:var(--sp-gold-2)!important}
.sp-brand-icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--sp-gold);border-radius:50%;color:var(--sp-gold);margin-right:6px}
.sp-lang a{color:#bbb;text-decoration:none;padding:0 6px;font-size:14px}
.sp-lang a.active{color:var(--sp-gold);font-weight:700}

.sp-hero{position:relative;background:radial-gradient(ellipse at top,#1a4a40 0%,var(--sp-dark) 70%);color:#fff;padding:90px 0 110px;overflow:hidden}
.sp-hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='80' cy='20' r='1' fill='%23c9a84c' opacity='.3'/><circle cx='20' cy='70' r='.6' fill='%23c9a84c' opacity='.25'/></svg>");opacity:.6}
.sp-hero h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:700}
.sp-hero .lead{color:#f0e6cf;max-width:680px;margin:0 auto 2rem}
.sp-badge-gold{display:inline-block;padding:6px 18px;border:1px solid var(--sp-gold);border-radius:30px;color:var(--sp-gold);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:18px}

.sp-section-title{text-align:center;margin:0 auto 14px;font-size:2rem}
.sp-section-sub{text-align:center;color:#777;max-width:640px;margin:0 auto 40px}
.sp-divider{width:60px;height:3px;background:var(--sp-gold);margin:14px auto 22px;border-radius:3px}

.product-card{background:#fff;border:0;border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(12,31,28,.06);transition:.3s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(12,31,28,.14)}
.product-img-wrap{aspect-ratio:1/1;background:linear-gradient(135deg,#fdfaf3,#f3ece0);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-img-wrap img{width:100%;height:100%;object-fit:cover}
.product-card .body{padding:18px}
.product-card h5{font-family:'Prompt',sans-serif;font-weight:600;margin-bottom:8px}
.price-member{font-size:1.4rem;font-weight:700;color:var(--sp-green)}
.price-retail{color:#aaa;text-decoration:line-through;font-size:.9rem;margin-left:6px}
.pv-badge{background:var(--sp-cream);color:var(--sp-green);font-size:11px;padding:3px 8px;border-radius:20px;font-weight:600}

.feature-box{background:#fff;border-radius:16px;padding:28px 22px;text-align:center;height:100%;box-shadow:0 4px 16px rgba(0,0,0,.04);transition:.3s}
.feature-box:hover{transform:translateY(-4px)}
.feature-box .icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--sp-green),var(--sp-green-2));color:var(--sp-gold);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px}

.sp-footer{background:var(--sp-dark);color:#dcd6c4}
.sp-footer .text-muted{color:#8a8270!important}

.modal-content{border-radius:18px;border:0;overflow:hidden}
.modal-header{background:linear-gradient(135deg,var(--sp-green),var(--sp-dark));color:#fff;border:0}
.modal-header .btn-close{filter:invert(1)}

.table thead th{background:var(--sp-green);color:#fff}

/* ===== Legacy class styling (forms, sidebar, stats, tables, badges) ===== */
main{min-height:60vh;display:block}
main > h1, main > h2, main > h3, main > p, main > form, main > table:not(.table), main > .ref-box, main > .card, main > .grid{
  max-width:1140px;margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;
}
main > .card{padding:0;background:transparent;border:0;box-shadow:none}

/* Forms */
.form{max-width:560px;margin:40px auto;background:#fff;padding:34px 30px;border-radius:18px;box-shadow:0 10px 35px rgba(12,31,28,.05);border:1px solid rgba(21,95,83,.06);transition:all 0.3s ease}
.form h2,.form h3{margin-top:0;color:var(--sp-green);text-align:center;margin-bottom:8px;font-weight:700}
.form label{display:block;margin-top:14px;margin-bottom:6px;font-weight:600;color:var(--sp-green);font-size:.88rem}
.form input:not([type=file]):not([type=checkbox]):not([type=radio]),
.form select,.form textarea{
  width:100%;padding:.7rem .95rem;border:1px solid rgba(12,59,52,.15);border-radius:10px;font-family:inherit;font-size:1rem;background:#fdfdfb;transition:all 0.25s ease;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--sp-gold);box-shadow:0 0 0 3px rgba(201,168,76,.18);background:#fff}
.form input[type=file]{margin-top:6px;width:100%}
.form button{margin-top:22px;padding:.75rem 2.2rem;font-size:1rem;border-radius:10px}
.form textarea{resize:vertical;min-height:80px}

/* Sidebar layout */
.sidebar-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;margin:30px auto;max-width:1180px;padding:0 15px}
.sidebar{background:#fff;border-radius:14px;padding:16px;box-shadow:0 6px 22px rgba(12,31,28,.07);display:flex;flex-direction:column;gap:4px;height:fit-content;position:sticky;top:90px;z-index:99;transition:all 0.3s ease}
.sidebar a{padding:.75rem 1rem;border-radius:8px;text-decoration:none;color:#333;font-weight:500;transition:all 0.2s ease;display:block}
.sidebar a:hover{background:#fbf7ee;color:var(--sp-green);transform:translateX(4px)}
.sidebar a.active{background:linear-gradient(135deg,var(--sp-green),var(--sp-green-2));color:var(--sp-gold-2);box-shadow:0 4px 14px rgba(12,59,52,.25);transform:translateX(4px)}
.sidebar-layout > div{background:#fff;padding:28px;border-radius:14px;box-shadow:0 6px 22px rgba(12,31,28,.07);min-width:0;border:1px solid rgba(21,95,83,.05)}
.sidebar-layout h1{font-size:1.8rem;margin-top:0;color:var(--sp-green);font-weight:700}
.sidebar-layout > div .form{max-width:none;margin:0;box-shadow:none;border:0;padding:0;background:transparent}

/* Stats cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:20px 0 26px}
.stat{background:linear-gradient(135deg,var(--sp-dark),var(--sp-green));color:var(--sp-gold-2);padding:24px 18px;border-radius:14px;text-align:center;box-shadow:0 8px 24px rgba(12,31,28,.12);border:1px solid rgba(201,168,76,.1);transition:transform .3s ease, box-shadow .3s ease}
.stat:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(12,31,28,.2)}
.stat .v{font-size:1.85rem;font-weight:800;font-family:'Playfair Display',serif;color:#fff}
.stat .l{font-size:.82rem;color:#cfe3df;margin-top:4px;letter-spacing:.5px}

/* Ref-box */
.ref-box{background:linear-gradient(135deg,#fbf7ee,#f3ece0);border:1px dashed var(--sp-gold);padding:18px 22px;border-radius:12px;margin:18px 0;color:var(--sp-green);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ref-box code{background:#fff;padding:8px 12px;border-radius:8px;font-size:14px;display:inline-block;color:var(--sp-green);border:1px solid rgba(21,95,83,.08);word-break:break-all;flex:1;min-width:200px}

/* Badges */
.badge.pending{background:rgba(255,244,207,.75);color:#8a6a00;border:1px solid rgba(255,201,76,.25)}
.badge.paid{background:rgba(209,250,229,.75);color:#065f46;border:1px solid rgba(52,211,153,.25)}
.badge.shipped{background:rgba(219,234,254,.75);color:#1d4ed8;border:1px solid rgba(96,165,250,.25)}
.badge.cancelled{background:rgba(254,226,226,.75);color:#991b1b;border:1px solid rgba(248,113,113,.25)}
.badge{padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;text-transform:capitalize;display:inline-block}

/* Tables (legacy w/o Bootstrap class) */
main table:not(.table),
.sidebar-layout table:not(.table){width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 16px rgba(12,31,28,.04);margin:14px 0;font-size:.92rem;border:1px solid rgba(21,95,83,.06)}
main table:not(.table) th,.sidebar-layout table:not(.table) th{background:var(--sp-green);color:var(--sp-gold-2);font-weight:600;padding:.85rem 1.1rem;text-align:left}
main table:not(.table) td,.sidebar-layout table:not(.table) td{padding:.8rem 1.1rem;border-bottom:1px solid #f1ede0}
main table:not(.table) tr:hover td{background:#fbf7ee}
.sidebar-layout table:not(.table){box-shadow:none;border:1px solid #f0ebdc}

/* Grid helper */
.grid{display:grid;gap:14px;margin:16px 0}

/* Btn small adjustments inside legacy contexts */
.sidebar-layout .btn{padding:.45rem 1rem;transition:all 0.2s ease}
.ref-box .btn{padding:.35rem .9rem;font-size:.85rem}

/* Card legacy inline-style override fix */
.sidebar-layout .card{background:#fbf7ee!important;border:1px solid #f0ebdc;border-radius:10px;box-shadow:none}

/* LINE Meeting frames */
.meeting-frame{position:relative;display:block;border-radius:24px;padding:14px;background:linear-gradient(135deg,#d4af37,#f5e6a8,#a8852b);box-shadow:0 14px 40px -16px rgba(0,0,0,.35);text-decoration:none;transition:transform .35s ease, box-shadow .35s ease;overflow:hidden}
.meeting-frame:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 22px 50px -16px rgba(0,0,0,.45)}
.meeting-frame img{display:block;width:100%;height:auto;border-radius:16px;background:#fff}
.meeting-caption{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);background:rgba(20,60,40,.92);color:#ffd87a;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;font-size:.95rem;border:1px solid rgba(255,216,122,.5);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.3)}

@media(max-width:991px){
  .sidebar-layout{grid-template-columns:1fr;gap:16px;margin:15px auto}
  .sidebar{
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(12,31,28,.05);
    margin-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sidebar::-webkit-scrollbar {
    display: none;
  }
  .sidebar a{
    padding: 8px 16px;
    font-size: 0.9rem;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 8px;
    margin: 0;
  }
  .sidebar a:hover{
    transform: none;
  }
  .sidebar a.active{
    transform: none;
  }
  .sidebar-layout > div{
    padding: 18px;
    border-radius: 12px;
  }
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 10px;
  }
  .stat {
    padding: 18px 12px;
  }
  .stat .v {
    font-size: 1.5rem;
  }
  .stat .l {
    font-size: 0.75rem;
  }
  main table:not(.table),
  .sidebar-layout table:not(.table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* ===== Product Brochures Section ===== */
.sp-brochures-section {
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ee 100%);
  position: relative;
}
.brochure-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(12, 31, 28, 0.05);
  border: 1px solid rgba(201, 168, 76, 0.15);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.brochure-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(12, 31, 28, 0.12);
  border-color: var(--sp-gold);
}
.brochure-img-container {
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
  cursor: pointer;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brochure-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.brochure-card:hover .brochure-img-container img {
  transform: scale(1.05);
}
.brochure-overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 59, 52, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(2px);
}
.brochure-img-container:hover .brochure-overlay {
  opacity: 1;
}
.brochure-overlay-btn {
  background: linear-gradient(135deg, var(--sp-gold), var(--sp-gold-2));
  color: var(--sp-dark);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  font-size: 0.9rem;
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.4);
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brochure-img-container:hover .brochure-overlay-btn {
  transform: translateY(0);
}
.brochure-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.brochure-badge {
  align-self: flex-start;
  background: rgba(201, 168, 76, 0.1);
  color: var(--sp-gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.brochure-title {
  font-family: 'Prompt', sans-serif;
  color: var(--sp-green);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.brochure-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}
.modal-brochure-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ===== Mobile Horizontal Scrollable Navigation ===== */
@media(max-width: 991px) {
  .sp-nav-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
  }
  .sp-nav-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
  .sp-nav-scroll-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding-left: 0;
    margin-bottom: 0;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 8px;
  }
  .sp-nav-scroll-links .nav-item {
    flex: 0 0 auto;
  }
  .sp-nav-scroll-links .nav-link {
    white-space: nowrap !important;
    padding: 6px 4px !important;
    font-size: 0.95rem;
  }
  .sp-nav-actions {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sp-nav-actions .btn-gold {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    margin-bottom: 8px;
  }
  .sp-nav-actions .sp-lang {
    margin-left: 0 !important;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media(min-width: 992px) {
  .sp-nav-scroll-wrapper {
    margin-left: auto;
  }
  .sp-nav-scroll-links {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
  }
  .sp-nav-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
  }
}

/* ===== Video Section ===== */
.sp-video-section {
  background-color: var(--sp-cream);
  position: relative;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15);
}
.video-container {
  border: 3px solid var(--sp-gold);
  border-radius: 20px;
  background-color: var(--sp-dark);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 15px 35px rgba(12, 31, 28, 0.15);
}
.video-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(12, 31, 28, 0.25);
  border-color: var(--sp-gold-2);
}
.video-container video {
  display: block;
  border-radius: 17px;
  width: 100%;
}