/* NongNghiepSo — Đăng nhập / Đăng ký doanh nghiệp (/Account/Login, /register).
   Dùng lại nguyên bộ token của landing (tokens.css + base.css) để hai trang này không còn là
   "ốc đảo" giao diện Materialize giữa các trang marketing: cùng họ chữ InterAC, cùng xanh lá
   thương hiệu, cùng bo góc/đổ bóng.

   Bố cục: hai cột — cột trái là ảnh vùng nguyên liệu phủ lớp xanh đậm (mang không khí nông
   nghiệp vào ngay màn đăng nhập), cột phải là biểu mẫu trên nền giấy xanh nhạt. Dưới 992px cột
   ảnh rút thành một dải banner ngang phía trên để không ăn mất chiều cao của biểu mẫu. */

/* Bỏ lề mặc định 8px của <body>. Không chỉ để bố cục tràn viền: cột ảnh bên trái cao đúng
   100vh và dính bằng position:sticky, mà phạm vi dính của nó là ô lưới — lề body làm ô lưới
   ngắn hơn trang đúng 16px, nên aside buộc phải trượt 8px khi bắt đầu cuộn và 8px nữa khi
   chạm đáy trang. Lề về 0 thì ô lưới cao bằng trang, aside đứng yên tuyệt đối.
   Đặt trên .ac-auth-page (chính là <body>) để không đụng tới các trang landing khác. */
.ac-auth-page {
    margin: 0;
}

/* ---------- Khung 2 cột ---------- */
.ac-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* Trang Đăng ký có biểu mẫu 3 phần, dài hơn hẳn — nhường thêm bề ngang cho cột biểu mẫu. */
.ac-auth-page--wide .ac-auth {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}

/* ---------- Cột ảnh ---------- */
.ac-auth__aside {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: hidden;
    background: var(--ac-primary-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    padding: 44px 48px;
}

.ac-auth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Lớp phủ giữ mức tối tối thiểu trên toàn cột: chữ trắng và danh sách gạch đầu dòng trải khắp
   chiều cao, không thể để một mảng ảnh sáng ở giữa nuốt mất chữ. */
.ac-auth__aside::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(8, 40, 24, .92) 0%, rgba(8, 40, 24, .80) 45%, rgba(11, 78, 44, .74) 100%);
}

/* Mọi lớp nội dung nổi lên trên ảnh + lớp phủ. Phải loại trừ chính .ac-auth__bg: cùng độ ưu
   tiên (một class) nhưng đứng sau, nó sẽ ghi đè position:absolute của ảnh thành relative và
   ảnh tụt xuống thành một khối nằm trong luồng thay vì phủ kín cột. */
.ac-auth__aside > *:not(.ac-auth__bg) {
    position: relative;
    z-index: 2;
}

/* Thương hiệu bản nền tối — dùng lại khung .ac-brand của base.css, chỉ đổi màu. */
.ac-auth__aside .ac-brand__mark {
    background: rgba(255, 255, 255, .16);
}

.ac-auth__aside .ac-brand__title {
    color: #fff;
}

.ac-auth__aside .ac-brand__tagline {
    color: rgba(255, 255, 255, .72);
}

/* Đủ ưu tiên để thắng `.ac-page h2 { color: var(--ac-ink) }` của base.css — chỉ một class thì
   thua (0,0,1,0 < 0,0,1,1) và tiêu đề thành xanh đậm trên nền xanh đậm. */
.ac-auth__aside h2.ac-auth__aside-title {
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
    font-weight: 800;
    line-height: 1.22;
    color: #fff;
    margin: 0 0 14px;
    max-width: 18ch;
}

.ac-auth__aside-desc {
    font-size: var(--ac-text-lead);
    line-height: 1.62;
    color: rgba(255, 255, 255, .82);
    max-width: 44ch;
    margin: 0;
}

.ac-auth__points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.ac-auth__points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: var(--ac-text-body);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.ac-auth__points i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ac-auth__aside-foot {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.ac-auth__stat b {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.ac-auth__stat span {
    font-size: var(--ac-text-micro);
    color: rgba(255, 255, 255, .7);
}

/* ---------- Cột biểu mẫu ---------- */
.ac-auth__main {
    background: linear-gradient(180deg, var(--ac-white) 0%, var(--ac-bg-mint) 100%);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ac-auth__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 40px 0;
}

.ac-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--ac-text-meta);
    font-weight: 600;
    color: var(--ac-muted);
    text-decoration: none;
}

