/* ==========================================================================
   TRANG DANG KY CONG TAC VIEN  /dang-ky.html                  02/09/2026
   ==========================================================================
   Do tren 1366px truoc khi sua:
     - KHONG CO <h1> nao. Mo trang ra la mot loat o nhap, khong biet dang
       dien don gi, dien xong duoc gi.
     - Cac o nhap la <input> tran: vien 1px xam mac dinh cua trinh duyet,
       khong bo goc, khong co dau hieu nao khi dang go (focus).
     - Nhan chu nam trong the <p> o mot cot Bootstrap rieng, con o nhap o
       cot khac - hai ben khong thang hang, va tren dien thoai thi nhan
       nam mot dong, o nhap mot dong, don dai gap doi.
     - Nut gui la <input class="big"> mau mac dinh, 161x40, lot thom giua
       trang trang.

   Ban nay: mot the don co dau trang den-vang, cac muc chia phan ro rang, o
   nhap cao 44px co bo goc va vong sang khi go, nut gui to va noi bat.
   ========================================================================== */

/* ---- Dau trang ---------------------------------------------------------- */
.dk-dau {
	margin: 0 0 18px;
	padding: 20px;
	border-radius: 14px;
	background: #111;
	background-image: radial-gradient(circle at 100% 0, rgba(255, 217, 0, .22), transparent 55%);
	color: #d8d8d8;
}

.dk-tieu-de {
	margin: 0 0 8px;
	padding: 0;
	font-size: 25px;
	line-height: 1.25;
	color: #fff;
}

