@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

/* Kho IPA Luu Tru - khung chung voi trang chinh Kzlvn (header/footer,
   sang/toi theo khoa kzlvn-theme). Noi dung archive o giua.
   Khong dung bien CSS cho mau chinh (tuong thich Safari doi cu). */

* { box-sizing: border-box; }
body {
  margin: 0; background: #1e1e1e; color: #e8eef6;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; font-size: 15px; line-height: 1.45;
}
body.light { background: #f6f6f6; color: #1e1e1e; }
#wrap { max-width: 1100px; margin: 0 auto; padding: 14px 12px 40px; }
h1, h2, h3, h4 { font-family: Poppins, -apple-system, "Segoe UI", sans-serif; }
a { color: #9d8fff; text-decoration: none; cursor: pointer; }
body.light a { color: #482dff; }
a:hover { text-decoration: underline; }

/* ---------- Header (giong trang chinh) ---------- */
#header { text-align: center; padding: 20px 6px 6px; position: relative; }
#header .logo { width: 84px; height: 84px; border-radius: 22px;
  box-shadow: 0 10px 28px rgba(72,45,255,.35); }
#header h1 { margin: 10px 0 2px; font-size: 27px; font-weight: 800; letter-spacing: -.4px; }
#header p { margin: 0 0 12px; color: #a3a3a3; font-size: 14px; }
body.light #header p { color: #696969; }
#themeBtn { position: absolute; right: 2px; top: 8px; font-size: 13px;
  color: #a3a3a3; text-decoration: none; background: #252526;
  border: 1px solid #444444; padding: 6px 12px; border-radius: 999px; }
#themeBtn:hover { text-decoration: none; }
body.light #themeBtn { background: #fff; border-color: #e3e3e3; color: #696969; }
.addrow { margin: 4px 0 6px; }

/* ---------- Buttons (pill) ---------- */
.btn { display: inline-block; text-decoration: none; cursor: pointer;
  background: #303031; color: #e8e8e8; border: 1px solid #444444;
  padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  margin: 2px; }
.btn:hover { text-decoration: none; }
body.light .btn { background: #fff; color: #1e1e1e; border-color: #e3e3e3; }
.btn-main { background: #482dff; color: #fff !important; border-color: transparent; }
body.light .btn-main { background: #482dff; color: #fff !important; border-color: transparent; }

/* ---------- Nav 2 gian (segmented, khong flex - Safari co) ---------- */
.sitenav { text-align: center; max-width: 500px; margin: 18px auto 10px;
  padding: 6px; background: #252526; font-size: 0;
  border: 1px solid #444444; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.sitenav .btn { display: inline-block; width: 48%; text-align: center; margin: 0;
  padding: 10px 4px; font-size: 14px; vertical-align: middle;
  background: transparent; border-color: transparent; border-radius: 999px; }
.sitenav .btn.on { background: #482dff; color: #fff !important;
  box-shadow: 0 2px 12px rgba(72,45,255,.5); }
body.light .sitenav { background: #ececf1; border-color: #dcdce2;
  box-shadow: 0 6px 16px rgba(20,20,60,.10); }
body.light .sitenav .btn { background: transparent; color: #1e1e1e; border-color: transparent; }
body.light .sitenav .btn.on { background: #482dff; color: #fff !important; }

/* ---------- Tieu de trang archive ---------- */
.page-title { font-size: 24px; font-weight: 700; text-align: center; margin: 20px 0 4px; }
.page-note { color: #a3a3a3; font-size: 14px; line-height: 1.55;
  max-width: 720px; margin: 0 auto 8px; text-align: center; }
body.light .page-note { color: #696969; }
.page-note b { color: #e8eef6; }
body.light .page-note b { color: #1e1e1e; }
#randomBtn { float: right; }

/* ---------- Nut bam chung ---------- */
button { background: #303031; color: #e8e8e8; border: 1px solid #444444;
  border-radius: 999px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
body.light button { background: #fff; color: #1e1e1e; border-color: #e3e3e3; }
button:hover { border-color: #482dff; }
button:disabled { opacity: .35; cursor: default; }

/* ---------- Search form ---------- */
form { background: #252526; border: 1px solid #444444; border-radius: 16px;
  padding: 14px 16px 8px; margin: 16px 0 6px; }
body.light form { background: #fff; border-color: #e8e8e8; }
label { white-space: nowrap; color: #a3a3a3; font-size: 14px; }
body.light label { color: #696969; }
form input, form select { background: #1e1e1e; color: #f6f6f6;
  border: 1px solid #444444; border-radius: 8px; padding: 7px 10px;
  font-size: 14px; margin: 0 8px 8px 4px; outline: none; }
body.light form input, body.light form select { background: #fff; color: #1e1e1e; border-color: #dcdcdc; }
form input:focus, form select:focus { border-color: #482dff; }
form input[type="checkbox"] { accent-color: #482dff; width: 16px; height: 16px; vertical-align: -3px; }
form button { background: #482dff; border-color: transparent; color: #fff !important;
  font-weight: 600; padding: 8px 22px; margin: 0 8px 8px 0; }
form button:hover { background: #5a41ff; }
#minos, #maxos { width: 4.5em; }
#search { min-width: 200px; }

#content { margin: 20px 0; }
#content h3 { text-align: center; }

/* ---------- The IPA ---------- */
h4 { margin: 0 0 8px; font-size: 15px; }
.entry { display: inline-block; vertical-align: top; margin: 6px;
  width: 372px; max-width: calc(100vw - 48px);
  background: #252526; border: 1px solid #444444; border-radius: 16px;
  padding: 6px 6px 10px; overflow: hidden; text-align: left; }
body.light .entry { background: #fff; border-color: #e8e8e8;
  box-shadow: 0 2px 10px rgba(20,20,60,.05); }
.entry:hover { border-color: #482dff; }
.entry > div { display: inline-block; margin: 8px 8px 0 0; vertical-align: top; }
.entry .info { max-width: 248px; color: #c9c9c9; font-size: 13.5px; }
body.light .entry .info { color: #3d3d3d; }
.entry .info div { margin: 2px 0; overflow-wrap: anywhere; }
.entry .info h4 { overflow-wrap: anywhere; }
.entry img { width: 74px; height: 74px; margin: 0 2px 2px 6px;
  border-radius: 17%; background: #1e1e1e; }
body.light .entry img { background: #f0f0f3; }
.entry button { display: block; width: 74px; margin: 0 auto; }

.single { display: block; width: initial; }
.randomAction { text-align: right; margin: 8px 20px; }
.randomAction button { margin-left: 8px; }
.itunes { max-width: 650px; margin: 40px auto; }
.carousel { display: block; overflow: auto; max-height: 350px; white-space: nowrap; }
.carousel img { max-height: 330px; margin: 8px; min-width: 100px; min-height: 100px; border-radius: 10px; }
.itunes p { white-space: pre-wrap; }
.no-itunes { color: #777; text-align: center; }

/* ---------- Phan trang ---------- */
.shortpage { text-align: center; margin: 26px 0; }
.shortpage > span { margin: 0 20px; color: #a3a3a3; }
body.light .shortpage > span { color: #696969; }
.shortpage > button { font-size: 1em; padding: 8px 22px; }
.shortpage > button:first-child { float: left; }
.shortpage > button:last-child { float: right; }
#pagination { text-align: center; margin-top: 10px; }
#pagination > a, #pagination > b { display: inline-block; padding: 5px 10px;
  margin: 2px; border-radius: 8px; border: 1px solid #444444;
  background: #252526; color: #c9c9c9; }
body.light #pagination > a, body.light #pagination > b { background: #fff; border-color: #e3e3e3; color: #3d3d3d; }
#pagination > b { background: #482dff; border-color: transparent; color: #fff; }
body.light #pagination > b { background: #482dff; border-color: transparent; color: #fff; }
#pagination > a:hover { border-color: #482dff; text-decoration: none; }

/* ---------- Footer (giong trang chinh) ---------- */
#footer { margin-top: 26px; border-top: 1px solid #444444; padding-top: 6px; }
body.light #footer { border-top-color: #e3e3e3; }
#about { background: #252526; border: 1px solid #444444; border-radius: 16px;
  padding: 16px; margin-top: 14px; }
body.light #about { background: #fff; border-color: #e8e8e8; }
#about h2 { margin: 0 0 8px; font-size: 17px; }
#about p { color: #c9c9c9; font-size: 14px; line-height: 1.5; }
body.light #about p { color: #3d3d3d; }
.mono { font-family: Menlo, Consolas, monospace; word-break: break-all; }
#footbar { text-align: center; color: #a3a3a3; font-size: 13px; padding: 14px 0 2px; }
body.light #footbar { color: #696969; }

/* ---------- Plist install (khong dung, giu tuong thich) ---------- */
#overlay { position: fixed; top: 0; left: 0; background: rgba(0,0,0,.6);
  min-width: 100%; min-height: 100%; }
#installMsg { margin: 40px auto; max-width: 600px; background: #252526;
  border-radius: 16px; padding: 20px 30px; }
body.light #installMsg { background: #fff; }

/* Kzlvn port: an nut Install (OTA plist server) va khoi bao iTunes */
.entry button { display: none !important; }
.no-itunes { display: none !important; }

/* ---------- Mobile (man hep, Safari doi cu) ---------- */
@media (max-width: 480px) {
  .entry { display: block; width: auto; margin: 8px 0; }
  .entry .info { max-width: none; }
  #search { min-width: 0; width: 120px; }
  #bundleid { width: 110px; }
  #header .logo { width: 64px; height: 64px; border-radius: 16px; }
  #header h1 { font-size: 23px; }
  .page-title { font-size: 21px; }
  .shortpage > button { padding: 8px 14px; }
}