/* ===== ufa-neon นีออนไซเบอร์模板 ===== */
:root {
    --un-bg: #0a0a0f;
    --un-bg2: #12121e;
    --un-bg3: #08080d;
    --un-cyan: #00f0ff;
    --un-magenta: #ff00ff;
    --un-green: #39ff14;
    --un-text: #e0e0e0;
    --un-text-dim: #666;
    --un-white: #fff;
    --un-card: #12121e;
    --un-border: rgba(0,240,255,0.15);
    --un-font: 'Kanit', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--un-font); background:var(--un-bg); color:var(--un-text); line-height:1.7; overflow-x:hidden; }
a { text-decoration:none; color:var(--un-cyan); transition:all .3s; }
a:hover { color:var(--un-green); text-shadow:0 0 10px currentColor; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 15px; }

/* ===== Header ===== */
.un-header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(10,10,15,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--un-border); transition:all .3s; }
.un-header.scrolled { background:rgba(10,10,15,0.98); box-shadow:0 0 30px rgba(0,240,255,0.1); }
.un-header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.un-logo img { height:44px; filter:drop-shadow(0 0 8px rgba(0,240,255,0.5)); }
.un-nav-wrap { flex:1; margin:0 20px; }
.un-nav { display:flex; align-items:center; gap:4px; list-style:none; flex-wrap:nowrap; overflow-x:auto; }
.un-nav li { position:relative; white-space:nowrap; }
.un-nav li a { display:block; padding:8px 12px; color:var(--un-text); font-size:14px; font-weight:500; border-radius:4px; }
.un-nav li a:hover, .un-nav li.active a { color:var(--un-cyan); text-shadow:0 0 8px var(--un-cyan); }
.un-menu-dropdown .un-dropdown { display:none; position:absolute; top:100%; left:0; min-width:200px; background:var(--un-bg2); border:1px solid var(--un-border); border-radius:8px; padding:8px 0; box-shadow:0 0 30px rgba(0,240,255,0.2); z-index:100; }
.un-menu-dropdown:hover .un-dropdown { display:block; }
.un-dropdown li { width:100%; }
.un-dropdown li a { padding:8px 16px; font-size:13px; }
.un-sub-dropdown { display:none; padding-left:15px; }
.un-dropdown li:hover .un-sub-dropdown { display:block; }
.un-header-btns { display:flex; gap:8px; }
.un-btn-neon { display:inline-block; padding:10px 24px; background:transparent; color:var(--un-cyan) !important; font-weight:600; border-radius:4px; font-size:14px; border:1px solid var(--un-cyan); cursor:pointer; transition:all .3s; box-shadow:0 0 15px rgba(0,240,255,0.2); }
.un-btn-neon:hover { background:var(--un-cyan); color:var(--un-bg) !important; box-shadow:0 0 25px var(--un-cyan); }
.un-btn-ghost { display:inline-block; padding:10px 24px; background:transparent; color:var(--un-magenta) !important; border:1px solid var(--un-magenta); font-weight:600; border-radius:4px; font-size:14px; cursor:pointer; transition:all .3s; }
.un-btn-ghost:hover { background:var(--un-magenta); color:var(--un-bg) !important; box-shadow:0 0 25px var(--un-magenta); }
.un-btn-lg { padding:16px 36px; font-size:16px; }
.un-toggle { display:none; background:none; border:none; color:var(--un-cyan); font-size:24px; cursor:pointer; }