.ac-auth__back:hover {
    color: var(--ac-primary-dark);
}

.ac-auth__switch {
    font-size: var(--ac-text-meta);
    color: var(--ac-muted);
}

.ac-auth__switch a {
    color: var(--ac-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.ac-auth__switch a:hover {
    text-decoration: underline;
}

/* Căn giữa theo chiều dọc bằng margin-top/bottom:auto (trục chính của cột flex): còn chỗ trống
   thì biểu mẫu nằm giữa, hết chỗ — như trang Đăng ký cao hơn màn hình — thì đơn giản là không
   còn gì để chia, chứ không bị cắt mất phần đầu như cách căn giữa bằng justify-content.

   Chiều ngang KHÔNG dùng margin:auto: lề auto trên trục phụ của flex vô hiệu hoá align stretch,
   khối bị co theo nội dung và giữ nguyên 452px kể cả khi màn hình chỉ rộng 390px — tràn ngang.
   Dùng width:100% + align-self:center để vừa căn giữa vừa co lại được. */
.ac-auth__body {
    width: 100%;
    max-width: 452px;
    align-self: center;
    margin-top: auto;
    margin-bottom: auto;
    padding: 36px 40px 44px;
}

.ac-auth-page--wide .ac-auth__body {
    max-width: 760px;
}

.ac-auth__legal {
    padding: 0 40px 26px;
    margin: 0;
    text-align: center;
    font-size: var(--ac-text-micro);
    color: var(--ac-muted);
}

/* ---------- Tiêu đề biểu mẫu ---------- */
.ac-auth__title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 8px;
}

.ac-auth__subtitle {
    font-size: var(--ac-text-body);
    line-height: 1.6;
    color: var(--ac-muted);
    margin: 0 0 26px;
    max-width: 52ch;
}

/* ---------- Thẻ chứa biểu mẫu ---------- */
.ac-auth-card {
    background: var(--ac-white);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-lg);
    box-shadow: var(--ac-shadow-md);
    padding: 30px;
}

/* ---------- Trường nhập ---------- */
.ac-field {
    margin-bottom: 16px;
    min-width: 0;
}

.ac-label {
    display: block;
    font-size: var(--ac-text-meta);
    font-weight: 600;
    color: var(--ac-ink-soft);
    margin-bottom: 6px;
}

.ac-label .ac-req {
    color: var(--ac-danger);
    margin-left: 2px;
}

.ac-field__box {
    position: relative;
    display: block;
}

/* Viền nghỉ dùng --ac-border (cùng tông với viền thẻ) chứ không phải --ac-border-strong: ở trang
   này mỗi nhóm có 4-6 ô xếp sát nhau, viền đậm khiến cả khối trông như một cái lưới kẻ ô. Tông
   đậm để dành cho hover/focus — lúc đó mới cần chỉ rõ ô nào đang được thao tác. */
.ac-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    background: var(--ac-white);
    font-family: inherit;
    font-size: var(--ac-text-body);
    color: var(--ac-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ac-input:hover:not(:focus) {
    border-color: var(--ac-border-strong);
}

/* appearance:none đã gỡ mũi tên mặc định — vẽ lại bằng nền SVG để <select> cùng một họ với ô
   nhập chữ thay vì giữ nguyên widget xám của trình duyệt. */
select.ac-input {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E7268' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.ac-input::placeholder {
    color: #9BAEA3;
}

/* ---------- Select tự dựng ----------
   Danh sách <option> của select gốc do hệ điều hành vẽ, CSS gần như không với tới (bo góc, đệm,
   màu chọn đều bị bỏ qua), nên mở ra là lạc hẳn khỏi phần còn lại của biểu mẫu. auth.js thay
   phần nhìn bằng nút + listbox dưới đây và GIỮ NGUYÊN thẻ <select> thật ẩn phía sau để form
   post và validation phía trình duyệt không đổi gì. Không có JS thì select gốc vẫn hiện bình
   thường — các lớp dưới đây chỉ được gắn khi enhance thành công. */
.ac-select {
    position: relative;
}

/* opacity:0 chứ không display:none/visibility:hidden — select vẫn phải "focus được" thì thông
   báo "Vui lòng chọn một mục" của trình duyệt mới hiện ra đúng chỗ thay vì chặn submit im lặng. */
.ac-select__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.ac-select__btn {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235E7268' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.ac-select__btn[aria-expanded="true"] {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 3px rgba(21, 122, 69, .12);
}

.ac-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-select__value--placeholder {
    color: #9BAEA3;
}

.ac-select__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--ac-white);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    box-shadow: var(--ac-shadow-md);
    max-height: 264px;
    overflow-y: auto;
}

