:root{
	/* Blue ocean theme */
	--p:#2563eb;        /* primary */
	--p-700:#1d4ed8;    /* primary darker */
	--p-50:#eff6ff;     /* light tint */
	--s:#22c55e;        /* success */
	--d:#ef4444;        /* danger */
	--fg:#0f172a;       /* foreground */
	--muted:#64748b;    /* text subtle */
	--card:rgba(255,255,255,.82);
	--card-border:rgba(255,255,255,.55);
	--shadow:0 10px 30px rgba(37, 99, 235, .12), 0 6px 12px rgba(2,6,23,.08);
}

*{box-sizing:border-box}
/* Ensure hidden attribute always hides */
[hidden]{display:none !important}
html,body{height:100%}
body{
	font-family:'Be Vietnam Pro', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Segoe UI Emoji", sans-serif;
	font-size:16px; /* tăng nhẹ để dễ đọc */
	line-height:1.55;
	margin:0;
	color:var(--fg);
	overflow-x:hidden;
	background:
		radial-gradient(1200px 600px at -10% -10%, #dbeafe 0%, transparent 60%),
		radial-gradient(1200px 800px at 110% 10%, #bfdbfe 0%, transparent 55%),
		linear-gradient(180deg, #f8fbff 0%, #f3f7ff 100%);
}

.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* Top bar */
.top{
	position:sticky;top:0;z-index:10;
	background:linear-gradient(90deg,#0ea5e9 0%, var(--p) 50%, var(--p-700) 100%);
	color:#fff;
	box-shadow:0 8px 20px rgba(3,7,18,.25);
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{
	display:inline-flex;align-items:center;gap:10px;
	font-weight:800;font-size:16px;letter-spacing:.3px;
	color:#fff;text-decoration:none;margin-right:20px
}
.brand-logo{height:36px;width:auto;display:block}
nav a,.link{color:#eaf2ff;text-decoration:none;margin-right:14px;opacity:.9;transition:.2s ease}
nav a:hover,.link:hover{opacity:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
.link{background:none;border:none;cursor:pointer}

/* Desktop nav visible by default, mobile hamburger hidden */
.nav-desktop{display:flex;align-items:center}
.menu-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:8px;border-radius:8px}
.menu-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:transform .2s ease, opacity .2s ease;transform-origin:center}
/* When menu open, morph hamburger to X */
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile nav panel */
.nav-mobile{position:fixed;top:60px;left:0;right:0;background:#fff;border:1px solid var(--card-border);box-shadow:var(--shadow);border-radius:12px;margin:10px;display:flex;flex-direction:column;gap:10px;padding:12px;z-index:20}
.nav-mobile a,.nav-mobile .link{color:#0b1437;margin:0}
/* Backdrop mask for mobile menu */
#nav-mask{position:fixed;inset:0;background:transparent;z-index:5}

/* Force-hide mobile panel on desktop widths */
@media (min-width: 641px){
	.nav-mobile{display:none !important}
	#nav-mask{display:none !important}
}

/* Card (glass) */
.card{
	background:var(--card);
	border:1px solid var(--card-border);
	border-radius:14px;
	padding:20px;
	margin-top:18px;
	backdrop-filter:saturate(140%) blur(8px);
	-webkit-backdrop-filter:saturate(140%) blur(8px);
	box-shadow:var(--shadow);
}

/* Compact auth card */
.card.auth{max-width:560px;margin:28px auto;padding:18px}
@media (max-width: 640px){.card.auth{max-width:94%}}

h1,h2,h3{margin:0 0 12px;color:#0b1437}
/* Center page titles */
h2.page-title{text-align:center}

label{display:block;margin:10px 0 14px 2px;font-weight:600;color:#0b1437}
label>input, label>textarea{margin-top:6px}
input,textarea{
	width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:10px;
	background:#ffffff;outline:none;transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus{border-color:var(--p);box-shadow:0 0 0 4px var(--p-50)}
textarea{min-height:120px;resize:vertical}
/* Domain lists (DNS/Redirect/WP Reset): scroll like the result box, not resizable */
textarea[name="domains"]{
	height:240px;        /* fixed height to match .result area */
	max-height:240px;
	overflow:auto;       /* show scrollbars when content exceeds */
	resize:none;         /* disable drag-resize */
}

/* Inline label helpers (checkbox line) */
label.inline{display:flex;align-items:center;gap:10px;font-weight:500}
label.inline input[type="checkbox"]{width:auto;height:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:10px;border:none;cursor:pointer;font-weight:600;letter-spacing:.2px;transition:transform .05s ease, box-shadow .2s ease,opacity .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#fff;background:linear-gradient(180deg, var(--p) 0%, var(--p-700) 100%);box-shadow:0 8px 16px rgba(37,99,235,.25)}
.btn.primary:hover{box-shadow:0 10px 18px rgba(37,99,235,.35)}
.btn.success{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff}
.btn.danger{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff}

.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:1fr 1fr}
.grid-2{display:grid;grid-template-columns:1fr 340px;gap:18px}
.actions{margin-top:14px;display:flex;gap:10px;align-items:center}
.actions.between{justify-content:space-between}

/* Alerts */
.alert{padding:12px 14px;border-radius:12px;margin:14px 0;font-weight:600}
.alert.error{background:#fee2e2;border:1px solid #fecaca;color:#991b1b}
.alert.success{background:#dcfce7;border:1px solid #bbf7d0;color:#166534}

/* Result/log area */
.result{
	background:rgba(240,247,255,.75);
	border:1px dashed #93c5fd;border-radius:12px;padding:14px;min-height:240px;
	box-shadow:inset 0 1px 4px rgba(2,6,23,.05);
	/* Prevent long error lines from overflowing; wrap and allow scroll when long */
	white-space:pre-wrap; /* override <pre> default */
	word-break:break-word;
	overflow-wrap:anywhere;
	max-height:240px;
	overflow:auto;
}
.log-line{margin:2px 0;line-height:1.5;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
.log-line.success{color:#16a34a}
.log-line.error{color:#dc2626}
.log-line.info{color:var(--p)}

.mt{margin-top:14px}
.small{font-size:16px;color:var(--muted)}

/* Footer */
.footer{padding:24px 0;text-align:center;color:var(--muted)}

/* Tables (users) */
table{width:100%;border-collapse:separate;border-spacing:0 10px}
th,td{padding:10px 12px}
tbody tr{background:var(--card);border:1px solid var(--card-border)}
tbody tr{box-shadow:var(--shadow)}
th{font-size:16px;text-transform:uppercase;letter-spacing:.4px;color:#0b1437;text-align:left}

/* Make links inside cards/tables readable on light background */
.card a.link, tbody a.link, .table a.link, .card .link{color:var(--p); opacity:1}

/* Bảo đảm input/textarea/nút thừa kế 16px từ body */
input, textarea, .btn, nav a, label, h1, h2, h3, th, td { font-size:16px; }

/* Row actions (users table) */
.row-actions{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.row-actions form{display:flex;align-items:center;gap:12px;margin:0}
.row-actions form:first-child{flex:1;min-width:0}
/* Make the inline password/new-password input expand on desktop too */
.row-actions input{height:42px;flex:1;min-width:120px}
.row-actions .btn{width:88px}

/* Make action buttons consistent width (DNS/301) */
.actions .btn{min-width:120px;flex:1}
/* AAPanel: keep create button compact */
body.page-aapanel .actions .btn{flex:0 0 auto}
/* AAPanel: row look without shadows as requested */
body.page-aapanel tbody tr{box-shadow:none}
/* AAPanel: actions two blue buttons close together */
.aa-actions{display:inline-flex;gap:8px;flex-wrap:wrap}
.btn.sm{min-height:34px;padding:0 12px;font-size:14px;border-radius:8px}
/* IP vertical list styling */
.ip-list{list-style:none;margin:0;padding:0}
.ip-list li{margin:2px 0}

/* Responsive */
@media (max-width: 900px){
	.grid-2{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .actions.between{flex-wrap:wrap;gap:10px}
}

/* Mobile layout tweaks */
@media (max-width: 640px){
	/* Center brand and show hamburger; hide desktop nav */
	.top .wrap{justify-content:center}
	.brand{margin:0 auto}
	.nav-desktop{display:none}
	.menu-toggle{display:block;position:absolute;right:16px;top:10px}
	/* Bẻ bảng thành card cho đẹp trên mobile */
	table thead{display:none}
	table, tbody, tr, td{display:block;width:100%}
	tbody tr{padding:12px;border-radius:12px}
	/* Thứ tự: Username ở TRÊN (cột 1), sau đó khối hành động (cột 2) ở DƯỚI */
	tbody tr{display:flex;flex-direction:column}
	tbody tr td:nth-child(1){order:1}
	tbody tr td:nth-child(2){order:2}
	tbody tr + tr{margin-top:10px}
	td{padding:8px 0}
	td:first-child{font-weight:600;margin-bottom:6px}
	/* Hàng hành động: input + 2 nút trên 1 dòng, full width */
	/* Sắp xếp: dòng 1 = input (full width), dòng 2 = 2 nút ngang hàng */
	.row-actions{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px;align-items:center}
	/* Cho các form con tham gia grid */
	.row-actions form{display:contents}
	/* Input spans full width on mobile */
	.row-actions input{min-width:0;height:42px;grid-column:1/-1}
	/* Nút Đổi nằm trái, Xóa nằm phải */
	.row-actions .btn{width:100%}
	.row-actions .btn.primary{grid-column:1/2}
	.row-actions .btn.danger{grid-column:2/3}

  /* AAPanel: đảm bảo thứ tự các cột: URL -> Username -> Password -> IP -> Actions */
	body.page-aapanel tbody tr td:nth-child(1){order:1}
	body.page-aapanel tbody tr td:nth-child(2){order:2}
	body.page-aapanel tbody tr td:nth-child(3){order:3}
	body.page-aapanel tbody tr td:nth-child(4){order:4}
	body.page-aapanel tbody tr td:nth-child(5){order:5}
	/* Show labels before cell content on mobile */
	body.page-aapanel tbody td::before{content:attr(data-label);display:block;font-weight:700;color:#0b1437;margin-bottom:4px}
	/* Remove first-child bold rule impact */
	body.page-aapanel td:first-child{font-weight:inherit;margin-bottom:0}
	/* Make two buttons fill nicely if needed */
	body.page-aapanel .aa-actions{display:flex;gap:10px}
}

/* Users page: flatten cards (no shadows) */
body.page-users .card{box-shadow:var(--shadow)}
body.page-users tbody tr{box-shadow:none}
/* Users: smaller headings and mobile labels */
body.page-users th{font-size:14px}
@media (max-width: 640px){
	body.page-users tbody td::before{content:attr(data-label);display:block;font-weight:700;color:#0b1437;margin-bottom:4px;font-size:14px}
	body.page-users td:first-child{font-weight:inherit;margin-bottom:0}
	/* Hide the 'HÀNH ĐỘNG' cell entirely for superadmin rows */
	body.page-users tr.superadmin-row td.no-actions{display:none}
}
/* Users: show data-labels on mobile */
@media (max-width: 640px){
	body.page-users tbody td::before{content:attr(data-label);display:block;font-weight:700;color:#0b1437;margin-bottom:4px}
	body.page-users td:first-child{font-weight:inherit;margin-bottom:0}
}

/* Session expired overlay */
.session-expired-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.55);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(2px)}
.session-expired-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,0.2);padding:22px 20px;min-width:280px;max-width:360px;text-align:center}
.session-expired-card .title{font-weight:700;color:#0f172a;margin-bottom:6px}
.session-expired-card .desc{color:#475569;margin-bottom:14px}
.session-expired-card .actions{display:flex;gap:10px;justify-content:center}
.session-expired-card .btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none}
.session-expired-card .btn.primary{background:#2563eb;color:#fff}

/* Login expired inline banner */
.login-expired-banner{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;border-radius:10px;margin:12px auto;max-width:700px}

/* Login page button behavior */
/* Desktop: nút Đăng nhập chiếm ~80% phần còn lại để cân đối với ô 'Lưu đăng nhập' */
.card.auth .actions .btn{flex:0.8}
/* Mobile: không kéo giãn, chỉ giữ min-width 120px như yêu cầu */
@media (max-width: 640px){
	.card.auth .actions{flex-wrap:wrap;justify-content:flex-start}
  .card.auth .actions .btn{flex:0 0 auto;min-width:120px}
}

/* Center brand on PC for login page; hide menus */
body.page-login .top .wrap{justify-content:center}
body.page-login .brand{margin:0 auto}
body.page-login .nav-desktop,
body.page-login #menu-toggle,
body.page-login #nav-mask,
body.page-login #nav-mobile{display:none !important}

/* Modal (overlay) */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:9998;padding:16px;backdrop-filter:blur(2px)}
.modal-card{position:relative;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.2);padding:18px 20px;width:min(860px,96vw);max-width:860px}
.modal-title{font-weight:700;color:#0f172a;margin:0 0 12px}
.modal-close{position:absolute;top:10px;right:12px;border:none;background:#eef2ff;color:#334155;border-radius:10px;width:32px;height:32px;font-size:18px;cursor:pointer}
.modal-close:hover{background:#e0e7ff}

/* AApanel modal: compact two-column rows for Port/Token and Username/Password */
.modal-card .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0}
.modal-card .row-2 .field{margin:0}
.modal-card .field{margin:10px 0}
.modal-card textarea#aa-ips{min-height:84px}

/* Segmented control for Redirect mode */
/* Redirect segmented control — polished */
.mode-group{background:transparent;border:0;padding:6px 0 0;margin-bottom:12px}
.mode-group .mode-label{font-weight:800;color:#0b1437;margin-bottom:8px}
.seg{display:flex;gap:6px;width:100%;max-width:520px;background:#eef2ff;border:1px solid #dbeafe;padding:4px;border-radius:12px}
.seg-item{flex:1;display:flex;align-items:center}
.seg-item input{display:none}
.seg-item span{display:block;width:100%;text-align:center;padding:10px 14px;border-radius:10px;font-weight:700;color:#0b1437;background:#fff;transition:all .15s ease}
.seg-item span:hover{background:#f2f6ff}
.seg-item input:checked + span{background:linear-gradient(180deg, var(--p) 0%, var(--p-700) 100%);color:#fff;box-shadow:0 8px 16px rgba(37,99,235,.22)}
@media (max-width:640px){.mode-group{padding-top:4px}.seg{max-width:none}.seg-item span{padding:10px 12px;font-weight:600}}