/* ===== Hero Split ===== */
.un-hero { display:flex; min-height:600px; padding-top:80px; }
.un-hero-left { flex:1; display:flex; align-items:center; position:relative; padding:40px; overflow:hidden; }
.un-hero-glow { position:absolute; top:20%; left:10%; width:300px; height:300px; background:radial-gradient(circle,rgba(0,240,255,0.2),transparent 70%); filter:blur(40px); }
.un-hero-content { position:relative; z-index:2; max-width:550px; }
.un-hero-h1 { font-size:clamp(26px,4.5vw,44px); font-weight:800; color:var(--un-white); margin-bottom:20px; line-height:1.3; }
.un-hero-neon { display:block; color:var(--un-cyan); text-shadow:0 0 20px var(--un-cyan),0 0 40px rgba(0,240,255,0.5); font-size:0.65em; margin-top:5px; }
.un-hero-desc { font-size:16px; color:var(--un-text-dim); margin-bottom:30px; line-height:1.8; }
.un-hero-btns { display:flex; gap:15px; flex-wrap:wrap; }
.un-hero-right { flex:0 0 40%; position:relative; overflow:hidden; background:var(--un-bg2); }
.un-hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(0,240,255,0.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,0.1) 1px,transparent 1px); background-size:40px 40px; }
.un-hero-grid-bg::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(255,0,255,0.15),transparent 60%); }
.un-hero-grid-bg::after { content:'⚡'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:120px; opacity:0.1; color:var(--un-cyan); }

/* ===== Section ===== */
.un-section { padding:70px 0; background:var(--un-bg); position:relative; }
.un-section-glow { background:var(--un-bg3); }
.un-section-glow::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--un-cyan),transparent); }
.un-section-glow::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--un-magenta),transparent); }
.un-section-title { text-align:center; margin-bottom:50px; }
.un-section-title h2 { font-size:clamp(24px,4vw,36px); font-weight:700; color:var(--un-white); }
.un-title-line { width:60px; height:2px; margin:15px auto; background:linear-gradient(90deg,var(--un-cyan),var(--un-magenta)); box-shadow:0 0 10px var(--un-cyan); }
.un-title-left { margin-left:0; }
.un-section-title p { color:var(--un-text-dim); font-size:15px; }

/* ===== 功能区1: Angular Grid ===== */
.un-angular-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:15px; }
.un-angular-card { text-align:center; cursor:pointer; }
.un-angular-img { height:120px; clip-path:polygon(15% 0,100% 0,85% 100%,0 100%); background:linear-gradient(135deg,rgba(0,240,255,0.1),rgba(255,0,255,0.1)); border:1px solid var(--un-border); display:flex; align-items:center; justify-content:center; transition:all .3s; }
.un-angular-card:hover .un-angular-img { border-color:var(--un-cyan); box-shadow:0 0 20px rgba(0,240,255,0.3); transform:skewX(-2deg); }
.un-angular-img img { width:60%; height:60%; object-fit:contain; }
.un-angular-label { display:block; margin-top:10px; color:var(--un-text); font-size:14px; }

/* ===== 功能区2: Tilt Grid ===== */
.un-tilt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:25px; }
.un-tilt-card { background:var(--un-card); border:1px solid var(--un-border); border-radius:8px; overflow:hidden; transition:all .3s; }
.un-tilt-left { transform:rotate(-1deg); }
.un-tilt-right { transform:rotate(1deg); }
.un-tilt-card:hover { border-color:var(--un-cyan); box-shadow:0 0 25px rgba(0,240,255,0.2); transform:rotate(0) translateY(-5px); }
.un-tilt-img { height:160px; overflow:hidden; }
.un-tilt-img img { width:100%; height:100%; object-fit:cover; }
.un-tilt-card h4 { color:var(--un-cyan); padding:12px 15px 5px; font-size:16px; }
.un-tilt-card p { color:var(--un-text-dim); padding:0 15px 15px; font-size:13px; }

/* ===== 功能区3: Pixel Grid ===== */
.un-pixel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:15px; }
.un-pixel-card { background:var(--un-card); border:2px solid var(--un-border); border-radius:0; overflow:hidden; transition:all .3s; }
.un-pixel-card:hover { border-color:var(--un-green); box-shadow:0 0 20px rgba(57,255,20,0.2); }
.un-pixel-img { height:120px; overflow:hidden; border-bottom:2px solid var(--un-border); }
.un-pixel-img img { width:100%; height:100%; object-fit:cover; }
.un-pixel-body { padding:12px; }
.un-pixel-body h4 { color:var(--un-green); font-size:15px; margin-bottom:4px; }
.un-pixel-body p { color:var(--un-text-dim); font-size:12px; }

