/* ===== Ô nhập trong các khối .blk — dùng chung cho mọi giao diện =====
   Trang Đăng nhập / Đăng ký bọc form trong .blk, nhưng CSS của từng mẫu chỉ
   tạo kiểu cho ô nhập theo lớp riêng của mẫu (.lg, .cko, .ckform…). Kết quả:
   ô nhập ở hai trang này rơi về kiểu mặc định của trình duyệt — nhỏ xíu, nằm
   cạnh nhau. Đặt kiểu ở đây một lần cho cả 16 mẫu, dùng currentColor nên vẫn
   ăn theo màu chữ của từng mẫu. */

.blk input,
.blk select,
.blk textarea{
  display:block; width:100%; box-sizing:border-box;
  border:1px solid rgba(0,0,0,.16); border-radius:9px;
  padding:12px 14px; margin-bottom:12px;
  font:inherit; font-size:14px; line-height:1.4;
  background:#fff; color:inherit;
}
.blk textarea{ min-height:96px; resize:vertical; }
.blk input:focus,
.blk select:focus,
.blk textarea:focus{ outline:none; border-color:currentColor; }
.blk input::placeholder,
.blk textarea::placeholder{ color:rgba(0,0,0,.38); }

/* Ô nhập cuối trước nút bấm không cần khoảng cách dưới */
.blk input:last-of-type{ margin-bottom:14px; }

/* Khối báo lỗi của form đăng nhập / đăng ký */
.blk .errbox{ display:none; }
.blk .errbox.on{
  display:block; background:#FDECEA; color:#B3261E;
  border:1px solid #F5C6C2; border-radius:9px;
  padding:10px 13px; margin-bottom:13px; font-size:13px; line-height:1.6;
}

/* Trình duyệt tự điền (Chrome autofill) tô nền xanh nhạt đè lên nền của mẫu,
   nhìn như trang bị lỗi. Giữ lại nền trắng và màu chữ của mẫu. */
.blk input:-webkit-autofill,
.blk input:-webkit-autofill:hover,
.blk input:-webkit-autofill:focus{
  -webkit-text-fill-color:currentColor;
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  transition:background-color 9999s ease-out 0s;
}

/* Nhãn cố định trên ô nhập (Đăng nhập / Đăng ký). Chrome tự điền làm mất
   chữ gợi ý trong ô, nên phải có nhãn đứng ngoài mới biết ô nào là gì. */
.blk label.nh{ display:block; font-size:12px; font-weight:700; color:#5b6478; margin:0 0 6px; letter-spacing:.01em; }
.blk input + label.nh, .blk textarea + label.nh{ margin-top:2px; }

/* Thông báo thành công (quên mật khẩu đã gửi link…) */
.blk .okbox{
  display:block; background:#E8F5EC; color:#1B6B3A;
  border:1px solid #BFE3CB; border-radius:9px;
  padding:10px 13px; margin-bottom:13px; font-size:13px; line-height:1.6;
}
/* Dòng "Ghi nhớ đăng nhập" + "Quên mật khẩu?" */
.blk .nho-quen{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:13px; margin:-4px 0 14px; color:#5b6478; }
.blk .nho-quen label{ display:flex; align-items:center; gap:6px; cursor:pointer; margin:0; font-weight:normal; }
.blk .nho-quen input[type=checkbox]{ width:15px; height:15px; margin:0; }
.blk .nho-quen a{ font-weight:700; }

/* Ô xổ danh mục con trên menu đầu trang (07/09) — mẫu chưa có mega menu riêng
   dùng bộ này; chữ kế thừa phông của mẫu, chỉ bỏ in hoa/giãn chữ cho dễ đọc. */
.sf-dd{ position:relative; }
li.sf-dd{ list-style:none; }
.sf-dd::after{ content:''; position:absolute; left:0; right:0; top:100%; height:14px; }
.sf-dd .sf-dd-menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:210px; z-index:80;
  background:#fff; color:#222; border:1px solid rgba(0,0,0,.08); border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.13); padding:8px 0; display:none; text-align:left;
}
.sf-dd:hover > .sf-dd-menu, .sf-dd:focus-within > .sf-dd-menu{ display:block; }
.sf-dd .sf-dd-menu a{
  display:block; padding:9px 18px; font-size:13.5px; font-weight:500; line-height:1.4;
  color:#222; white-space:nowrap; text-transform:none; letter-spacing:0; border:0; background:none;
}
.sf-dd .sf-dd-menu a:hover{ background:#f5f5f5; color:#000; }
/* Menu di động (ngăn kéo): danh mục con thụt vào dưới mục cha */
.sf-dsub{ display:block; font-size:13px; opacity:.72; padding:7px 22px 7px 40px; }
/* Nhiều hơn 8 danh mục con thì xếp 2 cột cho khỏi dài */
.sf-dd .sf-dd-menu.sf-dd-2{ min-width:400px; column-count:2; column-gap:0; }
.sf-dd .sf-dd-menu.sf-dd-2 a{ break-inside:avoid; }

/* Thẻ trắng gọn cho trang Quên / Đặt lại mật khẩu (07/09, dùng chung 16 mẫu) */
.blk.the{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:26px 26px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.05); margin:26px auto 0; max-width:420px; text-align:center; }
.blk.the h3{ font-size:18px; margin:0 0 6px; }
.blk.the .sub{ font-size:13.5px; color:#6b7280; margin:0 0 16px; line-height:1.55; }
.blk.the input{ text-align:left; }
.blk.the .okbox{ display:flex; gap:12px; align-items:flex-start; text-align:left; border-radius:12px; padding:14px 16px; }
.blk.the .okbox .ic{ font-size:22px; line-height:1; }
