:root { --upc6-primary: #427e52; --upc6-accent: #6f2a9f; --upc6-bg: #0c0e10; --upc6-surface: #171b1d; --upc6-surface-hover: #22272a; --upc6-text: #e2e8f0; --upc6-muted: #94a3b8; --upc6-font-hd: 'Kanit', sans-serif; --upc6-font-bd: 'Inter', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.upc6-body { font-family: var(--upc6-font-bd); background-color: var(--upc6-bg); color: var(--upc6-text); font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--upc6-font-hd); margin-top: 0; }
.upc6-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.upc6-header { background: var(--upc6-bg); border-bottom: 1px solid var(--upc6-surface-hover); padding: 16px 0; }
.upc6-header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.upc6-logo { font-family: var(--upc6-font-hd); font-size: 28px; color: #fff; font-weight: 700; }
.upc6-nav-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.upc6-nav-wrap::-webkit-scrollbar { display: none; }
.upc6-nav { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
.upc6-nav-item { white-space: nowrap; }
.upc6-nav-link { color: var(--upc6-text); text-decoration: none; font-weight: 600; font-size: 15px; transition: color 0.3s; }
.upc6-nav-link:hover { color: var(--upc6-primary); }
.upc6-ticker-wrap { background: var(--upc6-surface-hover); border-bottom: 2px solid var(--upc6-accent); padding: 10px 0; overflow: hidden; white-space: nowrap; position: relative; }
.upc6-ticker-track { display: inline-block; padding-left: 100%; animation: upc6-ticker-scroll 25s linear infinite; }
.upc6-ticker-item { display: inline-block; margin-right: 32px; color: var(--upc6-text); text-decoration: none; font-weight: 500; font-size: 14px; }
@keyframes upc6-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.upc6-main { padding: 32px 0; }
.upc6-mag-hero { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; background: var(--upc6-surface); border-radius: 18px; overflow: hidden; }
.upc6-mag-visual img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; display: block; }
.upc6-mag-content { padding: 24px; display: flex; flex-direction: column; justify-content: center; }
.upc6-mag-title { font-size: 28px; line-height: 1.2; color: var(--upc6-primary); margin-bottom: 16px; text-transform: uppercase; }
.upc6-mag-desc { font-size: 16px; color: var(--upc6-muted); margin: 0; line-height: 1.6; }
.upc6-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 48px; }
.upc6-stat-card { background: var(--upc6-surface); padding: 20px; border-radius: 16px; text-align: center; border-top: 3px solid var(--upc6-primary); }
.upc6-stat-num { display: block; font-size: 24px; font-family: var(--upc6-font-hd); color: #fff; margin-bottom: 4px; }
.upc6-stat-label { font-size: 13px; color: var(--upc6-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.upc6-section-title { font-size: 24px; color: #fff; border-left: 4px solid var(--upc6-accent); padding-left: 12px; margin-bottom: 24px; text-transform: uppercase; }
.upc6-showcase { margin-bottom: 48px; }
.upc6-showcase-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.upc6-showcase-header .upc6-section-title { margin-bottom: 0; }
.upc6-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.upc6-filters::-webkit-scrollbar { display: none; }
.upc6-chip { background: var(--upc6-surface); border: 1px solid var(--upc6-surface-hover); color: var(--upc6-text); padding: 8px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all 0.3s; font-family: var(--upc6-font-bd); }
.upc6-chip.upc6-active, .upc6-chip:hover { background: var(--upc6-primary); color: #fff; border-color: var(--upc6-primary); }
.upc6-masonry-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.upc6-card { background: var(--upc6-surface); border-radius: 16px; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.upc6-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(66, 126, 82, 0.4); }
.upc6-card-img-box { position: relative; aspect-ratio: 1; overflow: hidden; }
.upc6-card-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upc6-card-badge { position: absolute; top: 10px; right: 10px; background: var(--upc6-accent); color: #fff; padding: 4px 8px; font-size: 12px; font-weight: 700; border-radius: 8px; font-family: var(--upc6-font-bd); }
.upc6-card-info { padding: 16px; }
.upc6-card-title { font-size: 16px; color: #fff; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.upc6-card-sub { font-size: 13px; color: var(--upc6-muted); margin: 0; }
.upc6-grid-2 { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; }
.upc6-tab-btns { display: flex; border-bottom: 2px solid var(--upc6-surface); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.upc6-tab-btns::-webkit-scrollbar { display: none; }
.upc6-tab-btn { background: none; border: none; color: var(--upc6-muted); padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; font-family: var(--upc6-font-bd); }
.upc6-tab-btn.upc6-active { color: var(--upc6-primary); border-color: var(--upc6-primary); }
.upc6-tab-content { display: none; background: var(--upc6-surface); padding: 20px; border-radius: 12px; color: var(--upc6-text); font-size: 15px; line-height: 1.6; }
.upc6-tab-content.upc6-active { display: block; animation: upc6-fade 0.3s; }
@keyframes upc6-fade { from { opacity: 0; } to { opacity: 1; } }
.upc6-steps .upc6-step-list { background: var(--upc6-surface); padding: 24px 24px 24px 40px; border-radius: 16px; margin: 0; }
.upc6-step-list li { margin-bottom: 12px; font-size: 15px; color: var(--upc6-text); line-height: 1.6; }
.upc6-step-list li:last-child { margin-bottom: 0; }
.upc6-benefits { margin-bottom: 48px; }
.upc6-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.upc6-benefit-card { background: var(--upc6-surface); padding: 24px; border-radius: 16px; border-left: 4px solid var(--upc6-primary); }
.upc6-benefit-card h3 { font-size: 18px; color: #fff; margin: 0 0 8px 0; }
.upc6-benefit-card p { font-size: 15px; color: var(--upc6-muted); margin: 0; line-height: 1.5; }
.upc6-payments { margin-bottom: 48px; }
.upc6-payment-tags { display: flex; flex-wrap: wrap; gap: 12px; }
.upc6-pay-tag { background: var(--upc6-surface); padding: 12px 20px; border-radius: 12px; font-weight: 600; color: var(--upc6-muted); border: 1px solid var(--upc6-surface-hover); font-size: 14px; }
.upc6-faq-static, .upc6-faq-wrap { margin-bottom: 48px; }
.upc6-faq-list { margin-top: 24px; }
.upc6-faq-item { background: var(--upc6-surface); margin-bottom: 12px; border-radius: 12px; overflow: hidden; }
.upc6-faq-q { padding: 16px 20px; font-weight: 600; color: #fff; cursor: pointer; font-size: 16px; list-style: none; position: relative; font-family: var(--upc6-font-bd); }
.upc6-faq-q::-webkit-details-marker { display: none; }
.upc6-faq-q::after { content: '+'; position: absolute; right: 20px; top: 16px; color: var(--upc6-primary); font-size: 20px; line-height: 1; }
.upc6-faq-item[open] .upc6-faq-q::after { content: '-'; }
.upc6-faq-a { padding: 0 20px 20px 20px; color: var(--upc6-text); font-size: 15px; line-height: 1.6; }
.upc6-article { background: var(--upc6-surface); padding: 24px; border-radius: 18px; margin: 48px 0; color: var(--upc6-text); line-height: 1.8; overflow-wrap: break-word; }
.upc6-article h2, .upc6-article h3, .upc6-article h4 { color: #fff; margin: 32px 0 16px; font-family: var(--upc6-font-hd); text-transform: uppercase; }
.upc6-article h2 { font-size: 24px; color: var(--upc6-primary); }
.upc6-article h3 { font-size: 20px; }
.upc6-article p { margin-bottom: 16px; font-size: 16px; }
.upc6-article ul, .upc6-article ol { margin-left: 20px; margin-bottom: 16px; }
.upc6-article li { margin-bottom: 8px; font-size: 16px; }
.upc6-article img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 24px 0; }
.upc6-article table { width: 100%; border-collapse: collapse; margin: 24px 0; display: block; overflow-x: auto; }
.upc6-article th, .upc6-article td { border: 1px solid var(--upc6-surface-hover); padding: 12px; text-align: left; font-size: 15px; }
.upc6-article th { background: var(--upc6-surface-hover); color: #fff; }
.upc6-article blockquote { border-left: 4px solid var(--upc6-accent); margin: 24px 0; padding: 12px 20px; background: rgba(111, 42, 159, 0.1); font-style: italic; }
.upc6-breadcrumbs { margin: 24px 0; }
.upc6-crumbs-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.upc6-crumb-item { display: flex; align-items: center; font-size: 14px; }
.upc6-crumb-item:not(:last-child)::after { content: '/'; margin-left: 8px; color: var(--upc6-muted); }
.upc6-crumb-item a { color: var(--upc6-muted); text-decoration: none; }
.upc6-crumb-item a:hover { color: var(--upc6-primary); }
.upc6-page-header { margin-bottom: 32px; }
.upc6-page-title { font-size: 32px; color: #fff; margin-bottom: 12px; text-transform: uppercase; }
.upc6-page-desc { font-size: 16px; color: var(--upc6-muted); line-height: 1.6; margin: 0; }
.upc6-pager-wrap { display: flex; justify-content: space-between; margin: 32px 0; gap: 16px; flex-wrap: wrap; }
.upc6-pager-link { background: var(--upc6-surface); color: #fff; padding: 12px 24px; border-radius: 24px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--upc6-surface-hover); transition: all 0.3s; }
.upc6-pager-link:hover { background: var(--upc6-primary); border-color: var(--upc6-primary); }
.upc6-related-wrap { margin: 48px 0; }
.upc6-related-content a { color: var(--upc6-primary); text-decoration: none; display: inline-block; margin-right: 16px; margin-bottom: 8px; font-size: 15px; }
.upc6-related-content a:hover { text-decoration: underline; }
.upc6-footer { background: var(--upc6-bg); border-top: 2px solid var(--upc6-primary); padding: 48px 0 24px; }
.upc6-footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; margin-bottom: 32px; align-items: center; }
.upc6-footer-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.upc6-footer-nav a { color: var(--upc6-muted); text-decoration: none; font-size: 15px; transition: color 0.3s; }
.upc6-footer-nav a:hover { color: var(--upc6-primary); }
.upc6-footer-bottom { border-top: 1px solid var(--upc6-surface-hover); padding-top: 24px; text-align: center; }
.upc6-legal, .upc6-copy { color: var(--upc6-muted); font-size: 13px; margin: 0 0 8px 0; line-height: 1.5; }
@media(min-width: 768px) {
  .upc6-mag-hero { grid-template-columns: 3fr 2fr; }
  .upc6-mag-title { font-size: 36px; }
  .upc6-stats { grid-template-columns: repeat(4, 1fr); }
  .upc6-grid-2 { grid-template-columns: 1fr 1fr; }
  .upc6-article { padding: 32px; }
}