[hidden] { display: none !important; }
:root {
  --nen: #f6f7fb; --the: #ffffff; --chu: #1f2937; --nhat: #6b7280; --vien: #e5e7eb;
  --chinh: #c2410c; --chinh-dam: #9a3412; --tot: #047857; --loi: #b91c1c; --canh: #92400e;
  --bo: 12px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--nen); color: var(--chu); font-size: 16px; line-height: 1.55; }
main { max-width: 1100px; margin: 0 auto; padding: 20px 16px 80px; }
h1 { font-size: 1.6rem; margin: .4em 0; } h2 { font-size: 1.2rem; margin: 1em 0 .5em; } h3 { font-size: 1.02rem; margin: 0 0 .25em; }
a { color: var(--chinh-dam); }
.nhat { color: var(--nhat); }
header#dau-trang { background: var(--the); border-bottom: 1px solid var(--vien); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; }
header .logo { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--chu); }
header nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
header nav a { text-decoration: none; font-weight: 600; }
.chao { color: var(--nhat); }

.nut, .nut-phu { display: inline-block; border-radius: 10px; padding: 10px 18px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; border: 2px solid var(--chinh); }
.nut { background: var(--chinh); color: #fff; }
.nut:hover { background: var(--chinh-dam); }
.nut:disabled { background: #d1d5db; border-color: #d1d5db; color: #6b7280; cursor: not-allowed; }
.nut-phu { background: #fff; color: var(--chinh-dam); }
.nho { padding: 5px 10px; font-size: .9rem; }
.nut-chu { background: none; border: none; color: var(--chinh-dam); cursor: pointer; font-weight: 600; font-size: .95rem; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.hang-nut.nho { margin-top: 6px; }

.trang-hep { max-width: 520px; margin: 20px auto; }
.the-form { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.o-nhap label { display: block; font-weight: 600; margin-bottom: 4px; }
.o-nhap input, select, textarea { width: 100%; padding: 10px 12px; font-size: 1rem; border: 2px solid var(--vien); border-radius: 10px; font-family: inherit; background: #fff; }
.o-nhap input:focus, textarea:focus, select:focus, .o-tim:focus { outline: none; border-color: var(--chinh); }
input.sai { border-color: var(--loi); }
.bao-loi { color: var(--loi); font-size: .92rem; min-height: 1.2em; margin-top: 3px; }
.bao-loi.tot { color: var(--tot); }
.hien-mk { display: inline-flex; gap: 6px; align-items: center; font-weight: 400 !important; font-size: .9rem; color: var(--nhat); margin-top: 4px; }
.hien-mk input { width: auto; }
.thong-bao { border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.thong-bao.loi { background: #fef2f2; border: 1px solid #fecaca; color: var(--loi); }
.thong-bao.tot { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--tot); }
.thong-bao.canh { background: #fffbeb; border: 1px solid #fde68a; color: var(--canh); }
.thong-bao .goc { margin-top: 6px; font-size: .85rem; color: #7f1d1d; font-family: Consolas, monospace; word-break: break-word; }
.tien-do { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.tien-do span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--vien); font-weight: 700; }
.tien-do span.dang { background: var(--chinh); color: #fff; }
.tien-do i { flex: 0 0 40px; height: 3px; background: var(--vien); }

.huong-dan { background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--bo); padding: 12px 16px; margin-bottom: 16px; }
.huong-dan.gon { background: none; border: none; padding: 0; text-align: right; }
.hd-dau { display: flex; justify-content: space-between; align-items: center; }
.hd-dau h2 { margin: 0; font-size: 1.05rem; }
.cac-buoc { list-style: none; padding: 0; margin: 10px 0 4px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cac-buoc li { display: flex; gap: 10px; background: #fff; border-radius: 10px; padding: 10px; border: 2px solid transparent; opacity: .75; }
.cac-buoc li.dang { border-color: var(--chinh); opacity: 1; }
.cac-buoc li.xong { opacity: .9; }
.cac-buoc .so { flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--vien); display: grid; place-items: center; font-weight: 700; }
.cac-buoc li.dang .so { background: var(--chinh); color: #fff; }
.cac-buoc li.xong .so { background: var(--tot); color: #fff; }
.cac-buoc .mo-ta { font-size: .9rem; color: var(--nhat); }
.dang-o { font-size: .85rem; color: var(--canh); }

.hang-tieu-de { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nhan-tim { display: block; font-weight: 600; margin: 8px 0 4px; }
.o-tim { width: 100%; padding: 12px 14px; font-size: 1.05rem; border: 2px solid var(--vien); border-radius: 12px; margin-bottom: 16px; }
.luoi-pb { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.the-pb { background: var(--the); border: 1px solid var(--vien); border-left: 6px solid var(--mau, #888); border-radius: var(--bo); padding: 14px; text-decoration: none; color: var(--chu); transition: transform .1s; }
.the-pb:hover, .the-agent:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.the-pb .dem { color: var(--nhat); font-size: .9rem; }
.tieu-de-pb { border-left: 6px solid var(--mau, #888); padding-left: 10px; }
.luoi-agent { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.the-agent { display: flex; gap: 12px; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px; text-decoration: none; color: var(--chu); transition: transform .1s; }
.the-agent .emoji { font-size: 2rem; line-height: 1; }
.the-agent .mo-ta { margin: 0; color: var(--nhat); font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quay-lai { display: inline-block; margin: 4px 0 8px; text-decoration: none; font-weight: 600; }

.gioi-thieu { display: flex; gap: 16px; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px; }
.emoji.lon { font-size: 3rem; line-height: 1; }
.gioi-thieu h1 { margin-top: 0; }
.phong-cach { font-style: italic; }
.khung-chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.tin { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px 16px; }
.tin.user { background: #eef2ff; border-color: #c7d2fe; white-space: pre-wrap; }
.ai-noi { font-weight: 700; font-size: .9rem; color: var(--nhat); margin-bottom: 4px; white-space: normal; }
.than-tin { overflow-wrap: anywhere; }
.than-tin table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; }
.than-tin th, .than-tin td { border: 1px solid var(--vien); padding: 6px 10px; }
.than-tin pre { background: #111827; color: #f9fafb; padding: 12px; border-radius: 8px; overflow-x: auto; }
.than-tin code { font-family: Consolas, monospace; font-size: .92em; }
.than-tin :not(pre) > code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; }
.than-tin blockquote { border-left: 4px solid var(--vien); margin: 0; padding-left: 12px; color: var(--nhat); }
.dang-lam { color: var(--canh); font-size: .92rem; display: flex; align-items: center; gap: 6px; }
.cham { width: 10px; height: 10px; border-radius: 50%; background: var(--chinh); animation: nhap 1s infinite; }
@keyframes nhap { 50% { opacity: .2; } }
.cau-mau { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.chip { background: #fff; border: 1px solid #fdba74; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: .9rem; text-align: left; font-family: inherit; }
.chip:hover { background: #fff7ed; }
.form-viec { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px; }
.form-viec textarea { margin-top: 6px; resize: vertical; }
.hang-duoi { display: flex; justify-content: space-between; font-size: .85rem; color: var(--nhat); flex-wrap: wrap; gap: 6px; }

.ds-lich-su { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ds-lich-su a { display: flex; gap: 12px; align-items: center; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px; text-decoration: none; color: var(--chu); }
.ds-lich-su .emoji { font-size: 1.6rem; }
.muc { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px; margin-bottom: 16px; }
.muc .the-form { border: none; padding: 0; }
.muc form.hang-nut select { width: auto; min-width: 280px; }
.muc summary { cursor: pointer; font-weight: 600; color: var(--chinh-dam); }
.cuon-ngang { overflow-x: auto; }
.bang { border-collapse: collapse; width: 100%; font-size: .92rem; }
.bang th, .bang td { border-bottom: 1px solid var(--vien); padding: 8px; text-align: left; vertical-align: top; }
.bang th { background: #f9fafb; }
.bang td.so { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .gioi-thieu { flex-direction: column; } h1 { font-size: 1.35rem; } }

.chon-kieu { border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 14px; margin: 0 0 12px; background: var(--the); }
.chon-kieu legend { font-weight: 700; padding: 0 6px; }
.lua-chon, .cong-tac { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.lua-chon input, .cong-tac input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; }
.lua-chon .mo-ta, .cong-tac .mo-ta { display: block; color: var(--nhat); font-size: .9rem; }
.ds-model { margin-top: -6px; }
.dong-ket-noi { font-size: .92rem; color: var(--nhat); margin: 8px 0 0; }
.ds-buoc { margin: 6px 0 0; padding-left: 22px; }
.ds-buoc li { margin: 4px 0; }
.trang-vua { max-width: 720px; margin: 0 auto; }

/* ---- Vòng sửa 1 ---- */
.thong-bao.tin { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.nho-chu { font-size: .9rem; }
header nav a.nho-chu { font-weight: 400; }
.the-agent.hop-nhat { border: 2px solid var(--chinh); }
.nhan-hop { display: inline-block; background: var(--chinh); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; }
.ds-duyet { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.ds-duyet code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.nut-phu.nguy-hiem { border-color: var(--loi); color: var(--loi); }
tr.bi-khoa td { background: #f9fafb; color: var(--nhat); }
.muc h3 { margin-top: 1.2em; }
.muc.nho-chu summary, details.huong-dan summary { cursor: pointer; }
.chi-dien-thoai { display: none; }
.bang { min-width: 640px; }
.dang-tai { width: 28px; height: 28px; border: 4px solid var(--vien); border-top-color: var(--chinh); border-radius: 50%; animation: quay 1s linear infinite; margin: 40px auto; }
@keyframes quay { to { transform: rotate(360deg); } }
@media (max-width: 700px), (pointer: coarse) {
  .chi-may-tinh { display: none; }
}
@media (max-width: 700px) {
  .chi-dien-thoai { display: block; }
  /* Hướng dẫn 3 bước gọn: chỉ bước đang làm mới hiện lời giải thích */
  .cac-buoc { grid-template-columns: 1fr; gap: 6px; }
  .cac-buoc li { padding: 6px 8px; }
  .cac-buoc li:not(.dang) .mo-ta { display: none; }
  .huong-dan { padding: 8px 10px; }
  .dang-o { display: none; }
  header#dau-trang { position: static; }
  .hang-nut.nho { gap: 6px; }
}

/* ---- Vòng 2 ---- */
.ngan-nhom { margin: 22px 0 10px; padding: 8px 12px; border-top: 2px dashed var(--vien); border-radius: 0; color: var(--chu); }
.nhan-tq { display: inline-block; font-size: .75rem; background: #f3f4f6; color: var(--nhat); border-radius: 999px; padding: 0 8px; margin-bottom: 3px; }
.ds-lich-su li { display: flex; gap: 8px; align-items: center; }
.ds-lich-su li a { flex: 1; min-width: 0; }
.o-so { width: 90px; padding: 6px 8px; font-size: 1rem; border: 2px solid var(--vien); border-radius: 8px; }