/* maxmin.vn: trang tai lieu cho nha phat trien. Uu tien dien thoai 390, dep o 2560 (co chu tang theo man hinh).
   Khong dung he .ah-* cua alodev. Mau dat bien o :root, co che do toi. */
:root {
  --nen: #ffffff;
  --nen-2: #f5f7f8;
  --nen-3: #eef1f3;
  --chu: #111827;
  --chu-2: #4b5563;
  --vien: #e2e6ea;
  --nhan: #0d7a5f;
  --nhan-dam: #0a5f4a;
  --nhan-nhat: #e3f3ee;
  --canh: #9a5b00;
  --canh-nen: #fff4e0;
  --ma-nen: #0f1720;
  --ma-chu: #e5edf3;
  --ma-mo: #93a4b3;
  --post: #0d7a5f;
  --get: #2457c5;
  --bo: 10px;
  --khung: 76rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0c1116; --nen-2: #121920; --nen-3: #18212a; --chu: #e8edf2; --chu-2: #a3b0bd; --vien: #243039;
    --nhan: #34c79b; --nhan-dam: #5ad8b2; --nhan-nhat: #0f2a23; --canh: #f0b45a; --canh-nen: #2a1f0e;
    --ma-nen: #070b0f; --post: #34c79b; --get: #7aa2ff; color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (min-width: 1024px) { html { font-size: 17px; } }
@media (min-width: 1800px) { html { font-size: 19px; } }
@media (min-width: 2300px) { html { font-size: 21px; } }
body { margin: 0; background: var(--nen); color: var(--chu); font: 400 1rem/1.6 var(--font); overflow-x: hidden; }
a { color: var(--nhan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--nhan-dam); }
h1, h2, h3, h4 { line-height: 1.25; margin: 1.6em 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 5.2vw, 2.6rem); margin-top: .6em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: .95rem; color: var(--chu-2); text-transform: uppercase; letter-spacing: .04em; }
p { margin: .6em 0; }
code, pre, kbd { font-family: var(--mono); font-size: .88em; }
:not(pre) > code { background: var(--nen-3); padding: .1em .35em; border-radius: 5px; overflow-wrap: anywhere; }
pre { margin: 0; overflow-x: auto; }
.mo { color: var(--chu-2); font-size: .92em; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bo-qua { position: absolute; left: -999px; top: 0; background: var(--nhan); color: #fff; padding: .5rem 1rem; z-index: 99; }
.bo-qua:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; }

.khung { width: 100%; max-width: var(--khung); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .khung { padding: 0 28px; } }
main.khung { padding-bottom: 4rem; min-height: 60vh; }

/* dau trang */
.dau { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--nen) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--vien); }
.dau-trong { display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--chu); text-decoration: none; font-weight: 750; letter-spacing: .06em; }
.logo svg { width: 1.7rem; height: 1.7rem; flex: none; }
.nut-menu { margin-left: auto; width: 2.75rem; height: 2.75rem; border: 1px solid var(--vien); border-radius: 9px; background: var(--nen); display: grid; place-items: center; cursor: pointer; transition: transform .12s; }
.nut-menu:active { transform: scale(.95); }
.vach, .vach::before, .vach::after { display: block; width: 18px; height: 2px; background: var(--chu); border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
.vach::before, .vach::after { content: ""; position: absolute; left: 0; }
.vach::before { top: -6px; } .vach::after { top: 6px; }
.nut-menu[aria-expanded="true"] .vach { background: transparent; }
.nut-menu[aria-expanded="true"] .vach::before { transform: translateY(6px) rotate(45deg); }
.nut-menu[aria-expanded="true"] .vach::after { transform: translateY(-6px) rotate(-45deg); }
.menu { display: none; width: 100%; flex-direction: column; padding: .25rem 0 1rem; }
.menu.mo-ra { display: flex; }
.menu a { color: var(--chu); text-decoration: none; padding: .7rem .25rem; border-bottom: 1px solid var(--vien); }
.menu a[aria-current="page"] { color: var(--nhan); font-weight: 650; }
.menu a.ngu { color: var(--chu-2); }
.menu .nut { margin-top: .8rem; text-align: center; border-bottom: 0; }
@media (min-width: 1100px) {
  .dau-trong { flex-wrap: nowrap; }
  .nut-menu { display: none; }
  .menu { display: flex; flex-direction: row; align-items: center; width: auto; margin-left: auto; padding: 0; gap: .15rem; }
  .menu a { border: 0; padding: .45rem .7rem; border-radius: 8px; font-size: .93rem; transition: background .15s; }
  .menu a:hover { background: var(--nen-3); }
  .menu a[aria-current="page"] { background: var(--nhan-nhat); }
  .menu .nut { margin: 0 0 0 .5rem; }
}

/* nut */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .55rem 1.15rem; border-radius: 9px; border: 1px solid var(--nhan); background: var(--nhan); color: #fff; font: 600 .95rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: transform .12s, background .15s; }
.nut:hover { background: var(--nhan-dam); color: #fff; }
.nut:active { transform: translateY(1px); }
.nut.phu { background: transparent; color: var(--nhan); }
.nut.phu:hover { background: var(--nhan-nhat); }
.nut.nho { min-height: 2.4rem; padding: .4rem .9rem; font-size: .88rem; }
@media (prefers-color-scheme: dark) { .nut, .nut:hover { color: #04130e; } .nut.phu { color: var(--nhan); } }
.hang-nut { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .6rem; }

/* trang chu */
.hero { display: grid; gap: 1.8rem; padding: 2rem 0 1rem; }
.nhan-nho { display: inline-block; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--nhan); margin: 0 0 .3rem; }
.hero h1 { margin: .2rem 0 .6rem; max-width: 22ch; }
.dan { font-size: 1.08rem; color: var(--chu-2); max-width: 62ch; }
.hero-ma { display: grid; gap: .8rem; min-width: 0; }
@media (min-width: 1024px) { .hero { grid-template-columns: 1.05fr 1fr; align-items: center; padding: 3.5rem 0 2rem; } }
.the-ma { background: var(--ma-nen); color: var(--ma-chu); border-radius: var(--bo); overflow: hidden; margin: .8rem 0; min-width: 0; }
.the-ma-dau { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; border-bottom: 1px solid #ffffff14; font-size: .8rem; color: var(--ma-mo); }
.the-ma-dau span { margin-right: auto; }
.the-ma pre { padding: .85rem 1rem; }
.the-ma code { font-size: .82rem; line-height: 1.55; }
.chep, .thu-ngay { background: #ffffff12; color: var(--ma-chu); border: 1px solid #ffffff22; border-radius: 6px; padding: .25rem .6rem; font: 500 .75rem var(--font); cursor: pointer; text-decoration: none; min-height: 1.9rem; display: inline-flex; align-items: center; }
.chep:hover, .thu-ngay:hover { background: #ffffff22; color: #fff; }
.muc { padding: 1rem 0; }
.luoi-4, .luoi-3, .luoi-2 { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .luoi-4, .luoi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .luoi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .luoi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.the { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem; border: 1px solid var(--vien); border-radius: var(--bo); text-decoration: none; color: var(--chu); background: var(--nen); transition: border-color .15s, transform .15s; }
.the:hover { border-color: var(--nhan); transform: translateY(-2px); color: var(--chu); }
.the strong { font-size: 1.05rem; }
.the span { color: var(--chu-2); font-size: .92rem; }
.o { border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.1rem 1.2rem; background: var(--nen-2); min-width: 0; }
.o h3 { margin-top: .1rem; }
.keu-goi { border-top: 1px solid var(--vien); margin-top: 1.5rem; }
.buoc { padding-left: 1.3rem; } .buoc li { margin: .5rem 0; }

/* trang tai lieu */
.hep { max-width: 50rem; }
.hep-rong { max-width: 76rem; }
.tai-lieu { display: block; }
.toc { border-bottom: 1px solid var(--vien); padding: .8rem 0; margin-bottom: .5rem; }
.toc nav { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem; }
.toc a { white-space: nowrap; font-size: .85rem; text-decoration: none; color: var(--chu); border: 1px solid var(--vien); border-radius: 999px; padding: .3rem .7rem; display: inline-flex; gap: .35rem; align-items: center; }
.toc a:hover { border-color: var(--nhan); }
.toc-nhom { display: none; }
@media (min-width: 1100px) {
  .tai-lieu { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; }
  .toc { border: 0; position: sticky; top: 4.5rem; align-self: start; max-height: calc(100vh - 5.5rem); overflow-y: auto; padding: 1.5rem 0; }
  .toc nav { flex-direction: column; overflow: visible; gap: .1rem; }
  .toc a { border: 0; border-radius: 7px; padding: .35rem .5rem; white-space: normal; }
  .toc a:hover { background: var(--nen-3); }
  .toc-nhom { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--chu-2); margin: 1rem .5rem .3rem; }
}
.noi-dung-doc { min-width: 0; max-width: 58rem; }
.diem { border-top: 1px solid var(--vien); padding-top: .4rem; margin-top: 2rem; }
.diem h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.15rem; }
.diem h3 code { background: none; padding: 0; overflow-wrap: anywhere; }
.phuong-thuc { font: 700 .68rem var(--mono); letter-spacing: .04em; padding: .18rem .42rem; border-radius: 5px; color: #fff; background: var(--post); }
.phuong-thuc.get { background: var(--get); }
@media (prefers-color-scheme: dark) { .phuong-thuc { color: #04130e; } }
.bat { font-size: .72rem; color: var(--canh); font-weight: 600; }
.kieu { font-size: .8rem; }
details { margin: .8rem 0; }
summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
summary:hover { color: var(--nhan); }

/* bang */
.cuon { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .6rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--vien); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-2); background: var(--nen-2); white-space: nowrap; }
td code { overflow-wrap: anywhere; }
table.nho { font-size: .84rem; margin: 0; } table.nho th, table.nho td { padding: .3rem .5rem; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; margin: .3rem 0; }
dl.kv dt { color: var(--chu-2); font-family: var(--mono); font-size: .85rem; }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* tham so, thay doi */
.tham-so { border-top: 1px solid var(--vien); padding: .3rem 0 .2rem; }
.tham-so h3 { font-size: 1.05rem; } .tham-so h3 code { font-size: .75rem; font-weight: 400; }
.hien-hanh { background: var(--nhan-nhat); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; font-weight: 600; overflow-x: auto; }
.hien-hanh .nhan-nho { display: block; }
.canh { display: inline-block; font-size: .72rem; font-weight: 650; color: var(--canh); background: var(--canh-nen); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }
.sap { color: var(--canh); font-size: .9rem; }
.van-ban li { margin: .35rem 0; }
.nhat-ky { list-style: none; padding: 0; }
.nhat-ky li { display: grid; grid-template-columns: 6.2rem 1fr; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--vien); }
.nhat-ky time { font-family: var(--mono); font-size: .85rem; color: var(--chu-2); padding-top: .1rem; }
.nhat-ky li > div { min-width: 0; overflow-wrap: anywhere; }
.nhat-ky .mo { display: block; }
.nhat-ky li.sap time { color: var(--canh); }
@media (max-width: 480px) { .nhat-ky li { grid-template-columns: 1fr; gap: .2rem; } }

/* ca kiem */
.ds-ca details { border: 1px solid var(--vien); border-radius: 8px; padding: .35rem .8rem; margin: .45rem 0; background: var(--nen); }
.ds-ca summary { font-weight: 500; font-size: .92rem; overflow-wrap: anywhere; }
.ca-trong { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .ca-trong { grid-template-columns: 1fr 1fr; } }
.ca-trong pre { background: var(--nen-3); border-radius: 7px; padding: .6rem; font-size: .8rem; max-height: 22rem; }

/* san thu, form */
.san-thu { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .san-thu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
label { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .3rem; }
input, select, textarea { width: 100%; font: 400 1rem var(--font); color: var(--chu); background: var(--nen); border: 1px solid var(--vien); border-radius: 8px; padding: .6rem .7rem; min-height: 2.75rem; }
textarea { font-family: var(--mono); font-size: .88rem; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--nhan); outline-offset: 0; border-color: var(--nhan); }
.form .nut { margin-top: 1.1rem; width: 100%; }
@media (min-width: 600px) { .form .nut { width: auto; } }
#thu-kq pre#thu-json { background: var(--nen-3); border-radius: 8px; padding: .8rem; max-height: 34rem; font-size: .82rem; margin: .6rem 0; }
.kq-dau { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; }
.kq-ok { color: var(--nhan); font-weight: 650; } .kq-loi { color: #c0392b; font-weight: 650; }
.giai-trinh { margin: .6rem 0; padding-left: 1.2rem; font-size: .92rem; } .giai-trinh li { margin: .3rem 0; overflow-wrap: anywhere; }
.cong-cu { border-top: 1px solid var(--vien); padding: .6rem 0; } .cong-cu:first-child { border-top: 0; }
.cong-cu code { font-weight: 650; }

/* chan trang */
.chan { border-top: 1px solid var(--vien); background: var(--nen-2); padding: 2rem 0 1rem; font-size: .92rem; }
.chan-trong { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 800px) { .chan-trong { grid-template-columns: 2fr 1fr 1fr; } }
.chan p { color: var(--chu-2); max-width: 40ch; }
.cot-link { display: flex; flex-direction: column; gap: .4rem; }
.cot-link a { color: var(--chu); text-decoration: none; } .cot-link a:hover { color: var(--nhan); }
.ban-quyen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; border-top: 1px solid var(--vien); margin-top: 1.5rem; padding-top: 1rem; }
.ban-quyen a { font-weight: 650; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }