/*
Theme Name: ThuvienMC
Description: Theme cho thuvienmc.com - thu vien addon Minecraft PE/Bedrock
Version: 1.1
*/

/* Bang mau lay tu theme goc (apkfab): nen #f6f9fc, the trang, chu #222,
   xanh chu dao #0284fe, chu phu #9f9f9f. Khong dung nen toi. */
:root {
  --bg:        #f6f9fc;
  --surface:   #ffffff;
  --surface-2: #f9f9f9;
  --border:    #e8ecf1;
  --text:      #222222;
  --muted:     #9f9f9f;
  --muted-2:   #6f6f6f;
  --brand:     #0284fe;
  --brand-dim: #3483ce;
  --star:      #ff9500;
  --radius:    8px;
  --maxw:      1200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ---------- Dau trang ---------- */
.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap { display: flex; align-items: center; gap: 20px; height: 58px; }
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 18px; white-space: nowrap; color: var(--text);
}
.brand img { width: 34px; height: 34px; border-radius: 7px; flex-shrink: 0; }
.brand .brand-text span { color: var(--brand); }
.nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.nav::-webkit-scrollbar { height: 0; }
.nav a {
  padding: 6px 12px; border-radius: 6px; color: var(--muted-2);
  font-size: 14px; white-space: nowrap;
}
.nav a:hover { color: var(--brand); }
.nav a.on { color: var(--brand); font-weight: 600; }
.search input {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 20px; padding: 7px 16px; font-size: 13px; width: 180px;
}
.search input:focus { outline: none; border-color: var(--brand); background: #fff; }

/* ---------- Luoi bai viet ---------- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 26px 0 14px;
}
.section-head h2,
.section-head .list-title { font-size: 18px; margin: 0; font-weight: 600; line-height: 1.4; }
.section-head a { color: var(--brand); font-size: 13px; }

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .15s ease;
}
.card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); }
.card .thumb { aspect-ratio: 16/9; background: var(--surface-2); position: relative; }
/* :not(.ph-logo) - neu khong, logo du phong bi keo cang kin o va che mat chu */
.card .thumb img:not(.ph-logo) { width: 100%; height: 100%; object-fit: cover; }
/* O du phong: logo dat giua tren nen nhat (mau do PHP dat inline theo tieu de).
   Khong dat color o day de khong de len mau inline. */
.card .thumb .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12px; text-align: center; padding: 12px; line-height: 1.4;
  font-weight: 500;
}
.ph-logo {
  width: 46px !important; height: 46px !important;
  border-radius: 9px; opacity: .8; object-fit: contain !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
/* Chi dung khi chua dat logo cho site */
.ph-text { color: var(--muted-2); }
.feat .ph-logo { width: 58px !important; height: 58px !important; }
.feat-big .ph-logo { width: 88px !important; height: 88px !important; }
.card .body { padding: 10px 12px 12px; }
.card h3 {
  font-size: 13px; line-height: 1.45; margin: 0 0 7px; font-weight: 500;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.star { color: var(--star); font-weight: 600; }
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 3px;
  background: #eaf4ff; color: var(--brand); font-size: 11px; font-weight: 500;
}

/* ---------- Bai viet ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--border); padding: 26px 0; }
.hero .wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.hero .icon {
  width: 96px; height: 96px; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-2);
}
.hero .icon img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { font-size: 23px; margin: 0 0 10px; line-height: 1.3; font-weight: 600; }
.hero .info { flex: 1; min-width: 260px; }
.btn {
  display: inline-block; margin-top: 14px; padding: 10px 34px; border-radius: 20px;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 14px;
}
.btn:hover { background: var(--brand-dim); }

.content {
  padding: 22px 24px 34px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); margin-top: 22px;
}
.content h2, .content h3 { margin: 22px 0 9px; line-height: 1.4; font-weight: 600; }
.content h3 { font-size: 16px; }
.content p, .content li { color: #444; }
.content img { border-radius: 6px; margin: 14px 0; }
.content ol, .content ul { padding-left: 20px; }
.content li { margin: 6px 0; }
.content a { color: var(--brand); }
.content a:hover { text-decoration: underline; }

/* ---------- Phan trang / chan trang ---------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin: 30px 0; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 7px 13px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); font-size: 13px; color: var(--muted-2);
}
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }

.site-foot {
  background: var(--surface); border-top: 1px solid var(--border);
  margin-top: 36px; padding: 24px 0; color: var(--muted); font-size: 13px;
}

@media (max-width: 640px) {
  .site-head .wrap { height: auto; padding: 9px 16px; flex-wrap: wrap; gap: 9px; }
  .search, .search input { width: 100%; }
  .hero h1 { font-size: 19px; }
  .content { padding: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ---------- Banner noi bat (trang chu) ---------- */
/* Bo cuc goc: mot o lon ben trai, bon o nho xep luoi 2x2 ben phai. */
.featured {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.feat {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--surface-2); min-height: 118px;
}
.feat-big { grid-row: span 2; grid-column: span 1; }
.feat .thumb { position: absolute; inset: 0; }
.feat .thumb img:not(.ph-logo) { width: 100%; height: 100%; object-fit: cover; }
/* O du phong trong banner: caption trang nam de len, nen day them lop phu toi
   o day duoi de chu van doc duoc tren nen nhat. */
.feat .thumb .ph { position: absolute; inset: 0; display: grid; place-items: center;
                   text-align: center; padding: 14px 14px 42px; font-size: 13px;
                   font-weight: 500; }
.feat .ph-logo { position: relative; z-index: 1; }
.feat .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: #fff; font-size: 13px; font-weight: 500; line-height: 1.35;
  overflow: hidden;
  z-index: 2;
}
/* Cat 2 dong PHAI dat o lop trong: .cap la phan tu absolute nen bi blockify,
   display:-webkit-box tu dong thanh flow-root va line-clamp mat hieu luc. */
