/* ===== dl_hub — Download Hub Theme ===== */
/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--dlh-bg:#0c1117;
--dlh-bg2:#141c25;
--dlh-bg3:#1a242f;
--dlh-teal:#00e5c3;
--dlh-teal-dim:rgba(0,229,195,.15);
--dlh-blue:#3b9eff;
--dlh-purple:#a47aff;
--dlh-orange:#ff9f43;
--dlh-text:#d8e3ea;
--dlh-text2:#7e919f;
--dlh-border:#1e2c38;
--dlh-radius:10px;
}
html,body{background:var(--dlh-bg);color:var(--dlh-text);font-family:'Segoe UI','Noto Sans Thai',Tahoma,sans-serif;font-size:15px;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:.2s}
img{max-width:100%;display:block}
.dlh-wrap{max-width:960px;margin:0 auto;padding:0 16px;position:relative}

/* ===== Header ===== */
.dlh-hd{position:sticky;top:0;z-index:100;background:rgba(12,17,23,.95);border-bottom:1px solid var(--dlh-border);backdrop-filter:blur(8px)}
.dlh-hd__inner{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dlh-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--dlh-teal)}
.dlh-brand__icon{font-size:22px}
.dlh-brand__name{letter-spacing:.5px}
.dlh-toggle-chk{display:none}
.dlh-burger{display:none;font-size:24px;color:var(--dlh-teal);cursor:pointer;padding:4px 8px;user-select:none}
.dlh-nav{flex:1;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dlh-nav__a{padding:6px 12px;font-size:13px;color:var(--dlh-text2);border:1px solid transparent;border-radius:6px}
.dlh-nav__a:hover{color:var(--dlh-teal);border-color:var(--dlh-teal);background:var(--dlh-teal-dim)}
.dlh-hd__badge{padding:4px 10px;background:var(--dlh-teal);color:var(--dlh-bg);font-size:11px;font-weight:800;border-radius:4px;letter-spacing:1px;white-space:nowrap}
.dlh-hd__bar{height:3px;background:var(--dlh-bg2)}
.dlh-hd__progress{height:100%;width:75%;background:linear-gradient(90deg,var(--dlh-teal),var(--dlh-blue));border-radius:0 2px 2px 0;animation:dlh-loading 3s ease-in-out infinite}
@keyframes dlh-loading{0%,100%{width:75%}50%{width:100%}}
@media(max-width:640px){
.dlh-burger{display:block}
.dlh-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dlh-bg2);border-bottom:1px solid var(--dlh-border);padding:12px 16px;flex-direction:column;z-index:99}
.dlh-toggle-chk:checked~.dlh-nav{display:flex}
.dlh-hd__badge{display:none}
}

