/* ============================================================
   Pharma360 2026 – KHU ỨNG VIÊN (Claude Code thêm 2026-11-04)
   Mockup: Web-moi-full/13-giao diện ứng viên (1300px khung thiết kế → quy về 1920 như các trang khác).
   Trang: chọn hình thức đăng ký, đăng ký, đăng nhập, thông báo (xác thực email…), chào mừng, hoàn thiện hồ sơ,
   sửa thông tin cá nhân, việc làm đã lưu/đã ứng tuyển/gợi ý, ứng tuyển, danh sách mẫu CV, trình tạo CV.
   Dùng token trong p360-base.css, component trong p360-components.css. Mọi class tiền tố p360-acc- / p360-uv / p360-cv.
   ============================================================ */

:root { --p360-acc-blue: #2176eb; --p360-acc-bg: #e9eef6; --p360-acc-gold: linear-gradient(90deg, #ffa229 0%, #f7c105 100%); }
body.p360-blank { padding-top: 0; background: var(--p360-acc-bg); }
.p360-acc-page { background: var(--p360-acc-bg); padding: var(--p360-sp-10) 0 var(--p360-sp-12); min-height: calc(100vh - var(--p360-header-h)); display: flex; flex-direction: column; align-items: center; }
.p360-acc-page--top { justify-content: flex-start; padding-top: var(--p360-sp-6); }
.p360-acc__msg { margin-bottom: var(--p360-sp-4); display: block; line-height: 1.55; } /* .p360-notice gốc là flex → chữ đậm/link bên trong bị tách cột; khu tài khoản để chữ chảy bình thường (sửa 04/11) */
.p360-acc__msg a { font-weight: 700; text-decoration: underline; }
.p360-acc__msg ul { margin: 0; padding-left: 18px; }
.p360-acc-btn-gold { background: var(--p360-acc-gold); color: #fff !important; border: 0; }
.p360-acc-btn-gold:hover { filter: brightness(1.05); color: #fff; }

/* ================= Trang 2 cột: Chọn hình thức đăng ký / Đăng ký ================= */
.p360-acc-split { display: grid; grid-template-columns: 46% 54%; min-height: calc(100vh - var(--p360-header-h)); }
.p360-acc-split--full { min-height: 100vh; }
.p360-acc-split__side { background: var(--p360-acc-blue); color: #fff; display: flex; align-items: center; justify-content: center; padding: var(--p360-sp-10) var(--p360-sp-6); }
.p360-acc-split__side-inner { max-width: 620px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-6); }
.p360-acc-split__side-inner--left { text-align: left; align-items: flex-start; }
.p360-acc-split__headline { font-size: var(--p360-fs-3xl); font-weight: 700; line-height: 1.25; margin: 0; text-transform: uppercase; }
.p360-acc-split__pill { display: inline-block; background: var(--p360-acc-gold); color: #fff; font-weight: 700; font-size: var(--p360-fs-xl); padding: 14px 44px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.p360-acc-split__img { width: 100%; max-width: 560px; height: auto; border-radius: 8px; }
.p360-acc-split__img--sm { max-width: 420px; }
.p360-acc-split__logo img { height: 44px; width: auto; }
.p360-acc-split__welcome { font-size: var(--p360-fs-xl); font-weight: 700; margin: 0; line-height: 1.45; }
.p360-acc-split__welcome span { color: var(--p360-yellow); display: block; }
.p360-acc-split__perks { display: grid; grid-template-columns: 1fr auto; gap: var(--p360-sp-5); align-items: center; width: 100%; }
.p360-acc-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--p360-sp-5); font-size: var(--p360-fs-base); }
.p360-acc-perks li { display: flex; align-items: center; gap: var(--p360-sp-4); line-height: 1.35; }
.p360-acc-perks li span { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; }
.p360-acc-perks svg { width: 26px; height: 26px; }
.p360-acc-hotline { display: inline-flex; align-items: center; gap: var(--p360-sp-4); border: 2px solid #fff; border-radius: 999px; padding: 10px 34px 10px 18px; color: #fff; align-self: center; }
.p360-acc-hotline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.p360-acc-hotline__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--p360-orange); display: inline-flex; align-items: center; justify-content: center; }
.p360-acc-hotline__icon svg { width: 26px; height: 26px; }
.p360-acc-hotline__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.p360-acc-hotline__text small { font-size: var(--p360-fs-sm); opacity: 0.9; }
.p360-acc-hotline__text b { font-size: var(--p360-fs-2xl); font-weight: 700; }

.p360-acc-split__main { display: flex; align-items: center; justify-content: center; padding: var(--p360-sp-10) var(--p360-sp-6); background: #fff; }
.p360-acc-choose, .p360-acc-form-wrap { width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; }
.p360-acc-title { margin: 0; text-align: center; font-size: var(--p360-fs-2xl); font-weight: 700; line-height: 1.35; display: flex; flex-direction: column; color: var(--p360-text); }
.p360-acc-title__muted { color: #4b5563; }
.p360-acc-bar { display: block; width: 110px; height: 4px; border-radius: 2px; background: var(--p360-yellow); margin: var(--p360-sp-4) auto; }
.p360-acc-lead { text-align: center; font-style: italic; color: var(--p360-text-muted); font-size: var(--p360-fs-md); margin: 0 0 var(--p360-sp-8); line-height: 1.5; }
.p360-acc-choose__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p360-sp-8); width: 100%; }
.p360-acc-choose__card { border: 1.5px solid var(--p360-orange); border-radius: 18px; padding: var(--p360-sp-8) var(--p360-sp-5) var(--p360-sp-7); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--p360-text); background: #fff; transition: transform var(--p360-ease), box-shadow var(--p360-ease); }
.p360-acc-choose__card:hover { transform: translateY(-3px); box-shadow: var(--p360-shadow-md); color: var(--p360-text); }
.p360-acc-choose__card--blue { border-color: var(--p360-acc-blue); }
.p360-acc-choose__icon { width: 92px; height: 92px; border-radius: 50%; background: var(--p360-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--p360-sp-3); }
.p360-acc-choose__card--blue .p360-acc-choose__icon { background: var(--p360-acc-blue); }
.p360-acc-choose__icon svg { width: 44px; height: 44px; }
.p360-acc-choose__card small { font-weight: 700; color: var(--p360-orange); font-size: var(--p360-fs-base); }
.p360-acc-choose__card b { font-size: var(--p360-fs-2xl); color: var(--p360-orange); line-height: 1.2; }
.p360-acc-choose__card--blue small, .p360-acc-choose__card--blue b { color: var(--p360-acc-blue); }
.p360-acc-choose__card p { color: var(--p360-text-muted); margin: var(--p360-sp-2) 0 var(--p360-sp-5); font-size: var(--p360-fs-base); line-height: 1.5; }
.p360-acc-foot { text-align: center; font-weight: 600; color: #4b5563; margin: var(--p360-sp-5) 0 0; font-size: var(--p360-fs-base); }
.p360-acc-foot a { color: var(--p360-acc-blue); font-weight: 700; }
.p360-acc-foot__orange { color: var(--p360-orange) !important; }
.p360-acc-foot--sm { font-size: var(--p360-fs-sm); font-weight: 500; margin-top: var(--p360-sp-2); }

/* Form: nhãn trái – ô phải như mockup */
.p360-acc-form { width: 100%; max-width: 620px; }
.p360-acc-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: var(--p360-sp-4); margin-bottom: var(--p360-sp-4); }
.p360-acc-row__label { font-weight: 700; font-size: var(--p360-fs-base); color: var(--p360-text); }
.p360-acc-row__label i { color: var(--p360-red-dark); font-style: normal; margin-left: 2px; }
.p360-acc-row .p360-input { min-height: 48px; }
.p360-acc-agree { margin: var(--p360-sp-2) 0 var(--p360-sp-4); font-size: var(--p360-fs-sm); color: #4b5563; align-items: flex-start; }
.p360-acc-agree a { color: var(--p360-acc-blue); font-weight: 700; }
.p360-acc-captcha { display: flex; justify-content: center; margin-bottom: var(--p360-sp-4); }
.p360-acc-submit { display: flex; margin: 0 auto; min-width: 320px; }
.p360-acc-login-opts { display: flex; align-items: center; justify-content: center; gap: var(--p360-sp-8); margin: var(--p360-sp-2) 0 var(--p360-sp-5); font-size: var(--p360-fs-sm); }
.p360-acc-login-opts a { color: var(--p360-acc-blue); font-weight: 600; }

/* ================= Đăng nhập (thẻ giữa màn hình) ================= */
.p360-acc-center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--p360-sp-8) var(--p360-sp-4); background: var(--p360-acc-bg); }
.p360-acc-card { background: #fff; border-radius: 24px; box-shadow: var(--p360-shadow-lg); padding: var(--p360-sp-10) var(--p360-sp-8); width: 100%; }
.p360-acc-card--login { max-width: 640px; border-radius: 40px; text-align: center; }
.p360-acc-card__logo img { height: 56px; width: auto; }
.p360-acc-card__title { font-size: var(--p360-fs-2xl); color: var(--p360-acc-blue); font-weight: 700; margin: var(--p360-sp-4) 0 var(--p360-sp-6); }
.p360-acc-card--login .p360-acc-form { text-align: left; margin: 0 auto; }
.p360-acc-card--login .p360-acc-row { grid-template-columns: 150px 1fr; }
.p360-acc-card--login .p360-acc-submit { min-width: 320px; }

/* ================= Thẻ thông báo / form nhỏ ================= */
.p360-acc-card--notice, .p360-acc-card--form { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-4); }
.p360-acc-card--form { text-align: left; align-items: stretch; }
.p360-acc-card--form .p360-acc-card__heading, .p360-acc-card--form .p360-acc-card__muted { text-align: center; }
.p360-acc-card--form .p360-acc-row { grid-template-columns: 1fr; gap: 6px; }
.p360-acc-card--form .p360-acc-submit { min-width: 0; width: 100%; }
.p360-acc-card__check { width: 84px; height: 84px; border-radius: 50%; background: var(--p360-yellow); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.p360-acc-card__check--red { background: var(--p360-red); }
.p360-acc-card__check svg { width: 44px; height: 44px; }
.p360-acc-card__heading { font-size: var(--p360-fs-xl); color: var(--p360-acc-blue); font-weight: 700; margin: 0; line-height: 1.3; }
.p360-acc-card__heading--red { color: #e8412c; font-size: var(--p360-fs-xl); margin-top: 80px; }
.p360-acc-card__strong { font-weight: 700; color: #4b5563; margin: 0; line-height: 1.55; text-align: left; }
.p360-acc-card__muted { color: var(--p360-text-muted); margin: 0; line-height: 1.55; }
.p360-acc-card__btn { min-width: 300px; }
.p360-acc-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--p360-sp-3); margin-top: var(--p360-sp-2); }
.p360-acc-card--party { position: relative; overflow: hidden; }
.p360-acc-card--party::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 170px; background: var(--p360-confetti) center top / 100% auto no-repeat; pointer-events: none; }
.p360-acc-fanpage { display: block; width: 100%; max-width: 400px; border-radius: 16px; overflow: hidden; background: var(--p360-acc-blue); color: #fff; }
.p360-acc-fanpage img { width: 100%; display: block; }
.p360-acc-fanpage__fallback { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--p360-sp-10) var(--p360-sp-4); font-size: var(--p360-fs-xl); font-weight: 700; }
.p360-acc-fanpage__fallback svg { width: 46px; height: 46px; }
.p360-acc-fanpage__fallback small { font-size: var(--p360-fs-sm); font-weight: 500; opacity: 0.85; }