.ac-select__menu[hidden] {
    display: none;
}

.ac-select__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: var(--ac-text-body);
    color: var(--ac-ink-soft);
    cursor: pointer;
}

/* .is-active = mục đang được trỏ tới bằng bàn phím, dùng chung nền với hover chuột. */
.ac-select__opt:hover,
.ac-select__opt.is-active {
    background: var(--ac-bg-mint);
    color: var(--ac-primary-dark);
}

/* Dòng giữ chỗ là "chưa chọn gì", không phải một loại hình — để mờ như placeholder của ô nhập. */
.ac-select__opt--placeholder {
    color: var(--ac-muted);
}

.ac-select__opt[aria-selected="true"] {
    color: var(--ac-primary-dark);
    font-weight: 600;
}

.ac-select__opt[aria-selected="true"]::after {
    content: "";
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--ac-primary);
    border-bottom: 2px solid var(--ac-primary);
    transform: rotate(-45deg) translate(2px, -2px);
    flex-shrink: 0;
}

.ac-input:focus {
    outline: none;
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 3px rgba(21, 122, 69, .12);
}

/* Trường có icon dẫn ở đầu (tên đăng nhập, mật khẩu...). */
.ac-field--icon .ac-input {
    padding-left: 42px;
}

.ac-field__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--ac-muted);
    pointer-events: none;
}

.ac-field__box:focus-within .ac-field__icon {
    color: var(--ac-primary);
}

/* Nút hiện/ẩn mật khẩu */
.ac-pw-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--ac-muted);
    cursor: pointer;
    font-size: 14px;
}

.ac-pw-toggle:hover {
    color: var(--ac-primary-dark);
    background: var(--ac-bg-mint);
}

.ac-field--pw .ac-input {
    padding-right: 44px;
}

.ac-field__hint {
    display: block;
    margin-top: 5px;
    font-size: var(--ac-text-micro);
    color: var(--ac-muted);
}

/* ---------- Lưới trường ---------- */
.ac-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.ac-field-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ac-field-grid .ac-field--full {
    grid-column: 1 / -1;
}

/* Hàng cuối của mỗi nhóm không cần khoảng đệm dưới — nhóm đã có padding riêng. */
.ac-auth-step .ac-field-grid > .ac-field:nth-last-child(-n + 2),
.ac-auth-step .ac-field-grid--3 > .ac-field:nth-last-child(-n + 3) {
    margin-bottom: 0;
}

/* ---------- Hàng phụ dưới mật khẩu ---------- */
.ac-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 20px;
}

.ac-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ac-text-meta);
    color: var(--ac-ink-soft);
    cursor: pointer;
    user-select: none;
}

.ac-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--ac-primary);
    cursor: pointer;
}

.ac-link-muted {
    font-size: var(--ac-text-meta);
    color: var(--ac-muted);
    text-decoration: none;
}

.ac-link-muted:hover {
    color: var(--ac-primary-dark);
}

/* ---------- Nút rộng hết hàng ---------- */
.ac-btn--block {
    display: flex;
    width: 100%;
}