/* ===== 功能区4: Holographic App ===== */
.un-app-holo { display:flex; align-items:center; gap:50px; flex-wrap:wrap; }
.un-app-holo-img { flex:0 0 300px; position:relative; }
.un-app-holo-img img { width:100%; border-radius:12px; border:1px solid var(--un-cyan); box-shadow:0 0 40px rgba(0,240,255,0.3); }
.un-holo-ring { position:absolute; inset:-20px; border:1px solid rgba(0,240,255,0.3); border-radius:20px; animation:un-pulse 3s infinite; }
@keyframes un-pulse { 0%,100% { transform:scale(1); opacity:0.3; } 50% { transform:scale(1.05); opacity:0.6; } }
.un-app-holo-info { flex:1; min-width:300px; }
.un-app-holo-info h2 { font-size:32px; color:var(--un-white); margin-bottom:10px; }
.un-app-holo-info p { color:var(--un-text-dim); font-size:15px; margin:20px 0 25px; }
.un-app-feats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:30px; }
.un-app-feat { display:flex; align-items:center; gap:8px; color:var(--un-text); font-size:14px; }
.un-app-feat span { font-size:20px; }

/* ===== 功能区5: Glitch Grid ===== */
.un-glitch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.un-glitch-card { position:relative; aspect-ratio:1; overflow:hidden; border:1px solid var(--un-border); transition:all .3s; }
.un-glitch-card:hover { border-color:var(--un-magenta); box-shadow:0 0 20px rgba(255,0,255,0.3); }
.un-glitch-card:hover img { filter:hue-rotate(90deg) contrast(1.2); }
.un-glitch-card img { width:100%; height:100%; object-fit:cover; transition:filter .3s; }
.un-glitch-label { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.9)); color:var(--un-cyan); padding:20px 10px 8px; font-size:13px; text-align:center; }
.un-glitch-wide { grid-column:span 2; aspect-ratio:2/1; }
.un-glitch-tall { grid-row:span 2; aspect-ratio:1/2; }

/* ===== 功能区6: Glass Grid ===== */
.un-glass-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.un-glass-card { background:rgba(18,18,30,0.6); backdrop-filter:blur(10px); border:1px solid var(--un-border); border-radius:12px; overflow:hidden; transition:all .3s; }
.un-glass-card:hover { border-color:var(--un-cyan); box-shadow:0 0 30px rgba(0,240,255,0.2); transform:translateY(-5px); }
.un-glass-img { height:140px; overflow:hidden; }
.un-glass-img img { width:100%; height:100%; object-fit:cover; }
.un-glass-card h4 { color:var(--un-cyan); padding:12px 15px 5px; font-size:16px; }
.un-glass-card p { color:var(--un-text-dim); padding:0 15px 15px; font-size:13px; }