/* ================= Chào mừng (InfoUs) ================= */
.p360-acc-welcome { background: var(--p360-hero-gradient-h); color: #fff; position: relative; overflow: hidden; }
.p360-acc-welcome::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 10% 100%, rgba(255, 255, 255, 0.12), transparent 60%), radial-gradient(40% 60% at 100% 0%, rgba(255, 255, 255, 0.12), transparent 60%); pointer-events: none; }
.p360-acc-welcome__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--p360-sp-8); min-height: 600px; position: relative; }
.p360-acc-welcome__text h1 { font-size: var(--p360-fs-2xl); font-weight: 700; line-height: 1.4; margin: 0 0 var(--p360-sp-5); color: #fff; } /* base tô navy cho h1 → ép trắng trên nền xanh */
.p360-acc-welcome__text h1 span { color: var(--p360-yellow); }
.p360-acc-welcome__text p { font-size: var(--p360-fs-md); line-height: 1.7; margin: 0 0 var(--p360-sp-8); max-width: 640px; }
.p360-acc-welcome__missing { background: rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 10px 14px; font-size: var(--p360-fs-sm) !important; margin-top: calc(var(--p360-sp-6) * -1) !important; }
.p360-acc-welcome__actions { display: flex; flex-wrap: wrap; gap: var(--p360-sp-6); }
.p360-acc-welcome__actions .p360-btn { min-width: 220px; min-height: 56px; }
.p360-acc-welcome__img img { width: 100%; height: auto; max-width: 660px; display: block; margin-left: auto; mix-blend-mode: normal; border-radius: 12px; }
.p360-acc-perkbar { background: var(--p360-acc-bg); padding: var(--p360-sp-8) 0 var(--p360-sp-12); }
.p360-acc-perkbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--p360-sp-6); }
.p360-acc-perk { background: #fff; border: 1px solid var(--p360-border); border-radius: 14px; padding: var(--p360-sp-5); display: flex; align-items: center; gap: var(--p360-sp-4); color: var(--p360-text); box-shadow: var(--p360-shadow-sm); }
a.p360-acc-perk:hover { box-shadow: var(--p360-shadow-md); color: var(--p360-text); }
.p360-acc-perk__icon { width: 60px; height: 60px; border-radius: 50%; background: var(--p360-primary-100); color: var(--p360-acc-blue); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p360-acc-perk__icon svg { width: 30px; height: 30px; }
.p360-acc-perk__icon--red { color: #e8412c; background: #ffe4e0; }
.p360-acc-perk__icon--yellow { color: var(--p360-yellow); background: #fff4c7; }
.p360-acc-perk__icon--green { color: var(--p360-green); background: #d9f5e3; }
.p360-acc-perk div { display: flex; flex-direction: column; line-height: 1.35; }
.p360-acc-perk b { color: var(--p360-acc-blue); font-size: var(--p360-fs-xl); }
.p360-acc-perk__title { font-size: var(--p360-fs-md) !important; }
.p360-acc-perk strong { font-size: var(--p360-fs-base); }
.p360-acc-perk span { color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }

/* ================= Hoàn thiện hồ sơ (EditInfoUser) ================= */
.p360-acc-profile { background: var(--p360-hero-gradient-h); padding: var(--p360-sp-8) 0 var(--p360-sp-12); color: #fff; }
.p360-acc-profile__wrap { max-width: calc(1000px + var(--p360-gutter) * 2); }
.p360-acc-profile__title { text-align: center; font-size: var(--p360-fs-xl); font-weight: 700; margin: 0 0 var(--p360-sp-2); color: #fff; }
.p360-acc-profile__sub { text-align: center; color: var(--p360-yellow); font-weight: 700; margin: 0 0 var(--p360-sp-6); font-size: var(--p360-fs-base); }
.p360-acc-profile__card { background: #fff; color: var(--p360-text); border-radius: 24px; padding: var(--p360-sp-8) var(--p360-sp-8) var(--p360-sp-6); box-shadow: var(--p360-shadow-lg); }
.p360-acc-profile__actions { display: flex; justify-content: center; gap: var(--p360-sp-8); margin-top: var(--p360-sp-8); flex-wrap: wrap; }
.p360-acc-profile__actions .p360-btn { min-width: 220px; min-height: 56px; }
.p360-acc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--p360-sp-8); }
.p360-acc-consent { color: var(--p360-text-muted); font-size: var(--p360-fs-sm); align-items: flex-start; }
.p360-acc-consent input { margin-top: 2px; }
.p360-acc-salary .p360-input { padding-right: 110px; }
.p360-acc-salary .p360-input-group__suffix { color: var(--p360-text-muted); }

/* Bảng kinh nghiệm nhiều dòng */
.p360-acc-exp { margin: 0 0 var(--p360-sp-5); }
.p360-acc-exp__tools { display: flex; justify-content: flex-end; gap: var(--p360-sp-2); margin-bottom: var(--p360-sp-2); }
.p360-acc-exp__table { border-radius: 10px; overflow: hidden; border: 1px solid var(--p360-border); }
.p360-acc-exp__head, .p360-acc-exp__row { display: grid; grid-template-columns: 220px 1fr 1fr 36px; gap: var(--p360-sp-3); align-items: center; padding: 10px 14px; }
.p360-acc-exp__head { background: var(--p360-bg-inner); font-weight: 700; font-size: var(--p360-fs-sm); color: var(--p360-text); }
.p360-acc-exp__head span:nth-child(2)::before { content: ""; }
.p360-acc-exp__row { border-top: 1px solid var(--p360-border); }
.p360-acc-exp__row.is-selected { background: var(--p360-primary-100); }
.p360-acc-exp__row input[type="text"], .p360-acc-exp__row input[type="month"] { min-height: 38px; padding: 6px 10px; border-radius: 8px; font-size: var(--p360-fs-sm); }
.p360-acc-exp__dates { display: flex; align-items: center; gap: 6px; }
.p360-acc-exp__dates input { width: 50%; }
.p360-acc-exp__dates label { font-size: var(--p360-fs-xs); color: var(--p360-text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.p360-acc-exp__row > label { justify-self: center; }
.p360-acc-exp__empty { padding: var(--p360-sp-4); margin: 0; color: var(--p360-text-muted); font-size: var(--p360-fs-sm); text-align: center; }
.p360-acc-exp__rows:not(:empty) + .p360-acc-exp__empty { display: none; }

/* Chọn nhiều ngành nghề (details) */
.p360-acc-multi { position: relative; }
.p360-acc-multi__summary { list-style: none; cursor: pointer; display: flex; align-items: center; color: var(--p360-text-light); }
.p360-acc-multi__summary::-webkit-details-marker { display: none; }
.p360-acc-multi__summary.has-value { color: var(--p360-text); }
.p360-acc-multi__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #fff; border: 1px solid var(--p360-border-strong); border-radius: 12px; box-shadow: var(--p360-shadow-lg); max-height: 320px; overflow: auto; padding: var(--p360-sp-3) var(--p360-sp-4); columns: 2; column-gap: var(--p360-sp-4); }
.p360-acc-multi__menu .p360-check { break-inside: avoid; font-size: var(--p360-fs-sm); margin-bottom: 6px; }
.p360-acc-multi__menu .p360-check.is-disabled { opacity: 0.45; }

/* ================= Sửa thông tin cá nhân (Edit) ================= */
.p360-acc-edit { display: grid; grid-template-columns: 300px 1fr; gap: var(--p360-sp-6); width: 100%; max-width: 1040px; align-items: start; }
.p360-acc-edit__side, .p360-acc-edit__main { background: #fff; border-radius: 18px; box-shadow: var(--p360-shadow-md); }
.p360-acc-edit__side { padding: var(--p360-sp-6) var(--p360-sp-5); }
.p360-acc-edit__main { padding: var(--p360-sp-8); }
.p360-acc-mini { display: flex; align-items: center; gap: var(--p360-sp-3); padding-bottom: var(--p360-sp-5); border-bottom: 1px solid var(--p360-border); margin-bottom: var(--p360-sp-6); }
.p360-acc-mini__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #f3f4f6; color: #9ca3af; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid #fff; box-shadow: var(--p360-shadow-sm); }
.p360-acc-mini__avatar img { width: 100%; height: 100%; object-fit: cover; }
.p360-acc-mini__avatar svg { width: 60%; height: 60%; }
.p360-acc-mini__info { display: flex; flex-direction: column; font-size: var(--p360-fs-sm); color: var(--p360-text-muted); min-width: 0; }
.p360-acc-mini__info b { color: var(--p360-text); font-size: var(--p360-fs-base); }
.p360-acc-edit__avatar { display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-4); text-align: center; }
.p360-acc-edit__avatar > b { font-size: var(--p360-fs-base); }
.p360-acc-avatar { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: var(--p360-acc-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(33, 118, 235, 0.3); }
.p360-acc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p360-acc-avatar svg { width: 72%; height: 72%; }
.p360-acc-edit__pick { cursor: pointer; }
.p360-acc-edit__title { font-size: var(--p360-fs-xl); color: var(--p360-acc-blue); font-weight: 700; margin: 0; }
.p360-acc-edit__sub { color: var(--p360-text-muted); font-style: italic; margin: 4px 0 var(--p360-sp-5); }
.p360-acc-radios { display: flex; gap: var(--p360-sp-10); padding: 6px 0; }
.p360-acc-edit__submit { display: flex; justify-content: center; margin-top: var(--p360-sp-6); }
.p360-acc-edit__submit .p360-btn { min-width: 240px; }
.p360-acc-edit .p360-input[disabled] { background: #f3f4f6; color: var(--p360-text-muted); }

/* ================= Việc làm đã lưu / đã ứng tuyển / gợi ý ================= */
.p360-uvlist { display: grid; grid-template-columns: 1fr 300px; gap: var(--p360-sp-6); width: 100%; max-width: 1180px; align-items: start; }
.p360-uvlist__title { font-size: var(--p360-fs-xl); font-weight: 700; color: var(--p360-text); margin: 0 0 var(--p360-sp-5); }
.p360-uvlist__title--sub { margin-top: var(--p360-sp-8); }
.p360-uvlist__box { background: #fff; border-radius: 18px; box-shadow: var(--p360-shadow-md); overflow: hidden; }
.p360-uvlist__empty { padding: var(--p360-sp-10) var(--p360-sp-6); text-align: center; color: var(--p360-text-muted); display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-4); }
.p360-uvlist__more { display: flex; justify-content: center; margin-top: var(--p360-sp-6); }
.p360-uvlist__more .p360-btn { min-width: 220px; }
/* Sidebar cố định khi cuộn (yêu cầu chủ dự án 04/11); dài hơn màn hình thì tự cuộn bên trong, ẩn thanh cuộn */
.p360-uvlist__side, .p360-acc-edit__side { position: sticky; top: calc(var(--p360-header-h) + 16px); max-height: calc(100vh - var(--p360-header-h) - 24px); overflow-y: auto; scrollbar-width: none; }
.p360-uvlist__side { padding: 6px; margin: -6px; }
.p360-uvlist__side::-webkit-scrollbar, .p360-acc-edit__side::-webkit-scrollbar { display: none; }
body.p360-has-topbar .p360-uvlist__side, body.p360-has-topbar .p360-acc-edit__side { top: calc(var(--p360-header-h) + var(--p360-topbar-h) + 16px); max-height: calc(100vh - var(--p360-header-h) - var(--p360-topbar-h) - 24px); }
.p360-uvlist__banner { display: block; border-radius: 18px; overflow: hidden; box-shadow: var(--p360-shadow-md); }
.p360-uvlist__banner img { width: 100%; display: block; }
.p360-uvlist__nav { display: flex; flex-direction: column; background: #fff; border-radius: 14px; margin-top: var(--p360-sp-4); overflow: hidden; box-shadow: var(--p360-shadow-sm); }
.p360-uvlist__nav a { padding: 12px 18px; color: var(--p360-text); font-weight: 600; border-left: 3px solid transparent; }
.p360-uvlist__nav a:hover, .p360-uvlist__nav a.is-active { color: var(--p360-acc-blue); border-left-color: var(--p360-acc-blue); background: var(--p360-primary-100); }
.p360-uvjob { display: grid; grid-template-columns: 130px 1fr auto; gap: var(--p360-sp-5); padding: var(--p360-sp-6) var(--p360-sp-8); border-bottom: 1px solid var(--p360-border); align-items: start; }
.p360-uvjob:last-child { border-bottom: 0; }
.p360-uvjob__logo { width: 130px; height: 130px; border-radius: 14px; overflow: hidden; background: var(--p360-acc-blue); display: block; }
.p360-uvjob__logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.p360-uvjob__body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.p360-uvjob__title { margin: 0; font-size: var(--p360-fs-md); font-weight: 700; }
.p360-uvjob__title a { color: var(--p360-acc-blue); }
.p360-uvjob__company { margin: 0; font-weight: 600; color: var(--p360-text); }
.p360-uvjob__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.p360-uvjob__chips .p360-chip { min-width: 130px; justify-content: center; }
.p360-uvjob__date, .p360-uvjob__cv { margin: 0; color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }
.p360-uvjob__cv { color: var(--p360-acc-blue); font-weight: 600; }
.p360-uvjob__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--p360-sp-5); min-height: 130px; }
.p360-uvjob__btns { display: flex; align-items: center; gap: 10px; }
.p360-uvjob__btns .p360-btn { min-width: 130px; }
.p360-uvjob__off { pointer-events: none; opacity: 0.7; }
.p360-uvjob__save { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--p360-border-strong); background: #fff; color: var(--p360-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.p360-uvjob__save svg { width: 20px; height: 20px; }
.p360-uvjob__save:hover, .p360-uvjob__save.is-saved { color: var(--p360-yellow); border-color: var(--p360-yellow); }
.p360-uvjob__save.is-saved svg { fill: currentColor; }
.p360-uvjob.is-expired .p360-uvjob__title a { color: var(--p360-text-muted); }

/* Nút Lưu tin trên card trang Việc làm / chi tiết (p360-account.js tô khi đã lưu) */
.p360-job__save.is-saved, .p360-btn[data-p360-save-job].is-saved { color: var(--p360-yellow); }
.p360-job__save.is-saved svg, .p360-btn[data-p360-save-job].is-saved svg { fill: currentColor; }

/* ================= Ứng tuyển ================= */
.p360-acc-card--apply { max-width: 720px; padding: var(--p360-sp-8); }
.p360-acc-apply__title { font-size: var(--p360-fs-xl); color: var(--p360-acc-blue); font-weight: 700; margin: 0 0 4px; }
.p360-acc-apply__job { color: var(--p360-text-muted); margin: 0 0 var(--p360-sp-4); }
.p360-acc-apply__job a { color: var(--p360-text); font-weight: 700; }
.p360-acc-apply__pick { display: flex; align-items: center; gap: 8px; color: var(--p360-acc-blue); font-weight: 700; margin: 0 0 var(--p360-sp-3); }
.p360-acc-apply__pick svg { width: 22px; height: 22px; }
.p360-acc-drop { border: 2px dashed var(--p360-acc-blue); border-radius: 14px; padding: var(--p360-sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-3); }
.p360-acc-drop.is-over { background: var(--p360-primary-100); }
.p360-acc-drop__zone { display: flex; align-items: center; gap: var(--p360-sp-4); text-align: left; }
.p360-acc-drop__zone div { display: flex; flex-direction: column; gap: 2px; }
.p360-acc-drop__zone span { color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }
.p360-acc-drop__icon { width: 56px; height: 56px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p360-acc-drop__icon svg { width: 26px; height: 26px; }
.p360-acc-drop__file { margin: 0; font-weight: 700; color: var(--p360-green); min-height: 1.4em; }
.p360-acc-drop .p360-field { width: 100%; margin-bottom: var(--p360-sp-3); }
.p360-acc-drop .p360-help { width: 100%; }
.p360-acc-apply__warn { width: 100%; color: var(--p360-red); margin: var(--p360-sp-2) 0 0; font-size: var(--p360-fs-sm); }
.p360-acc-apply__note { margin: var(--p360-sp-4) 0 var(--p360-sp-2); }
.p360-acc-apply__submit { min-width: 320px; }
.p360-acc-apply__done { display: flex; flex-direction: column; align-items: center; gap: var(--p360-sp-4); text-align: center; padding: var(--p360-sp-4) 0; }
.p360-acc-apply__alt { margin-top: var(--p360-sp-8); padding-top: var(--p360-sp-5); border-top: 1px solid var(--p360-border); }
.p360-acc-apply__alt h2 { font-size: var(--p360-fs-md); margin: 0 0 var(--p360-sp-2); color: var(--p360-text); }
.p360-acc-apply__alt p { margin: 0 0 var(--p360-sp-3); color: var(--p360-text-muted); }
.p360-acc-apply__alt .p360-acc-card__actions { justify-content: flex-start; }

/* ================= Danh sách mẫu CV ================= */
.p360-cvlist { max-width: calc(1100px + var(--p360-gutter) * 2); }
.p360-cvlist__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p360-sp-6); margin-top: var(--p360-sp-5); }
.p360-cvcard { background: #fff; border-radius: 16px; box-shadow: var(--p360-shadow-sm); padding: var(--p360-sp-4); display: flex; flex-direction: column; gap: 6px; transition: box-shadow var(--p360-ease), transform var(--p360-ease); }
.p360-cvcard:hover { box-shadow: var(--p360-shadow-lg); transform: translateY(-3px); }
.p360-cvcard.is-more { display: none; }
.p360-cvlist__grid.is-open .p360-cvcard.is-more { display: flex; }
.p360-cvcard__thumb { display: block; position: relative; border-radius: 10px; overflow: hidden; background: #e9eef6; aspect-ratio: 794 / 1123; border: 1px solid var(--p360-border); }
.p360-cvcard__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.p360-cvcard__tag { position: absolute; top: 10px; left: 10px; background: var(--p360-green); color: #fff; font-size: var(--p360-fs-xs); font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.p360-cvcard__hover { position: absolute; inset: 0; background: rgba(33, 118, 235, 0.72); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--p360-ease); }
.p360-cvcard__thumb:hover .p360-cvcard__hover { opacity: 1; }
.p360-cvcard__name { font-size: var(--p360-fs-md); margin: var(--p360-sp-2) 0 0; font-weight: 700; }
.p360-cvcard__name a { color: var(--p360-acc-blue); }
.p360-cvcard__group { margin: 0; color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }
.p360-cvcard__btns { display: flex; align-items: center; justify-content: space-between; gap: var(--p360-sp-3); margin-top: var(--p360-sp-2); }
.p360-cvcard__download { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--p360-acc-blue); color: var(--p360-acc-blue); border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: var(--p360-fs-sm); flex: 1; justify-content: center; }
.p360-cvcard__download svg { width: 16px; height: 16px; }
.p360-cvcard__download:hover { background: var(--p360-primary-100); }
.p360-cvlist__guide { background: #fff; border-radius: 16px; padding: var(--p360-sp-6) var(--p360-sp-8); margin-top: var(--p360-sp-8); box-shadow: var(--p360-shadow-sm); }
.p360-cvlist__guide h2 { display: flex; align-items: center; gap: 10px; font-size: var(--p360-fs-lg); color: var(--p360-acc-blue); margin: 0 0 var(--p360-sp-3); }
.p360-cvlist__guide h2 svg { width: 26px; height: 26px; }
.p360-cvlist__guide ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--p360-text); }
.p360-cvlist__band { margin-top: var(--p360-sp-6); background: var(--p360-acc-gold); border-radius: 12px; padding: var(--p360-sp-4) var(--p360-sp-6); display: flex; align-items: center; gap: var(--p360-sp-5); color: #fff; }
.p360-cvlist__band b { font-size: var(--p360-fs-lg); flex: 1; }
.p360-cvlist__band .p360-input { max-width: 320px; }
.p360-cvlist__old { margin-top: var(--p360-sp-8); }
.p360-cvlist__old h2 { font-size: var(--p360-fs-md); margin: 0 0 var(--p360-sp-3); }
.p360-cvlist__old-list { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================= Trình tạo CV ================= */
.p360-cvb__wrap { max-width: calc(1240px + var(--p360-gutter) * 2); }
.p360-cvb__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--p360-sp-4); margin-bottom: var(--p360-sp-5); flex-wrap: wrap; }
.p360-cvb__back { display: inline-flex; align-items: center; gap: 4px; color: var(--p360-text-muted); font-weight: 600; font-size: var(--p360-fs-sm); }
.p360-cvb__back svg { width: 16px; height: 16px; }
.p360-cvb__title { font-size: var(--p360-fs-xl); font-weight: 700; margin: 4px 0; }
.p360-cvb__hint { margin: 0; color: var(--p360-text-muted); font-size: var(--p360-fs-sm); }
.p360-cvb__bar-right { display: flex; gap: var(--p360-sp-2); flex-wrap: wrap; }
.p360-cvb__body { display: grid; grid-template-columns: minmax(0, 794px) 1fr; gap: var(--p360-sp-6); align-items: start; }
.p360-cvb__stage { width: 100%; max-width: 794px; position: relative; overflow: hidden; }
.p360-cvb__stage .p360-cvt { position: absolute; left: 0; top: 0; }
.p360-cvb__side { background: #fff; border-radius: 16px; padding: var(--p360-sp-5); box-shadow: var(--p360-shadow-sm); position: sticky; top: calc(var(--p360-header-h) + 16px); }
body.p360-has-topbar .p360-cvb__side { top: calc(var(--p360-header-h) + var(--p360-topbar-h) + 16px); }
.p360-cvb__side h2 { font-size: var(--p360-fs-md); margin: 0 0 var(--p360-sp-3); }
.p360-cvb__tpls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p360-cvb__tpl { display: flex; flex-direction: column; gap: 4px; font-size: var(--p360-fs-xs); color: var(--p360-text-muted); text-align: center; }
.p360-cvb__tpl img { width: 100%; aspect-ratio: 794 / 1123; object-fit: cover; object-position: top; border-radius: 6px; border: 2px solid var(--p360-border); background: #eef2f8; }
.p360-cvb__tpl:hover img, .p360-cvb__tpl.is-active img { border-color: var(--p360-acc-blue); }
.p360-cvb__tpl.is-active { color: var(--p360-acc-blue); font-weight: 700; }
.p360-cvb__tips { margin-top: var(--p360-sp-5); font-size: var(--p360-fs-sm); color: var(--p360-text-muted); }
.p360-cvb__tips ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* ================= Responsive ================= */
@media (max-width: 1279px) {
  .p360-acc-perkbar__grid { grid-template-columns: repeat(2, 1fr); }
  .p360-acc-welcome__grid { min-height: 480px; }
  .p360-cvb__body { grid-template-columns: 1fr; }
  .p360-cvb__side { position: static; }
  .p360-cvb__tpls { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1023px) {
  .p360-acc-split { grid-template-columns: 1fr; }
  .p360-acc-split__side { padding: var(--p360-sp-8) var(--p360-sp-4); }
  .p360-acc-split__headline { font-size: var(--p360-fs-2xl); }
  .p360-acc-split__img { max-width: 380px; }
  .p360-uvlist { grid-template-columns: 1fr; }
  .p360-uvlist__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--p360-sp-4); align-items: start; position: static; max-height: none; overflow: visible; padding: 0; margin: 0; }
  .p360-acc-edit__side { position: static; max-height: none; overflow: visible; }
  .p360-uvlist__nav { margin-top: 0; }
  .p360-acc-edit { grid-template-columns: 1fr; }
  .p360-cvlist__grid { grid-template-columns: repeat(2, 1fr); }
  .p360-acc-welcome__grid { grid-template-columns: 1fr; text-align: center; }
  .p360-acc-welcome__text p { margin-left: auto; margin-right: auto; }
  .p360-acc-welcome__actions { justify-content: center; }
  .p360-acc-welcome__img img { margin: 0 auto; max-width: 520px; }
  .p360-acc-exp__head, .p360-acc-exp__row { grid-template-columns: 200px 1fr 1fr 30px; }
}
@media (max-width: 767px) {
  .p360-acc-page { padding: var(--p360-sp-5) 0 var(--p360-sp-8); }
  .p360-acc-card { padding: var(--p360-sp-6) var(--p360-sp-4); border-radius: 18px; }
  .p360-acc-row, .p360-acc-card--login .p360-acc-row { grid-template-columns: 1fr; gap: 6px; }
  .p360-acc-submit, .p360-acc-card__btn, .p360-acc-apply__submit, .p360-acc-card--login .p360-acc-submit { min-width: 0; width: 100%; }
  .p360-acc-choose__grid, .p360-acc-cols, .p360-acc-perkbar__grid, .p360-cvlist__grid, .p360-uvlist__side { grid-template-columns: 1fr; }
  .p360-acc-split__perks { grid-template-columns: 1fr; }
  .p360-acc-split__img--sm { display: none; }
  .p360-acc-login-opts { flex-direction: column; gap: var(--p360-sp-3); }
  .p360-acc-profile__card { padding: var(--p360-sp-5) var(--p360-sp-4); border-radius: 16px; }
  .p360-acc-profile__actions .p360-btn, .p360-acc-welcome__actions .p360-btn { width: 100%; }
  .p360-acc-exp__head { display: none; }
  .p360-acc-exp__row { grid-template-columns: 1fr 30px; }
  .p360-acc-exp__dates { grid-column: 1; }
  .p360-acc-multi__menu { columns: 1; }
  .p360-acc-edit__main { padding: var(--p360-sp-5) var(--p360-sp-4); }
  .p360-acc-radios { gap: var(--p360-sp-5); flex-wrap: wrap; }
  .p360-uvjob { grid-template-columns: 72px 1fr; padding: var(--p360-sp-4); }
  .p360-uvjob__logo { width: 72px; height: 72px; border-radius: 10px; }
  .p360-uvjob__side { grid-column: 1 / 3; flex-direction: row; align-items: center; min-height: 0; }
  .p360-acc-drop__zone { flex-direction: column; text-align: center; }
  .p360-cvlist__band { flex-direction: column; align-items: stretch; }
  .p360-cvlist__band .p360-input { max-width: none; }
  .p360-cvb__bar-right .p360-btn { flex: 1; }
  .p360-cvb__tpls { grid-template-columns: repeat(3, 1fr); }
  .p360-acc-card__heading--red { margin-top: 60px; }
}

/* ================= Chỉnh theo góp ý chủ dự án 04/11 – sát file thiết kế hơn ================= */
/* Chọn hình thức đăng ký / Đăng ký: chữ cột xanh phải trắng (reset h1/h2 của p360-base đang tô navy) */
.p360-acc-split__headline, .p360-acc-split__welcome { color: #fff; }
.p360-acc-split__headline { font-size: 44px; line-height: 1.2; }
.p360-acc-split__pill { font-size: 26px; padding: 16px 56px; border-radius: 14px; }
.p360-acc-choose__card { border-radius: 22px; padding: var(--p360-sp-10) var(--p360-sp-6) var(--p360-sp-8); }
.p360-acc-choose__card .p360-btn { border-radius: 10px; min-height: 50px; padding: 0 34px; }
/* Đăng nhập: thẻ to, bo góc lớn, logo giữa, nút Facebook + dòng "Hoặc đăng nhập email" như mockup 01-05 */
.p360-acc-card--login { max-width: 760px; border-radius: 48px; padding: 56px 64px 48px; }
.p360-acc-card__logo { display: flex; justify-content: center; }
.p360-acc-card__logo img { height: 66px; }
.p360-acc-card__title { font-size: 34px; margin: var(--p360-sp-5) 0 var(--p360-sp-6); }
.p360-acc-fb { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 520px; margin: 0 auto var(--p360-sp-4); min-height: 52px; border: 1.5px solid var(--p360-acc-blue); border-radius: 999px; color: #4b5563; font-weight: 700; font-size: var(--p360-fs-md); background: #fff; }
.p360-acc-fb svg { width: 26px; height: 26px; color: #1877f2; flex-shrink: 0; }
.p360-acc-fb:hover { background: var(--p360-primary-100); color: #4b5563; }
.p360-acc-or { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 0 auto var(--p360-sp-5); color: var(--p360-text-muted); font-size: var(--p360-fs-sm); white-space: nowrap; }
.p360-acc-or::before, .p360-acc-or::after { content: ""; flex: 1; height: 1px; background: var(--p360-primary-200); }
.p360-acc-card--login .p360-acc-form { max-width: 520px; }
.p360-acc-card--login .p360-acc-row { grid-template-columns: 150px 1fr; margin-bottom: var(--p360-sp-5); }
.p360-acc-card--login .p360-acc-row .p360-input { min-height: 44px; }
.p360-acc-card--login .p360-acc-submit { min-width: 320px; min-height: 54px; font-size: var(--p360-fs-md); }
.p360-acc-card--login .p360-acc-login-opts { gap: var(--p360-sp-10); margin: 0 0 var(--p360-sp-6); }
.p360-acc-foot--sm { color: var(--p360-text-muted); }
@media (max-width: 767px) {
  .p360-acc-card--login { padding: var(--p360-sp-8) var(--p360-sp-4); border-radius: 24px; }
  .p360-acc-card__title { font-size: var(--p360-fs-xl); }
  .p360-acc-split__headline { font-size: var(--p360-fs-2xl); }
  .p360-acc-split__pill { font-size: var(--p360-fs-lg); padding: 12px 28px; }
}

/* Đăng nhập Facebook (04/11) – dòng ghi chú dưới nút */
.p360-acc-fb__note { text-align: center; color: var(--p360-text-muted); font-size: var(--p360-fs-xs); margin: -6px 0 var(--p360-sp-4); }

/* Claude Code sửa (2026-11-04): Đăng nhập / Đăng ký chuyển sang layout có header+footer → chiều cao trừ header, bỏ chiếm 100vh */
.p360-acc-center { min-height: 0; align-items: flex-start; padding: 72px var(--p360-sp-4) 96px; }
.p360-acc-split, .p360-acc-split--full { min-height: 0; }
.p360-acc-card--login { margin: 0 auto; }
@media (max-width: 767px) { .p360-acc-center { padding: var(--p360-sp-6) var(--p360-sp-4) var(--p360-sp-10); } }