/* ===== Hero ===== */
.dlh-hero{position:relative;padding:50px 20px;text-align:center;overflow:hidden;background:linear-gradient(180deg,var(--dlh-bg2),var(--dlh-bg))}
.dlh-hero__bg{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(0,229,195,.12) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(59,158,255,.1) 0%,transparent 50%);pointer-events:none}
.dlh-hero__content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.dlh-hero__tag{display:inline-block;padding:5px 14px;background:var(--dlh-teal-dim);border:1px solid rgba(0,229,195,.3);border-radius:20px;font-size:12px;font-weight:700;color:var(--dlh-teal);letter-spacing:2px;margin-bottom:16px}
.dlh-hero__h{font-size:clamp(28px,7vw,48px);color:#fff;font-weight:900;margin-bottom:10px;text-shadow:0 0 30px rgba(0,229,195,.3)}
.dlh-hero__desc{color:var(--dlh-text2);font-size:14px;margin-bottom:20px;max-width:500px;margin-left:auto;margin-right:auto}

/* Speed meter */
.dlh-speed-meter{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:var(--dlh-bg3);border:1px solid var(--dlh-border);border-radius:8px;margin-bottom:18px}
.dlh-speed-meter__label{font-size:11px;color:var(--dlh-text2);font-weight:700;letter-spacing:1px;white-space:nowrap}
.dlh-speed-meter__track{width:120px;height:6px;background:var(--dlh-bg);border-radius:3px;overflow:hidden}
.dlh-speed-meter__fill{height:100%;width:92%;background:linear-gradient(90deg,var(--dlh-teal),var(--dlh-blue));border-radius:3px;animation:dlh-pulse 2s ease-in-out infinite}
.dlh-speed-meter__val{font-size:13px;color:var(--dlh-teal);font-weight:800}
@keyframes dlh-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Hero buttons */
.dlh-hero-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.dlh-btn{display:inline-block;padding:10px 20px;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;color:#fff !important;white-space:nowrap;text-decoration:none}
.dlh-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.dlh-btn:active{transform:scale(.96)}
.dlh-btn--green{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 14px rgba(16,185,129,.4)}
.dlh-btn--blue{background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 14px rgba(59,130,246,.4)}
.dlh-btn--purple{background:linear-gradient(135deg,#a855f7,#7c3aed);box-shadow:0 4px 14px rgba(168,85,247,.4)}
.dlh-btn--orange{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 14px rgba(245,158,11,.4)}
.dlh-btn--teal{background:linear-gradient(135deg,var(--dlh-teal),#00b89c);box-shadow:0 4px 14px rgba(0,229,195,.3)}

/* ===== Stats ===== */
.dlh-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dlh-border);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);overflow:hidden;max-width:960px;margin:0 auto}
.dlh-stat{background:var(--dlh-bg2);padding:20px 12px;text-align:center}
.dlh-stat__icon{font-size:24px;display:block;margin-bottom:6px}
.dlh-stat__num{display:block;font-size:22px;font-weight:900;color:var(--dlh-teal)}
.dlh-stat__label{display:block;font-size:12px;color:var(--dlh-text2);margin-top:4px}

/* ===== Section ===== */
.dlh-section{padding:32px 0}
.dlh-section--alt{background:var(--dlh-bg2);box-shadow:0 0 0 100vmax var(--dlh-bg2);clip-path:inset(0 -100vmax)}
.dlh-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.dlh-sec-head__icon{font-size:22px}
.dlh-sec-head__h{font-size:18px;font-weight:800;color:#fff;letter-spacing:1px;white-space:nowrap}
.dlh-sec-head__tag{padding:2px 8px;background:var(--dlh-orange);color:#000;font-size:10px;font-weight:800;border-radius:3px;letter-spacing:1px}
.dlh-sec-head__line{flex:1;height:1px;background:linear-gradient(90deg,var(--dlh-border),transparent)}

/* ===== Carousel ===== */
.dlh-carousel-wrap{overflow:hidden;border-radius:var(--dlh-radius);border:1px solid var(--dlh-border);background:var(--dlh-bg2);padding:12px 0}
.dlh-carousel-track{display:flex;animation:dlh-scroll 22s linear infinite}
.dlh-carousel-track:hover{animation-play-state:paused}
.dlh-carousel-group{display:flex;gap:12px;flex-shrink:0;padding:0 6px}
@keyframes dlh-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.dlh-file-thumb{display:inline-block;width:110px;text-align:center;text-decoration:none;position:relative;border:1px solid var(--dlh-border);border-radius:8px;overflow:hidden;background:var(--dlh-bg3);padding-bottom:6px;transition:border-color .2s,transform .2s}
.dlh-file-thumb:hover{border-color:var(--dlh-teal);transform:translateY(-3px)}
.dlh-file-thumb__name{display:block;font-size:10px;color:var(--dlh-text);padding:4px 4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlh-file-thumb__size{display:block;font-size:9px;color:var(--dlh-teal);font-weight:700}

/* ===== Folder grid ===== */
.dlh-folder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dlh-folder{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--dlh-bg2);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);transition:border-color .2s,transform .2s}
.dlh-folder:hover{border-color:var(--dlh-teal);transform:translateX(4px)}
.dlh-folder__icon{font-size:28px;flex-shrink:0}
.dlh-folder__name{flex:1;font-size:14px;font-weight:600;color:var(--dlh-text)}
.dlh-folder__arrow{color:var(--dlh-text2);font-size:20px}

/* ===== App grid ===== */
.dlh-app-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dlh-app-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--dlh-bg2);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);transition:border-color .2s}
.dlh-app-card:hover{border-color:var(--dlh-teal)}
.dlh-app-card__icon{width:52px;height:52px;border-radius:12px;overflow:hidden;flex-shrink:0;border:1px solid var(--dlh-border)}
.dlh-app-card__info{flex:1;min-width:0}
.dlh-app-card__name{display:block;font-size:14px;font-weight:700;color:var(--dlh-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlh-app-card__ver{display:block;font-size:11px;color:var(--dlh-text2)}
.dlh-app-card__dl{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--dlh-teal-dim);border:1px solid rgba(0,229,195,.3);border-radius:50%;color:var(--dlh-teal);font-size:16px;flex-shrink:0;transition:background .2s}
.dlh-app-card:hover .dlh-app-card__dl{background:var(--dlh-teal);color:var(--dlh-bg)}

/* ===== Rank ===== */
.dlh-rank{list-style:none;counter-reset:dlh-rk}
.dlh-rank__item{counter-increment:dlh-rk;border-bottom:1px solid var(--dlh-border)}
.dlh-rank__item a{display:flex;align-items:center;gap:12px;padding:12px 4px;color:var(--dlh-text);text-decoration:none;font-size:14px;transition:color .2s}
.dlh-rank__item a:hover{color:var(--dlh-teal)}
.dlh-rank__item a::before{content:counter(dlh-rk,decimal-leading-zero);min-width:28px;font-weight:800;color:var(--dlh-text2);font-size:13px}
.dlh-rank__item:nth-child(-n+3) a::before{color:var(--dlh-teal);font-size:15px}
.dlh-rank__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlh-rank__bar{width:120px;height:5px;background:var(--dlh-bg3);border-radius:3px;overflow:hidden;flex-shrink:0}
.dlh-rank__fill{display:block;height:100%;background:linear-gradient(90deg,var(--dlh-teal),var(--dlh-blue));border-radius:3px}
.dlh-rank__count{font-size:12px;color:var(--dlh-teal);min-width:60px;text-align:right;font-weight:700}

/* ===== Changelog / News ===== */
.dlh-changelog{position:relative;padding-left:24px;border-left:2px solid var(--dlh-border)}
.dlh-log-entry{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--dlh-border);text-decoration:none;transition:background .2s;position:relative}
.dlh-log-entry:hover{background:var(--dlh-teal-dim);border-radius:0 var(--dlh-radius) var(--dlh-radius) 0}
.dlh-log-entry__date{font-size:12px;color:var(--dlh-blue);font-weight:700;min-width:42px;padding-top:2px}
.dlh-log-entry__dot{position:absolute;left:-29px;top:20px;width:10px;height:10px;background:var(--dlh-teal);border:2px solid var(--dlh-bg);border-radius:50%}
.dlh-log-entry__body{flex:1;min-width:0}
.dlh-log-entry__img{width:100px;border-radius:6px;overflow:hidden;margin-bottom:6px;border:1px solid var(--dlh-border)}
.dlh-log-entry__h{font-size:14px;color:var(--dlh-text);font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== README ===== */
.dlh-readme{border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);overflow:hidden;background:var(--dlh-bg3)}
.dlh-readme__titlebar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--dlh-bg2);border-bottom:1px solid var(--dlh-border);font-size:13px;color:var(--dlh-text2)}
.dlh-readme__close{margin-left:auto;color:var(--dlh-text2);font-size:12px}
.dlh-readme__body{padding:18px 20px;font-size:14px;color:var(--dlh-text);line-height:1.9}
.dlh-readme__body p{text-indent:2em;margin:0}

