/* ===== AppCMS — style.css (nhẹ, mobile-first, chuẩn download站) ===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font:14px/1.7 "Microsoft YaHei","PingFang SC",Helvetica,Arial,sans-serif;color:#333;background:#f4f5f7}
a{color:#2864d4;text-decoration:none}
a:hover{color:#e8420a;text-decoration:underline}
img{max-width:100%;height:auto;vertical-align:middle}
.wrap{max-width:1200px;margin:0 auto;padding:0 12px}

/* Header */
.site-header{background:#fff;border-bottom:2px solid #2864d4}
.header-inner{display:flex;align-items:center;gap:18px;padding:14px 12px}
.logo a{font-size:24px;font-weight:700;color:#2864d4}
.slogan{color:#999;font-size:13px}
.search-box{margin-left:auto;display:flex}
.search-box input{width:280px;height:38px;border:2px solid #2864d4;border-right:0;padding:0 12px;font-size:14px;outline:0}
.search-box button{height:38px;padding:0 22px;background:#2864d4;color:#fff;border:0;cursor:pointer;font-size:15px}
.main-nav{background:#2864d4}
.main-nav .wrap{display:flex;flex-wrap:wrap}
.main-nav a{color:#fff;padding:11px 20px;font-size:16px;display:inline-block}
.main-nav a:hover,.main-nav a.on{background:#1a4ca8;text-decoration:none}

/* Breadcrumb */
.breadcrumb{padding:10px 0;color:#888;font-size:13px}
.breadcrumb i{font-style:normal;margin:0 6px;color:#ccc}
.breadcrumb .cur{color:#333}

/* Main layout */
.main-body{padding:14px 12px 30px}

/* ===== Trang chi tiết ===== */
.detail-layout{display:flex;gap:16px}
.detail-main{flex:1;min-width:0;background:#fff;border-radius:4px;padding:20px}
.detail-side{width:280px;flex-shrink:0}

.app-head{display:flex;gap:18px;padding-bottom:18px;border-bottom:1px solid #eee}
.app-icon{width:110px;height:110px;border-radius:16px;flex-shrink:0;object-fit:cover;background:#f0f0f0}
.app-meta{flex:1}
.app-title{font-size:24px;margin-bottom:12px}
.app-title small{font-size:14px;color:#999;font-weight:400}
.app-attrs{list-style:none;display:flex;flex-wrap:wrap;gap:4px 24px;margin-bottom:14px}
.app-attrs li{width:calc(33% - 16px);color:#666;font-size:13px}
.app-attrs b{color:#e8420a}
.score{color:#ff8a00;font-weight:700}
.download-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-download{display:inline-block;padding:11px 30px;border-radius:4px;background:#26a96c;color:#fff;font-size:16px;font-weight:700}
.btn-download:hover{background:#1f8f5a;color:#fff;text-decoration:none}
.btn-download.primary{background:#e8420a}
.btn-download.primary:hover{background:#c9380a}
.btn-download.disabled{background:#ccc;cursor:not-allowed}

.anchor-tabs{display:flex;gap:6px;border-bottom:2px solid #2864d4;margin:18px 0}
.anchor-tabs a{padding:9px 22px;background:#eef2fa;color:#333;font-size:15px;border-radius:4px 4px 0 0}
.anchor-tabs a:hover{background:#2864d4;color:#fff;text-decoration:none}

.content-block{margin:24px 0}
.content-block h2{font-size:19px;color:#222;border-left:4px solid #2864d4;padding-left:10px;margin-bottom:14px}
.rich-text{font-size:15px;line-height:1.9;color:#444}
.rich-text h2{font-size:17px;margin:18px 0 10px;border:0;padding:0;color:#2864d4}
.rich-text h3{font-size:15px;margin:14px 0 8px;color:#333}
.rich-text p{margin:10px 0}
.rich-text img{margin:12px 0;border-radius:4px}
.tag-row a{display:inline-block;background:#eef2fa;padding:2px 12px;border-radius:12px;margin:0 6px 6px 0;font-size:13px}

.screenshots{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.screenshots img{height:300px;width:auto;border:1px solid #eee;border-radius:6px}

.download-block{background:#fafbfd;padding:18px;border-radius:6px}
.download-list{display:flex;flex-wrap:wrap;gap:10px}
.dl-item{padding:9px 22px;background:#fff;border:1px solid #2864d4;color:#2864d4;border-radius:4px}
.dl-item:hover{background:#2864d4;color:#fff;text-decoration:none}

.link-list{list-style:none}
.link-list li{padding:7px 0;border-bottom:1px dashed #eee}
.link-list li:before{content:"›";color:#2864d4;margin-right:8px}

/* Sidebar */
.side-block{background:#fff;border-radius:4px;padding:14px;margin-bottom:16px}
.side-block h3{font-size:16px;color:#222;border-left:4px solid #e8420a;padding-left:10px;margin-bottom:10px}
.side-list{list-style:none}
.side-list li{padding:6px 0;border-bottom:1px dashed #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-rank{list-style:none;counter-reset:r}
.side-rank li{padding:6px 0 6px 28px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-rank li:before{counter-increment:r;content:counter(r);position:absolute;left:0;top:7px;width:18px;height:18px;line-height:18px;text-align:center;background:#ccc;color:#fff;border-radius:3px;font-size:12px}
.side-rank li:nth-child(-n+3):before{background:#e8420a}

/* ===== Grid (trang chủ / danh mục) ===== */
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.app-grid.wide{grid-template-columns:repeat(5,1fr)}
.app-card{background:#fff;border-radius:6px;padding:16px 10px;text-align:center;transition:.2s;display:flex;flex-direction:column;align-items:center}
.app-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);text-decoration:none;transform:translateY(-2px)}
.app-card img{width:64px;height:64px;border-radius:14px;margin-bottom:8px}
.card-name{font-size:14px;color:#333;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.card-size{font-size:12px;color:#999;margin-top:4px}

.home-hero{display:flex;gap:16px;margin-bottom:24px}
.hero-rank{width:280px;background:#fff;border-radius:6px;padding:16px;flex-shrink:0}
.hero-rank h2,.hero-new h2{font-size:18px;margin-bottom:12px;color:#222}
.hero-rank-list{list-style:none;counter-reset:r}
.hero-rank-list li{padding:7px 0 7px 28px;position:relative;border-bottom:1px dashed #eee}
.hero-rank-list li:before{counter-increment:r;content:counter(r);position:absolute;left:0;top:8px;width:18px;height:18px;line-height:18px;text-align:center;background:#ccc;color:#fff;border-radius:3px;font-size:12px}
.hero-rank-list li:nth-child(-n+3):before{background:#e8420a}
.hero-new{flex:1;background:#fff;border-radius:6px;padding:16px}

.home-cat{background:#fff;border-radius:6px;padding:16px;margin-bottom:20px}
.cat-head{display:flex;align-items:center;margin-bottom:14px;border-bottom:1px solid #eee;padding-bottom:10px}
.cat-head h2{font-size:19px}
.cat-head .more{margin-left:auto;font-size:13px;color:#999}
.list-title{font-size:20px;margin-bottom:16px;padding:10px 0}
.list-title small{font-size:14px;color:#999}

/* Phân trang */
.pagination{text-align:center;margin:24px 0}
.pagination a,.pagination .cur{display:inline-block;padding:7px 14px;margin:2px;border:1px solid #ddd;border-radius:4px;background:#fff}
.pagination .cur{background:#2864d4;color:#fff;border-color:#2864d4}

/* Friendly links + footer */
.friend-links{background:#fff;border-radius:6px;padding:14px;margin:20px auto}
.friend-links h3{font-size:15px;margin-bottom:8px;color:#666}
.flink-list a{display:inline-block;margin:0 14px 6px 0;color:#888;font-size:13px}
.site-footer{background:#2b2f38;color:#aaa;padding:24px 0;text-align:center;margin-top:30px}
.site-footer a{color:#aaa}
.foot-nav{margin-bottom:10px}
.copyright{font-size:12px;line-height:1.8}
.empty{padding:60px 0;text-align:center;color:#999;font-size:16px}

/* ===== Mobile (Baidu xếp hạng theo mobile-first) ===== */
@media(max-width:768px){
  .header-inner{flex-wrap:wrap}
  .logo a{font-size:20px}
  .slogan{display:none}
  .search-box{margin:8px 0 0;width:100%}
  .search-box input{flex:1;width:auto}
  .main-nav .wrap{overflow-x:auto;flex-wrap:nowrap}
  .main-nav a{padding:10px 14px;font-size:14px;white-space:nowrap}
  .detail-layout{flex-direction:column}
  .detail-side{width:100%}
  .app-head{flex-direction:column;align-items:center;text-align:center}
  .app-attrs li{width:50%}
  .app-grid,.app-grid.wide{grid-template-columns:repeat(3,1fr)}
  .home-hero{flex-direction:column}
  .hero-rank{width:100%}
  .screenshots img{height:200px}
}
@media(max-width:420px){
  .app-grid,.app-grid.wide{grid-template-columns:repeat(2,1fr)}
  .app-attrs li{width:100%}
}