/* ===== Articles ===== */
.un-list-item { display:flex; gap:20px; background:var(--un-card); border-radius:8px; padding:15px; margin-bottom:15px; border:1px solid var(--un-border); transition:all .3s; }
.un-list-item:hover { border-color:var(--un-cyan); box-shadow:0 0 20px rgba(0,240,255,0.1); }
.un-list-item .list-img { flex:0 0 200px; height:130px; border-radius:6px; overflow:hidden; }
.un-list-item .list-img img { width:100%; height:100%; object-fit:cover; }
.un-list-item .list-body { flex:1; }
.un-list-item h3 a { color:var(--un-white); font-size:18px; }
.un-list-item h3 a:hover { color:var(--un-cyan); }
.un-list-item .list-desc { color:var(--un-text-dim); font-size:14px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.un-list-item .list-meta { font-size:12px; color:var(--un-text-dim); }
.un-list-item .list-meta span { margin-right:15px; }

/* ===== Sidebar ===== */
.un-sidebar-card { background:var(--un-card); border-radius:8px; padding:20px; margin-bottom:20px; border:1px solid var(--un-border); }
.un-sidebar-title { color:var(--un-cyan); font-weight:600; margin-bottom:15px; font-size:16px; text-shadow:0 0 8px rgba(0,240,255,0.3); }
.un-sidebar-list { list-style:none; }
.un-sidebar-list li { padding:8px 0; border-bottom:1px solid rgba(0,240,255,0.05); }
.un-sidebar-list li:last-child { border-bottom:none; }
.un-sidebar-list a { color:var(--un-text); font-size:14px; }
.un-tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.un-tag-cloud a { padding:5px 12px; background:rgba(0,240,255,0.05); border:1px solid var(--un-border); border-radius:4px; font-size:13px; color:var(--un-text); }
.un-tag-cloud a:hover { background:var(--un-cyan); color:var(--un-bg); border-color:var(--un-cyan); }

/* ===== FAQ ===== */
.un-faq { max-width:800px; margin:0 auto; }
.un-faq-item { background:var(--un-card); border:1px solid var(--un-border); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.un-faq-btn { width:100%; padding:18px 22px; background:none; border:none; color:var(--un-white); font-size:16px; font-weight:600; font-family:var(--un-font); text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.un-faq-btn::after { content:'+'; color:var(--un-cyan); font-size:24px; }
.un-faq-btn.active::after { transform:rotate(45deg); }
.un-faq-answer { max-height:0; overflow:hidden; transition:max-height .3s; }
.un-faq-answer.show { max-height:500px; }
.un-faq-answer p { padding:0 22px 18px; color:var(--un-text-dim); font-size:14px; line-height:1.8; }

/* ===== Footer ===== */
.un-footer { background:var(--un-bg3); border-top:1px solid var(--un-border); position:relative; padding:40px 0 20px; }
.un-footer-glow { position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--un-cyan),var(--un-magenta),var(--un-green)); box-shadow:0 0 15px var(--un-cyan); }
.un-footer-content { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin-bottom:30px; gap:20px; }
.un-footer-brand { flex:1; min-width:300px; }
.un-footer-brand img { height:40px; margin-bottom:10px; filter:drop-shadow(0 0 8px rgba(0,240,255,0.4)); }
.un-footer-brand p { color:var(--un-text-dim); font-size:14px; max-width:500px; }
.un-footer-nav { display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
.un-footer-nav a { color:var(--un-text-dim); font-size:14px; position:relative; padding-bottom:2px; }
.un-footer-nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--un-cyan); transition:width .3s; }
.un-footer-nav a:hover::after { width:100%; }
.un-footer-links-wrap { margin-bottom:20px; }
.un-fl-row { margin-bottom:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.un-fl-label { color:var(--un-text-dim); font-size:13px; }
.un-fl-item { color:var(--un-text-dim); font-size:12px; padding:2px 8px; border:1px solid var(--un-border); border-radius:3px; }
.un-fl-item:hover { color:var(--un-cyan); border-color:var(--un-cyan); }
.un-footer-copy { text-align:center; padding-top:20px; border-top:1px solid var(--un-border); }
.un-footer-copy p { color:var(--un-text-dim); font-size:13px; }
.un-footer-copy a { color:var(--un-cyan); }

/* ===== Common (breadcrumb, detail, search, pagination, share) ===== */
.un-breadcrumb { padding:100px 0 20px; color:var(--un-text-dim); font-size:14px; }
.un-breadcrumb a { color:var(--un-cyan); }
.un-breadcrumb .separator { margin:0 8px; }
.un-detail { background:var(--un-card); border-radius:8px; padding:30px; border:1px solid var(--un-border); margin-bottom:20px; }
.un-detail-title { font-size:28px; color:var(--un-white); margin-bottom:15px; }
.un-detail-meta { display:flex; flex-wrap:wrap; gap:15px; color:var(--un-text-dim); font-size:13px; margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid var(--un-border); }
.un-detail-meta a { color:var(--un-cyan); }
.un-detail-body { color:var(--un-text); line-height:1.9; }
.un-detail-body img { max-width:100%; height:auto; border-radius:6px; margin:15px 0; }
.un-detail-body p { margin-bottom:15px; }
.un-detail-nav { display:flex; justify-content:space-between; gap:20px; margin:25px 0; }
.un-detail-nav .nav-item { flex:1; }
.un-detail-nav .nav-label { color:var(--un-text-dim); font-size:12px; }
.un-detail-nav a { color:var(--un-cyan); font-size:14px; }
.un-related { margin-top:30px; }
.un-related h3 { color:var(--un-cyan); margin-bottom:15px; }
.un-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:15px; }
.un-news-card { background:var(--un-card); border-radius:6px; overflow:hidden; border:1px solid var(--un-border); }
.un-news-card .news-img { height:120px; overflow:hidden; }
.un-news-card .news-img img { width:100%; height:100%; object-fit:cover; }
.un-news-card .news-body { padding:12px; }
.un-news-card h4 a { color:var(--un-white); font-size:14px; }
.un-news-card h4 a:hover { color:var(--un-cyan); }
.un-search-form { display:flex; gap:10px; margin-bottom:25px; }
.un-search-form input { flex:1; padding:12px 18px; background:var(--un-card); border:1px solid var(--un-border); border-radius:6px; color:var(--un-text); font-family:var(--un-font); }
.un-search-form input:focus { outline:none; border-color:var(--un-cyan); box-shadow:0 0 15px rgba(0,240,255,0.2); }
.un-search-form button { padding:12px 25px; background:transparent; color:var(--un-cyan); border:1px solid var(--un-cyan); border-radius:6px; font-weight:600; cursor:pointer; font-family:var(--un-font); }
.un-search-form button:hover { background:var(--un-cyan); color:var(--un-bg); }
.un-no-data { text-align:center; padding:60px 20px; }
.un-no-data .no-icon { font-size:48px; margin-bottom:15px; }
.un-pagination { text-align:center; margin-top:25px; }
.un-pagination a, .un-pagination span { display:inline-block; padding:8px 14px; margin:0 3px; background:var(--un-card); border:1px solid var(--un-border); border-radius:4px; color:var(--un-text); font-size:14px; }
.un-pagination .current { background:var(--un-cyan); color:var(--un-bg); border-color:var(--un-cyan); }
.un-share-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:15px 0; border-top:1px solid var(--un-border); border-bottom:1px solid var(--un-border); margin:20px 0; }
.un-share-bar .share-label { color:var(--un-text-dim); font-size:14px; }
.un-share-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; background:var(--un-card); border:1px solid var(--un-border); border-radius:4px; color:var(--un-text); font-size:13px; cursor:pointer; font-family:var(--un-font); }
.un-share-btn:hover { border-color:var(--un-cyan); color:var(--un-cyan); }
.un-share-btn .share-icon { width:18px; height:18px; }
.un-share-fixed { position:fixed; left:15px; top:50%; transform:translateY(-50%); z-index:999; display:flex; flex-direction:column; gap:8px; }
.un-share-fixed .share-label { writing-mode:vertical-rl; color:var(--un-cyan); font-size:12px; }
.un-share-fixed .un-share-btn { padding:8px; border-radius:4px; }
.un-share-float { position:fixed; bottom:15px; right:15px; z-index:999; display:flex; gap:8px; }
.un-share-float .un-share-btn { padding:8px; border-radius:4px; }