/* ===== Bonus ===== */
.dlh-bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dlh-bonus{background:var(--dlh-bg2);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);padding:20px;text-align:center;transition:transform .25s,border-color .25s}
.dlh-bonus:hover{transform:translateY(-4px);border-color:var(--dlh-teal)}
.dlh-bonus__pct{font-size:32px;font-weight:900;color:var(--dlh-teal);margin-bottom:6px}
.dlh-bonus__h{font-size:15px;font-weight:700;color:var(--dlh-text);margin-bottom:8px}
.dlh-bonus__p{font-size:13px;color:var(--dlh-text2);margin-bottom:12px;line-height:1.6}
.dlh-bonus__bar{height:4px;background:var(--dlh-bg);border-radius:2px;overflow:hidden}
.dlh-bonus__fill{height:100%;background:linear-gradient(90deg,var(--dlh-teal),var(--dlh-blue));border-radius:2px}

/* ===== About static ===== */
.dlh-about-static{padding:24px 16px;margin:24px 0;border-radius:12px;background:rgba(255,255,255,.04);line-height:1.85;border:1px solid var(--dlh-border)}
.dlh-about-static__title{font-size:20px;font-weight:700;margin:0 0 12px;color:#fff}
.dlh-about-static__text{font-size:15px;text-indent:2em;margin:0;opacity:.88;color:var(--dlh-text)}

/* ===== FAQ ===== */
.dlh-faq{padding:24px 16px;margin:24px 0;border-radius:12px;background:rgba(0,0,0,.15);border:1px solid var(--dlh-border)}
.dlh-faq__title{font-size:20px;font-weight:700;margin:0 0 14px;text-align:center;color:#fff}
.dlh-faq__list{display:flex;flex-direction:column;gap:10px}
.dlh-faq-item{border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);padding:12px 16px;cursor:pointer;transition:background .2s,border-color .2s}
.dlh-faq-item[open]{background:var(--dlh-teal-dim);border-color:rgba(0,229,195,.3)}
.dlh-faq-item summary{font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;gap:6px;color:var(--dlh-text)}
.dlh-faq-item summary::-webkit-details-marker{display:none}
.dlh-faq-ans{margin:10px 0 0;font-size:14px;line-height:1.7;opacity:.88;padding-left:22px;color:var(--dlh-text2)}

/* ===== Footer ===== */
.dlh-ft{background:var(--dlh-bg2);border-top:1px solid var(--dlh-border);margin-top:30px;padding:0 16px}
.dlh-ft__inner{max-width:960px;margin:0 auto;padding:28px 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dlh-ft__h{font-size:14px;font-weight:700;color:var(--dlh-teal);margin-bottom:10px}
.dlh-ft__link{display:block;font-size:13px;color:var(--dlh-text2);margin:4px 0}
.dlh-ft__link:hover{color:var(--dlh-teal)}
.dlh-ft__bottom{max-width:960px;margin:0 auto;padding:14px 0;border-top:1px solid var(--dlh-border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--dlh-text2)}
.dlh-ft__speed{color:var(--dlh-teal);font-weight:700}

/* ===== 404 ===== */
.dlh-404{text-align:center;padding:80px 20px}
.dlh-404__icon{font-size:60px;margin-bottom:10px}
.dlh-404__code{font-size:80px;font-weight:900;color:var(--dlh-teal);text-shadow:0 0 30px rgba(0,229,195,.4)}
.dlh-404__msg{color:var(--dlh-text2);font-size:16px;margin-bottom:20px}
.dlh-404__bar{width:200px;height:6px;background:var(--dlh-bg3);border-radius:3px;margin:0 auto 20px;overflow:hidden}
.dlh-404__fail{height:100%;width:30%;background:#ff4444;border-radius:3px}

/* ===== Article list ===== */
.dlh-cat-desc{color:var(--dlh-text2);font-size:14px;margin:-12px 0 18px;text-align:center}
.dlh-file-list{display:flex;flex-direction:column;gap:8px}
.dlh-file-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--dlh-bg2);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);text-decoration:none;transition:border-color .2s}
.dlh-file-row:hover{border-color:var(--dlh-teal)}
.dlh-file-row__icon{font-size:24px;flex-shrink:0}
.dlh-file-row__info{flex:1;display:flex;gap:12px;align-items:center;min-width:0}
.dlh-file-row__thumb{width:80px;border-radius:6px;overflow:hidden;flex-shrink:0;border:1px solid var(--dlh-border)}
.dlh-file-row__meta{flex:1;min-width:0}
.dlh-file-row__name{font-size:15px;font-weight:600;color:var(--dlh-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlh-file-row__date{font-size:12px;color:var(--dlh-text2)}
.dlh-file-row__dl{padding:6px 14px;background:var(--dlh-teal-dim);border:1px solid rgba(0,229,195,.3);border-radius:6px;color:var(--dlh-teal);font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0}
.dlh-file-row:hover .dlh-file-row__dl{background:var(--dlh-teal);color:var(--dlh-bg)}
.dlh-pagination{text-align:center;margin-top:20px}
.dlh-pagination a,.dlh-pagination span{display:inline-block;padding:6px 14px;border:1px solid var(--dlh-border);color:var(--dlh-text2);margin:2px;border-radius:6px;font-size:13px}
.dlh-pagination a:hover,.dlh-pagination .current{background:var(--dlh-teal);color:var(--dlh-bg);border-color:var(--dlh-teal)}

/* ===== Article detail ===== */
.dlh-breadcrumb{font-size:13px;color:var(--dlh-text2);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.dlh-breadcrumb a{color:var(--dlh-teal);text-decoration:none}
.dlh-breadcrumb a:hover{text-decoration:underline}
.dlh-breadcrumb__cur{color:var(--dlh-text)}
.dlh-detail-head{margin-bottom:20px}
.dlh-detail-head__badge{display:inline-block;padding:3px 10px;background:var(--dlh-teal-dim);border:1px solid rgba(0,229,195,.3);border-radius:4px;font-size:11px;font-weight:700;color:var(--dlh-teal);letter-spacing:1px;margin-bottom:10px}
.dlh-detail-head__title{font-size:24px;font-weight:800;color:#fff;margin-bottom:8px;line-height:1.4}
.dlh-detail-head__meta{display:flex;gap:16px;font-size:13px;color:var(--dlh-text2)}
.dlh-detail-cover{border-radius:var(--dlh-radius);overflow:hidden;border:1px solid var(--dlh-border);margin-bottom:20px}
.dlh-detail-body{font-size:15px;line-height:1.9;color:var(--dlh-text)}
.dlh-detail-body p{margin-bottom:14px}
.dlh-detail-body h2,.dlh-detail-body h3{color:#fff;margin:20px 0 10px}
.dlh-detail-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0;padding:14px;background:var(--dlh-bg3);border-radius:var(--dlh-radius);border:1px solid var(--dlh-border)}
.dlh-detail-tags__label{font-size:12px;color:var(--dlh-text2);font-weight:700}
.dlh-tag{padding:3px 10px;border:1px solid var(--dlh-teal);color:var(--dlh-teal);border-radius:12px;font-size:12px;transition:background .2s}
.dlh-tag:hover{background:var(--dlh-teal);color:var(--dlh-bg)}
.dlh-detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--dlh-border)}
.dlh-detail-nav__link{padding:14px 16px;background:var(--dlh-bg2);border:1px solid var(--dlh-border);border-radius:var(--dlh-radius);text-decoration:none;transition:border-color .2s}
.dlh-detail-nav__link:hover{border-color:var(--dlh-teal)}
.dlh-detail-nav__link--next{text-align:right}
.dlh-detail-nav__dir{display:block;font-size:12px;color:var(--dlh-teal);margin-bottom:4px;font-weight:700}
.dlh-detail-nav__h{display:block;font-size:14px;color:var(--dlh-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Universal logo */
.tpl-logo-img,.tpl-logo-img img{display:inline-block !important;vertical-align:middle;max-width:180px;width:auto;height:48px;margin-right:6px;object-fit:contain}
mip-img.tpl-logo-img{width:auto;max-width:180px;height:48px}

/* ===== Responsive ===== */
@media(max-width:640px){
.dlh-stats{grid-template-columns:repeat(2,1fr)}
.dlh-folder-grid{grid-template-columns:1fr 1fr}
.dlh-app-grid{grid-template-columns:1fr}
.dlh-bonus-grid{grid-template-columns:1fr}
.dlh-ft__inner{grid-template-columns:1fr}
.dlh-detail-nav{grid-template-columns:1fr}
.dlh-file-row__thumb{display:none}
.dlh-rank__bar{width:60px}
}