.dk-tieu-de i { margin-right: 9px; color: #ffd900; }
.dk-mo-ta { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: #c9c9c9; }
.dk-mo-ta b { color: #ffd900; }

/* Ba diem moc "dien - gui - duoc goi lai": cho biet don nay ngan va sau khi
   gui thi chuyen gi xay ra. */
.dk-buoc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.dk-buoc li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: #bdbdbd;
}

.dk-buoc li span {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffd900;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* ---- Tieu de tung phan ------------------------------------------------- */
.dk-form .sidebar-box-heading {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px 10px 0 0;
	background: #111;
}

/* "position: static" bat buoc phai co: luat cu trong css/ke-thua/style.css
   dat ".sidebar-box-heading .icons { position: absolute; ... }" - mot the
   duoc dinh vi tuyet doi thi KHONG con la muc flex nua, no bi keo ra khoi
   luong va nam DE LEN chu tieu de (do that 02/09/2026: icon o x=36 trong khi
   chu bat dau o x=23). Tra ve static thi no lai la muc flex binh thuong, nam
   truoc chu va cach mot khoang "gap". */
.dk-form .sidebar-box-heading i {
	position: static;
	flex: 0 0 auto;
	top: auto;
	left: auto;
	margin: 0;
	color: #ffd900;
	font-size: 15px;
	line-height: 1;
}

.dk-form .sidebar-box-heading h4 { flex: 1 1 auto; min-width: 0; }

.dk-form .sidebar-box-heading h4 {
	margin: 0;
	padding: 0;
	border: 0;
	color: #ffd900;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* ---- Khung noi dung tung phan ------------------------------------------ */
.dk-form .register-account {
	margin-bottom: 16px;
	padding: 0;
}

.dk-form .register-account .page-content {
	padding: 14px;
	border: 1px solid #ececec;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	background: #fff;
}

/* ---- Nhan chu ---------------------------------------------------------- */
.dk-form .register-account p {
	margin: 0 0 4px;
	padding-top: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}

.dk-form .register-account .require,
.dk-form .register-account .red { color: #d70018; }

/* ---- O nhap ------------------------------------------------------------
   Bam theo ".no-iconic-input" - the boc ma ban goc dat quanh moi o. */
.dk-form .no-iconic-input { margin-bottom: 10px; }

.dk-form .no-iconic-input input[type="text"],
.dk-form .no-iconic-input input[type="password"],
.dk-form .no-iconic-input input[type="email"],
.dk-form .no-iconic-input input[type="tel"],
.dk-form .no-iconic-input input[type="number"],
.dk-form .no-iconic-input select,
.dk-form .no-iconic-input textarea,
.dk-form .dk-ma-cum input {
	display: block;
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid #ddd;
	border-radius: 9px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #111;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dk-form .no-iconic-input textarea {
	height: auto;
	min-height: 104px;
	padding: 11px 13px;
	line-height: 1.5;
	resize: vertical;
}

.dk-form .no-iconic-input select {
	padding-right: 34px;
	cursor: pointer;
	/* Mui ten rieng: <select> mac dinh cua tung he dieu hanh mot kieu, ve
	   lai bang anh nen SVG cho ba he giong nhau. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 11px 7px;
}

.dk-form .no-iconic-input input:focus,
.dk-form .no-iconic-input select:focus,
.dk-form .no-iconic-input textarea:focus,
.dk-form .dk-ma-cum input:focus {
	outline: none;
	border-color: #111;
	box-shadow: 0 0 0 3px rgba(255, 217, 0, .42);
}

.dk-form .no-iconic-input input::placeholder,
.dk-form .no-iconic-input textarea::placeholder { color: #a5a5a5; }

/* O chon tep (anh dai dien): <input type=file> khong to mau duoc, chi can
   cho no khoang tho va mot cai vien cho dong bo voi cac o khac. */
.dk-form input[type="file"] {
	width: 100%;
	padding: 10px;
	border: 1px dashed #ddd;
	border-radius: 9px;
	background: #fafafa;
	font-size: 13px;
	box-sizing: border-box;
}

/* ---- Ma xac nhan -------------------------------------------------------- */
.dk-ma-hang { margin: 4px 0 14px; }

.dk-ma-nhan {
	display: block;
	margin-bottom: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: #333;
}

.dk-ma-nhan b { color: #d70018; }

.dk-ma-cum { display: flex; align-items: center; gap: 10px; }

/* Ma la 4 chu so nen o nhap chi can du 4 ky tu - chu to, thua nhau, can
   giua cho de doi chieu voi anh ben canh. */
.dk-ma-cum input {
	flex: 0 0 108px;
	width: 108px;
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 5px;
	padding-left: 8px;
	padding-right: 8px;
}

.dk-ma-anh {
	flex: 0 0 auto;
	display: block;
	height: 44px;
	border: 1px solid #ddd;
	border-radius: 9px;
	background: #fff;
}

.dk-ma-lai {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid #ddd;
	border-radius: 9px;
	background: #fff;
	color: #555;
	cursor: pointer;
}

.dk-ma-lai:hover { border-color: #111; background: #fff8db; color: #111; }

/* ---- Nut gui ------------------------------------------------------------ */
.dk-gui { margin-top: 6px; }

.dk-gui input[type="submit"],
.dk-form input.big {
	width: auto;
	min-width: 220px;
	height: 50px;
	padding: 0 34px;
	border: 0;
	border-radius: 25px;
	background: #111;
	color: #ffd900;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

.dk-gui input[type="submit"]:hover,
.dk-form input.big:hover { background: #000; }

.dk-cam-ket {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #777;
	line-height: 1.5;
}

.dk-cam-ket i { margin-right: 5px; color: #1aa34a; }

/* ==========================================================================
   MAN HINH HEP
   ========================================================================== */
@media (max-width: 767px) {
	.dk-dau { padding: 16px 14px; border-radius: 12px; }
	.dk-tieu-de { font-size: 20px; }
	.dk-tieu-de i { margin-right: 7px; }
	.dk-mo-ta { font-size: 13px; }
	.dk-buoc { gap: 6px 14px; }
	.dk-buoc li { font-size: 12px; }

	.dk-form .register-account .page-content { padding: 12px; }

	/* Nhan chu tren, o nhap ngay duoi - bo phan dem tren cua nhan de hai
	   thu dinh nhau thanh mot cap, khong troi lo lung. */
	.dk-form .register-account p { padding-top: 4px; margin-bottom: 3px; }

	/* Cot Bootstrap tren dien thoai da la 100% - chi can bo khoang dem
	   thua de o nhap chay het be ngang. */
	.dk-form .register-account [class*="col-"] { padding-left: 0; padding-right: 0; }
	.dk-form .register-account .padding-add { padding-left: 0; padding-right: 0; }

	.dk-ma-cum { flex-wrap: wrap; }
	.dk-ma-cum input { flex: 0 0 100px; width: 100px; }

	.dk-gui input[type="submit"],
	.dk-form input.big { width: 100%; min-width: 0; }
}