/* ---------- Thông báo ---------- */
.ac-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--ac-radius-sm);
    padding: 12px 14px;
    font-size: var(--ac-text-meta);
    line-height: 1.55;
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.ac-alert > i {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.ac-alert--danger {
    background: #FDECEA;
    border-color: #F5C6C1;
    color: #8A2019;
}

.ac-alert--info {
    background: var(--ac-official-soft);
    border-color: #CBD8EE;
    color: var(--ac-official);
}

/* Bản tóm tắt lỗi của asp-validation-summary: <ul> mặc định thụt lề sâu, và khi không có lỗi nào
   nó vẫn in ra một <ul> rỗng. */
.ac-alert ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.ac-alert ul:empty {
    display: none;
}

.field-validation-error,
.ac-field-error {
    display: block;
    margin-top: 5px;
    font-size: var(--ac-text-micro);
    color: var(--ac-danger);
}

.ac-input.input-validation-error {
    border-color: var(--ac-danger);
}

/* ---------- Nhóm trường của trang Đăng ký ---------- */
.ac-auth-step {
    background: var(--ac-white);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow-sm);
    padding: 24px 26px 26px;
    margin-bottom: 18px;
}

.ac-auth-step__head {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 20px;
}

.ac-auth-step__no {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ac-primary-soft);
    color: var(--ac-primary-dark);
    font-weight: 800;
    font-size: var(--ac-text-meta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ac-auth-step__head h2 {
    font-size: var(--ac-text-h3);
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
}

.ac-auth-step__head p {
    margin: 0;
    font-size: var(--ac-text-meta);
    color: var(--ac-muted);
    line-height: 1.5;
}

/* Dải nhắc "đăng ký xong vào hệ thống ngay ở mức E0" — thông tin quy trình quan trọng, tách
   khỏi đoạn mô tả để không bị đọc lướt qua. */
.ac-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    background: var(--ac-accent-soft);
    border: 1px solid #F3D9B4;
    border-radius: var(--ac-radius-sm);
    padding: 13px 15px;
    font-size: var(--ac-text-meta);
    line-height: 1.55;
    color: #7A4A0C;
    margin-bottom: 20px;
}

.ac-auth-note i {
    font-size: 15px;
    margin-top: 1px;
    flex-shrink: 0;
}

.ac-auth-submit {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ac-auth__aside {
        padding: 36px 34px;
    }

    .ac-auth__body,
    .ac-auth__topbar,
    .ac-auth__legal {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 991px) {
    /* Một cột: ảnh rút thành dải banner ngang. Bỏ sticky + 100vh, nếu không trên điện thoại
       người dùng phải cuộn hết trọn một màn hình ảnh mới thấy ô nhập đầu tiên. */
    .ac-auth,
    .ac-auth-page--wide .ac-auth {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* relative chứ KHÔNG phải static: .ac-auth__bg và lớp phủ ::after đều absolute inset:0, bỏ
       mốc neo ở aside là chúng nhảy ra khối chứa gốc và phủ kín cả trang, nuốt luôn biểu mẫu. */
    .ac-auth__aside {
        position: relative;
        height: auto;
        padding: 26px 24px 28px;
        gap: 20px;
    }

    .ac-auth__aside h2.ac-auth__aside-title {
        max-width: none;
        font-size: 1.375rem;
    }

    .ac-auth__aside-desc,
    .ac-auth__points,
    .ac-auth__aside-foot {
        display: none;
    }

    .ac-auth__body,
    .ac-auth__topbar,
    .ac-auth__legal {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ac-auth__body {
        padding-top: 28px;
        padding-bottom: 36px;
    }
}

@media (max-width: 639px) {
    .ac-field-grid,
    .ac-field-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Ở một cột thì "hai ô cuối" không còn là hàng cuối — trả lại khoảng đệm cho mọi ô trừ ô
       thật sự đứng cuối nhóm. Phải kèm :not(:last-child) mới đủ ưu tiên ghi đè quy tắc
       :nth-last-child(-n+2) ở trên (4 class so với 3), nếu không ô áp chót vẫn dính sát ô cuối. */
    .ac-auth-step .ac-field-grid > .ac-field:not(:last-child) {
        margin-bottom: 16px;
    }

    .ac-auth-step .ac-field-grid > .ac-field:last-child {
        margin-bottom: 0;
    }

    .ac-auth__title {
        font-size: 1.5rem;
    }

    .ac-auth-card {
        padding: 22px 20px;
        border-radius: var(--ac-radius);
    }

    .ac-auth-step {
        padding: 20px 18px 22px;
    }

    .ac-auth__body,
    .ac-auth__topbar,
    .ac-auth__legal {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ac-auth-submit .ac-btn {
        width: 100%;
    }
}