/* ═══ Theme: Pro — corporate / B2B ═══
 * Navy structure + brand red accent, one typeface (Anuphan), restrained motion,
 * centred 1200px content. Loaded after main.css + motion.css when site_theme = pro.
 */
.theme-pro {
  --brand: #c8102e;
  --brand-dark: #a00d25;
  --navy: #0e2a47;
  --navy-2: #173b60;
  --navy-deep: #0a1f35;
  --ink: #1b2533;
  --muted: #5c6b7a;
  --line: #e4e9f0;
  --soft: #f5f7fa;
  --paper: #ffffff;
  --ice: #eef4fa;
  --ice-strong: #d6e4f2;
  --mint: #e8f5ee;
  --shadow: 0 12px 32px rgba(14, 42, 71, .08);
  --accent-a: var(--brand);
  --accent-b: var(--brand);
  --gutter: max(24px, calc((100% - 1200px) / 2));
  --radius: 12px;
}

/* One typeface everywhere */
body.theme-pro,
body.theme-pro *:not(svg):not(svg *) {
  font-family: 'Anuphan', 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
body.theme-pro {
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  animation: pageEnter .7s var(--ease-out) both;
}

/* Decorative background scene off (fish/orbs/bubbles) */
.theme-pro .site-motion-scene { display: none !important; }

/* ── Page width rhythm ── */
.theme-pro .topbar,
.theme-pro nav#navbar,
.theme-pro section,
.theme-pro .video-section,
.theme-pro .cta-band,
.theme-pro footer { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ── Topbar ── */
.theme-pro .topbar { background: var(--navy-deep); color: rgba(255,255,255,.78); font-size: 13px; padding-top: 7px; padding-bottom: 7px; }
.theme-pro .topbar a { color: #fff; opacity: .85; }

/* ── Navbar ── */
.theme-pro nav#navbar {
  height: 72px;
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.theme-pro nav#navbar.is-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(14, 42, 71, .08); backdrop-filter: none; }
.theme-pro .nav-star { font-size: 44px; color: var(--brand); filter: none; }
.theme-pro .nav-logo:hover .nav-star { transform: rotate(144deg) scale(1.08); }
.theme-pro .nav-brand { color: var(--navy); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.theme-pro .nav-brand em { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.theme-pro .nav-links { gap: 28px; }
.theme-pro .nav-links a { position: relative; color: #3a4757; font-size: 15px; font-weight: 500; border: 0 !important; padding: 6px 0; }
.theme-pro .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand);
  transform: scaleX(0); transition: transform .25s ease;
}
.theme-pro .nav-links a:hover, .theme-pro .nav-links a.active { color: var(--navy); }
.theme-pro .nav-links a:hover::after, .theme-pro .nav-links a.active::after { transform: scaleX(1); }
.theme-pro .nav-cta { background: var(--brand); color: #fff !important; border-radius: 8px; padding: 10px 18px; font-weight: 600; animation: ctaGlow 4.4s ease-in-out infinite; box-shadow: 0 6px 16px rgba(200, 16, 46, .18); }
.theme-pro .nav-cta:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200, 16, 46, .28); }
.theme-pro .nav-toggle { color: var(--navy); }

/* ── Buttons ── */
.theme-pro .btn-primary, .theme-pro .btn-outline, .theme-pro .btn-white, .theme-pro .btn-white-outline {
  border-radius: 8px; padding: 12px 24px; font-size: 15px; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 5px 16px rgba(14, 42, 71, .08); translate: var(--tx, 0) var(--ty, 0);
}
.theme-pro .btn-primary { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.theme-pro .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200, 16, 46, .24); }
.theme-pro .btn-outline { background: #fff; color: var(--navy); border: 1px solid #cbd5e1; }
.theme-pro .btn-outline:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14, 42, 71, .12); }
.theme-pro .btn-white { background: #fff; color: var(--navy); }
.theme-pro .btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14, 42, 71, .14); background: #f1f5f9; }
.theme-pro .btn-white-outline { border-color: rgba(255,255,255,.5); }
.theme-pro .btn-white-outline:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.theme-pro :is(.btn-primary, .btn-white, .nav-cta, .pact-detail)::before { display: block; }
.theme-pro .ripple { display: block; }

/* ── Hero ── */
.theme-pro .hero {
  background: linear-gradient(180deg, #f3f7fb 0%, #ffffff 100%);
  padding-left: var(--gutter); padding-right: var(--gutter);
  grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
  gap: 48px; min-height: 0; overflow: visible;
}
.theme-pro .hero::before, .theme-pro .hero::after { display: none; }
.theme-pro .hero-text { padding: 72px 0 64px; gap: 22px; translate: 0 calc(var(--py, 0) * 12px); }
.theme-pro .hero-tag {
  background: var(--ice); color: var(--navy); border: 0; border-radius: 6px;
  font-size: 13px; font-weight: 600; padding: 6px 12px;
}
.theme-pro .hero-tag::before { width: 6px; height: 6px; background: var(--brand); animation: tagPulse 2.4s ease-out infinite; }
.theme-pro .hero-text h1 {
  color: var(--navy); font-size: 46px; font-weight: 700; line-height: 1.22; letter-spacing: -.015em;
}
.theme-pro .hero-text h1 em { color: var(--brand); background: none; -webkit-background-clip: border-box; background-clip: border-box; animation: textShimmer 7s linear infinite; }
.theme-pro .hero-text p { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 560px; }
.theme-pro .hero-img { padding: 48px 0; translate: 0 calc(var(--py, 0) * -18px); perspective: 1200px; }
.theme-pro .hero-img::after { display: block; }
.theme-pro .hero-img img, .theme-pro .hero-img > .hero-placeholder {
  border-radius: 16px; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); box-shadow: 0 24px 60px rgba(14, 42, 71, .14);
}
.theme-pro .hero-img:hover img { box-shadow: 0 24px 60px rgba(14, 42, 71, .14); }

/* ── Stats: navy band ── */
.theme-pro .stats { background: var(--navy); border: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.theme-pro .stat { border-right-color: rgba(255,255,255,.12); padding: 30px 16px; }
.theme-pro .stat:hover { background: rgba(255,255,255,.06); }
.theme-pro .stat::after { display: block; }
.theme-pro .stat-num { color: #fff; font-size: 32px; font-weight: 700; }
.theme-pro .stat:hover .stat-num { transform: scale(1.06); }
.theme-pro .stat-label { color: rgba(255,255,255,.72); font-size: 14px; }

/* ── Sections & headings ── */
.theme-pro section { padding-top: 80px; padding-bottom: 80px; background: var(--paper); }
.theme-pro section.alt { background: var(--soft); }
.theme-pro .section-label { color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.theme-pro .section-label::before { width: 24px !important; transition: width .7s var(--ease-out); }
.theme-pro .section-title { color: var(--navy); font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; clip-path: none !important; }
.theme-pro .section-sub { color: var(--muted); font-size: 16px; max-width: 680px; }
.theme-pro .page-hero { background: linear-gradient(180deg, #f3f7fb, #fff); min-height: 0; padding-top: 64px; padding-bottom: 56px; }
.theme-pro .page-hero h1 { color: var(--navy); font-size: 40px; font-weight: 700; letter-spacing: -.015em; animation: pageHeroIn .8s var(--ease-out) both; }
.theme-pro .page-hero p { animation: pageHeroIn .8s var(--ease-out) .12s both; }

/* ── Motion: calm, short, no blur ── */
.theme-pro .reveal { filter: none; transform: translateY(14px); transition: opacity .55s ease var(--d, 0ms), transform .55s ease var(--d, 0ms); }
.theme-pro .product-card.reveal, .theme-pro .promo-card.reveal { transform: translateY(14px); }
.theme-pro .reveal.visible { transform: none; }
.theme-pro .hero-text > * { transition-duration: .6s; transform: translateY(12px); }
.theme-pro .hero-text.visible > * { transform: none; }
.theme-pro .badge { animation: badgeBob 3.2s ease-in-out infinite; }
.theme-pro .cta-band::before { display: block; opacity: .72; }
.theme-pro :is(.product-card, .promo-card, .chain-item, .service-card, .branch-card, .staff-card, .job-item, .contact-box, .command-card)::before { display: block; }
.theme-pro .scroll-progress { height: 2px; box-shadow: none; background: var(--brand); }

/* ── Cards ── */
.theme-pro :is(.chain-item, .product-card, .promo-card, .service-card, .branch-card, .staff-card, .job-item, .contact-box, .apply-box, .set-card) {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.theme-pro :is(.product-card, .promo-card):hover,
.theme-pro :is(.chain-item, .service-card, .branch-card, .staff-card, .job-item):hover {
  transform: translateY(-4px); box-shadow: 0 14px 32px rgba(14, 42, 71, .10); border-color: #d3dce7;
}
.theme-pro .chain-item { padding: 26px; }
.theme-pro .chain-item h3, .theme-pro .service-card h3 { color: var(--navy); font-size: 17px; font-weight: 700; }
.theme-pro .chain-kicker { color: var(--brand); font-weight: 700; }
.theme-pro .chain-item:hover .chain-kicker { transform: scale(1.12) rotate(-4deg); }
.theme-pro .product-img { background: var(--soft) !important; }
.theme-pro .product-card:hover .product-img img { transform: scale(1.04); filter: none; }
.theme-pro .product-img::after { display: none; }
.theme-pro .product-info h3 { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
.theme-pro .product-price { color: var(--brand); font-weight: 700; }
.theme-pro .badge { background: var(--brand); color: #fff; border-radius: 4px; font-weight: 700; letter-spacing: .02em; }
.theme-pro .cat-label { background: rgba(255,255,255,.94); color: var(--navy); border: 0; border-radius: 4px; font-weight: 600; }
.theme-pro .menu-chip { background: var(--ice); color: var(--navy); border: 0; border-radius: 4px; }
.theme-pro .menu-chip:hover { transform: translateY(-2px); }
.theme-pro .product-profit { background: var(--mint); color: #1e6b45; border: 0; border-radius: 6px; }
.theme-pro .pact-inquiry { background: #fff; color: var(--navy); border: 1px solid #cbd5e1; border-radius: 6px; }
.theme-pro .pact-inquiry:hover { border-color: var(--navy); color: var(--navy); background: #fff; }
.theme-pro .pact-detail { background: var(--navy); color: #fff; border-radius: 6px; }
.theme-pro .pact-detail:hover { background: var(--navy-2); opacity: 1; }

/* Category / pagination chips */
.theme-pro .cat-btn { background: #fff; color: #3a4757; border: 1px solid var(--line); border-radius: 6px; font-weight: 500; }
.theme-pro .cat-btn:hover { border-color: var(--navy); color: var(--navy); background: #fff; transform: translateY(-2px); }
.theme-pro .cat-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.theme-pro .page-btn.active { background: var(--navy); border-color: var(--navy); }

/* ── Video section, CTA, footer: navy family ── */
.theme-pro .video-section { background: var(--navy); }
.theme-pro .video-section .section-title { color: #fff; }
.theme-pro .cta-band { background: linear-gradient(120deg, var(--navy-2), var(--navy)); border: 0; }
.theme-pro .cta-band h2 { font-size: 28px; font-weight: 700; }
.theme-pro .cta-illus { background: rgba(255,255,255,.04); }
.theme-pro footer { background: var(--navy-deep); border-top: 0; color: rgba(255,255,255,.72); }
.theme-pro .footer-logo, .theme-pro .footer-col h4 { color: #fff; }
.theme-pro .footer-brand p, .theme-pro .footer-col ul li a, .theme-pro .footer-bottom span { color: rgba(255,255,255,.66) !important; }
.theme-pro .footer-col ul li a:hover { color: #fff !important; transform: translateX(5px); }
.theme-pro .footer-social a, .theme-pro .footer-admin { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.8); }
.theme-pro .footer-social a:hover { background: var(--brand); color: #fff; transform: translateY(-4px) rotate(-8deg); }
.theme-pro .footer-bottom { border-top-color: rgba(255,255,255,.12); }

/* ── Vue islands ── */
.theme-pro .product-search { border-radius: 10px; box-shadow: none; }
.theme-pro .product-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14, 42, 71, .12); }
.theme-pro .product-search button[type=submit] { background: var(--navy); border-radius: 8px; }
.theme-pro .product-search button[type=submit]:hover { background: var(--navy-2); transform: translateY(-2px); }
.theme-pro .pb-hit { background: linear-gradient(transparent 60%, rgba(200, 16, 46, .18) 0); }
.theme-pro .inq-fab { background: var(--brand); box-shadow: 0 10px 24px rgba(14, 42, 71, .22); border-radius: 10px; }
.theme-pro .inq-fab:hover { transform: translateY(-3px); background: var(--brand-dark); }
.theme-pro .to-top { background: var(--navy); border-radius: 10px; box-shadow: 0 10px 24px rgba(14, 42, 71, .22); }
.theme-pro .to-top:hover { transform: translateY(-3px); background: var(--navy-2); }
.theme-pro .set-size button.active { background: var(--navy); box-shadow: none; }
.theme-pro .set-check input:checked + span { background: var(--navy); border-color: var(--navy); }
.theme-pro .set-slot h3 { color: var(--navy); }
.theme-pro .set-slot { background: var(--soft); border-style: solid; }
.theme-pro .set-card:hover .set-cover img, .theme-pro .sets-teaser a:hover .set-cover img { transform: scale(1.04); }
.theme-pro .sets-teaser a { border-radius: var(--radius); }
.theme-pro .sets-teaser a:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(14, 42, 71, .10); border-color: #d3dce7; }
.theme-pro .sets-teaser .go, .theme-pro .menu-chip-link { color: var(--brand); }
.theme-pro .menu-chip-link:hover { background: var(--navy); color: #fff; }
.theme-pro .sets-jump a { border-radius: 6px; }
.theme-pro .sets-jump a:hover { transform: translateY(-2px); border-color: var(--navy); color: var(--navy); }

@media (max-width: 980px) {
  .theme-pro .hero { grid-template-columns: 1fr; gap: 0; }
  .theme-pro .hero-text { padding: 48px 0 24px; }
  .theme-pro .hero-text h1 { font-size: 34px; }
  .theme-pro .hero-img { padding: 0 0 40px; }
  .theme-pro .section-title { font-size: 26px; }
  .theme-pro .page-hero h1 { font-size: 30px; }
  .theme-pro nav#navbar { padding-left: 20px; padding-right: 20px; }
  .theme-pro .nav-links { background: #fff; }
}
@media (max-width: 560px) {
  .theme-pro { --gutter: 18px; }
  .theme-pro .hero-text h1 { font-size: 28px; }
  .theme-pro .stat-num { font-size: 26px; }
  .theme-pro section { padding-top: 56px; padding-bottom: 56px; }
}
.theme-pro .set-emoji { display: none; }

/* Careers in Pro theme */
.theme-pro .careers-hero { background: var(--navy-deep); }
.theme-pro .careers-hero h1 { color: #fff; }
.theme-pro .job-card:hover .job-icon { transform: none; }
.theme-pro .careers-hero .btn-white-outline { color: #fff; border: 1px solid rgba(255,255,255,.4); }

/* ── Motion polish: consistent across every public page ── */
.theme-pro .section-label::before { width: 0 !important; }
.theme-pro .reveal.visible .section-label::before,
.theme-pro .section-label.reveal.visible::before { width: 24px !important; }
.theme-pro .section-title.reveal,
.theme-pro .reveal .section-title {
  clip-path: inset(0 100% 0 0) !important;
  transition: clip-path 1s var(--ease-out) .1s;
}
.theme-pro .section-title.reveal.visible,
.theme-pro .reveal.visible .section-title {
  clip-path: inset(-10% -2% -10% 0) !important;
}
.theme-pro :is(.product-card, .promo-card, .chain-item, .service-card, .branch-card, .staff-card, .job-item, .contact-box, .command-card) {
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s, background .3s;
}
.theme-pro .hero-img img, .theme-pro .hero-img > .hero-placeholder { will-change: transform; }
.theme-pro .job-card:hover .job-icon { transform: translateY(-3px) rotate(-4deg); }

@media (max-width: 980px) {
  .theme-pro .nav-links {
    display: flex;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transform: translateY(-10px) scale(.98);
    transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), max-height .32s var(--ease-out), visibility 0s linear .32s;
  }
  .theme-pro .nav-links.open {
    max-height: 520px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .theme-pro .hero-img, .theme-pro .hero-text { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-pro, body.theme-pro *, body.theme-pro *::before, body.theme-pro *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
    translate: none !important;
  }
  body.theme-pro .reveal,
  body.theme-pro .hero-text > *,
  body.theme-pro .section-title.reveal,
  body.theme-pro .reveal .section-title {
    opacity: 1 !important;
    clip-path: none !important;
  }
}