.feat .cap-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O du phong (nen nhat, khong co anh that): dai chu doi sang nen dam dac thay
   vi gradient - gradient trong suot tren nen nhat lam chu trang khong doc duoc. */
.feat:has(.ph) .cap {
  background: rgba(17, 24, 39, .82);
  padding: 9px 12px;
}
.feat-big .cap { font-size: 16px; padding: 26px 16px 14px; }

/* Tren man hinh hep, ban goc KHONG xep luoi ma cho bang banner truot ngang
   (Swiper, the 320x180, vuot de xem tiep). Tu 1024px tro len no tat carousel,
   quay ve bo cuc tinh 1 o lon + may o nho - dung nhu luoi ben tren.
   Lam lai bang scroll-snap cua CSS: cung vuot, cung dinh diem, nhung khong phai
   keo them thu vien Swiper (~150KB) va khong can JavaScript. */
@media (max-width: 1023px) {
  .featured {
    display: flex;
    grid-template-columns: none;          /* huy luoi cua ban rong */
    grid-template-rows: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                /* Firefox */
    /* Tran ra sat hai mep man hinh nhu ban goc, bu lai padding 16px cua .wrap.
       padding hai dau de the dau/cuoi khong dinh mep. */
    margin-left: -16px; margin-right: -16px;
    padding: 0 16px 4px;
  }
  .featured::-webkit-scrollbar { display: none; }

  /* Be rong co dinh -> cac the deu nhau va the ke tiep lo ra mot phan, cho
     nguoi doc biet con vuot duoc. Ban goc dung 320px. */
  .feat,
  .feat-big {
    flex: 0 0 min(78vw, 320px);
    height: 180px;
    min-height: 0;
    scroll-snap-align: start;
  }
  .feat-big .cap { font-size: 14px; padding: 22px 14px 12px; }
}

/* ---------- Trang chi tiet bai viet ---------- */
/* goc-detail.css (281KB cua theme apkfab) da lo phan lon bo cuc. Hai khoi duoi
   day thuoc plugin ben ngoai (rate-my-post, comment form) nen khong co trong
   do - bo sung kieu toi thieu cho khop tong the. */
.rate.rmp-widgets-container {
  background: var(--surface-2); padding: 22px 0; text-align: center;
}
.rate .rate-star { font-size: 26px; letter-spacing: 3px; line-height: 1; }
.rate .rate-star .star { color: #d8dde5; }
.rate .rate-star .star.on { color: #fbbf24; }
.rate .rate-num { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* Khoi binh luan KHONG dat kieu o day.
   .post-comment chi xuat hien tren trang bai viet (single.php), ma trang do lai
   nap bo CSS goc (goc-styles.css...) chu KHONG nap style.css - xem nhanh nhat o
   functions.php, nhanh is_singular('post') return som truoc khi enqueue 'tmc'.
   Truoc day day co mot khoi kieu rieng cho .post-comment: no chua bao gio chay,
   chi lam tuong da sua trong khi trang that van hong. Kieu that cua form nam o
   goc-styles.css (#commentform input, #commentform textarea). */

/* ---------- Day chan trang xuong day man hinh ---------- */
/* Trang it noi dung (vd tim kiem chi ra 1 ket qua) lam chan trang lo lung giua
   man hinh, ben duoi con lai mot mang trong lon.
   Cach lam: <body> thanh cot flex cao it nhat bang man hinh, chan trang lay
   margin-top:auto de an het cho thua xuong duoi.
   CHU Y - moi khoi con PHAI de flex:none. Lan truoc dat 'flex: 1 0 auto' (cho
   phep gian ra) thi cho thua bi CHIA DEU cho ca ba khoi 'body > .wrap' cua
   trang chu, khoi banner phinh cao gan het man hinh va tao mot mang trang lon o
   dau trang. Khong khoi nao duoc gian thi chi con margin-top:auto lam viec,
   dung nhu mong muon o ca trang dai lan trang ngan. */
html { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > * { flex: none; }
/* .wrap can giua bang 'margin: 0 auto'. Trong flex, item co le trai/phai auto
   thi KHONG duoc keo cang nua (auto margin thang stretch) - no co lai vua khit
   noi dung, keo theo luoi bai tut tu 5 cot xuong con 2 cot rong ngoach. Dat
   width:100% de item chiem tron be ngang truoc da, roi max-width moi cat lai va
   margin auto can giua - dung nhu khi <body> chua dung flex. */
body > .wrap { width: 100%; }
.site-foot { margin-top: auto; }
/* margin-top:auto de len 36px o tren, ma tren trang DAI no tu ve 0 - noi dung
   se dinh sat vao duong vien chan trang. Tra lai khoang tho o phia noi dung. */
body > .wrap:last-of-type { padding-bottom: 36px; }
@supports (min-height: 100dvh) {
  /* 100vh tren dien thoai tinh ca thanh dia chi -> trang bi du ra mot doan */
  body { min-height: 100dvh; }
}

/* H1 trang chu - an bang display:none theo yeu cau.
   Luu y: display:none an voi ca trinh doc man hinh, va Google co the coi chu
   bi an la dau hieu che giau noi dung. Da trao doi, chu site chon cach nay. */
.sr-only {
  display: none;
}