/* ===== Responsive ===== */
@media (max-width:991px) {
    .un-nav-wrap { display:none; }
    .un-toggle { display:block; }
    .un-nav-wrap.show { display:block; position:fixed; top:68px; left:0; right:0; background:var(--un-bg2); padding:15px; max-height:80vh; overflow-y:auto; z-index:999; }
    .un-nav-wrap.show .un-nav { flex-direction:column; }
    .un-header-btns { display:none !important; }
    .un-hero { flex-direction:column; }
    .un-hero-right { display:none; }
    .un-app-holo { flex-direction:column; }
    .un-app-holo-img { margin:0 auto; }
    .un-glitch-grid { grid-template-columns:repeat(2,1fr); }
    .un-glitch-wide { grid-column:span 2; }
    .un-glitch-tall { grid-row:auto; aspect-ratio:1; }
    .un-share-fixed { display:none; }
    .un-list-item { flex-direction:column; }
    .un-list-item .list-img { flex:none; width:100%; height:180px; }
}
@media (max-width:576px) {
    .un-angular-grid { grid-template-columns:repeat(3,1fr); }
    .un-app-feats { grid-template-columns:1fr; }
    .un-hero-btns { flex-direction:column; }
    .un-hero-btns a { width:100%; text-align:center; }
    .un-tilt-left, .un-tilt-right { transform:none; }
}