/* ============================================================
   Pharma360 2026 – TRANG CHỦ (Views/P360/Home/P360Index.cshtml + partial _P360Home*)
   Kích thước đo theo mockup 1920px (khung nội dung 1480px, xem docs/THIET-KE-MOI-2026.md).
   Responsive: ≤1599 (laptop 1366/1440/1536), ≤1279 (iPad ngang/laptop nhỏ), ≤1023 (iPad dọc), ≤767 (điện thoại).
   ============================================================ */

/* ================= HERO ================= */
.p360-hhero { padding: 36px 0 52px; }
.p360-hhero .p360-hero__title { font-size: 30px; margin-bottom: 30px; }

.p360-search {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--p360-shadow-lg);
}
.p360-search__field { position: relative; display: flex; align-items: center; height: 62px; min-width: 270px; border: 1.5px solid var(--p360-border); border-radius: 14px; background: #fff; }
.p360-search__field--grow { flex: 1 1 auto; }
.p360-search__field:focus-within { border-color: var(--p360-primary); box-shadow: 0 0 0 3px rgba(33, 118, 235, 0.15); }
.p360-search__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--p360-primary); pointer-events: none; }
.p360-search__ico svg { width: 24px; height: 24px; }
.p360-search__select, .p360-search__input {
  width: 100%; height: 100%; border: 0; background: transparent; outline: 0;
  padding: 0 16px 0 54px; font: inherit; font-weight: 600; font-size: 19px; color: var(--p360-text);
}
.p360-search__input::placeholder { color: var(--p360-text-light); font-weight: 500; }
.p360-search__select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232176eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.p360-search__btn { min-height: 62px; padding: 0 36px; border-radius: 14px; font-size: 20px; }

.p360-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 28px; color: #fff; font-weight: 600; font-size: 19px; }
.p360-search__popular .p360-chip { font-size: 16px; padding: 7px 18px; }

.p360-hhero__grid { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 26px; align-items: stretch; }

/* Card ngành nghề */
.p360-catcard { background: #fff; border-radius: 20px; box-shadow: var(--p360-shadow-md); display: flex; flex-direction: column; padding-top: 12px; min-height: 100%; }
.p360-catcard__list { flex: 1 1 auto; }
.p360-catcard__list li { display: none; }
.p360-catcard__list li.is-show { display: block; }
.p360-catcard__list a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 26px 11px 30px; color: var(--p360-text); font-weight: 500; font-size: 19px; }
.p360-catcard__list a:hover { color: var(--p360-primary); background: var(--p360-primary-100); }
.p360-catcard__list svg { width: 20px; height: 20px; color: var(--p360-text-light); flex-shrink: 0; }
.p360-catcard__list a:hover svg { color: var(--p360-primary); }
.p360-catcard__foot { border-top: 1px solid var(--p360-border); padding: 16px 26px 16px 30px; display: flex; align-items: center; justify-content: space-between; }
.p360-catcard__foot > a { font-weight: 700; color: var(--p360-primary); font-size: 19px; }
.p360-catcard__nav { display: inline-flex; gap: 8px; }
.p360-catcard__nav button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--p360-primary); color: var(--p360-primary); display: inline-flex; align-items: center; justify-content: center; }
.p360-catcard__nav button:hover { background: var(--p360-primary); color: #fff; }
.p360-catcard__nav svg { width: 15px; height: 15px; }

/* Slider hero */
.p360-hhero__slider { min-width: 0; }
.p360-hslider { border-radius: 20px; overflow: hidden; height: 100%; box-shadow: var(--p360-shadow-md); background: #fff; }
.p360-hslider .p360-carousel__viewport, .p360-hslider .p360-carousel__track, .p360-hslider .p360-carousel__item { height: 100%; }
.p360-hslider .p360-carousel__track { gap: 0; }
.p360-hslider .p360-carousel__item a { display: block; height: 100%; }
.p360-hslider img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1933 / 814; }
.p360-hslider .p360-carousel__dots { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; z-index: 2; }
.p360-hslider .p360-carousel__arrow { opacity: 0; }
.p360-hslider:hover .p360-carousel__arrow { opacity: 1; }
.p360-hslider--empty { display: flex; align-items: center; justify-content: center; min-height: 260px; color: var(--p360-text-muted); }

/* ================= Ô THỐNG KÊ ================= */
.p360-hstats { padding: 40px 0 8px; }
.p360-hstats .p360-grid { gap: 24px; }
.p360-hstats .p360-stat { gap: 20px; padding: 24px 26px; border-radius: 18px; background: #f4f9ff; border: 1.5px solid #c9ddfb; }
.p360-hstats .p360-stat__icon { width: 64px; height: 64px; background: #dcebff; color: var(--p360-primary); }
.p360-hstats .p360-stat__icon svg { width: 32px; height: 32px; }
.p360-hstats .p360-stat__icon--red { background: #ffe3e3; color: #e53935; }
.p360-hstats .p360-stat__icon--yellow { background: #fff3c4; color: #f0b400; }
.p360-hstats .p360-stat__icon--green { background: #ddf5e6; color: #2fae5b; }
.p360-hstats .p360-stat__value { font-size: 26px; margin-bottom: 2px; }
.p360-hstats .p360-stat__label { font-size: 19px; font-weight: 700; line-height: 1.3; }
.p360-hstats .p360-stat__sub { font-size: 17px; line-height: 1.35; margin-top: 2px; }

/* ================= NHÀ TUYỂN DỤNG HÀNG ĐẦU ================= */
.p360-employers { padding: 32px 0 0; }
.p360-employers__card { background-color: var(--p360-bg-section); background-size: cover; background-position: center; border-radius: 28px; padding: 56px 64px 52px; }
.p360-employers__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
.p360-employers__eyebrow { font-size: 36px; font-weight: 700; color: var(--p360-primary-dark); text-transform: uppercase; margin: 0; line-height: 1.1; }
.p360-employers__title { font-size: 56px; color: var(--p360-primary); text-transform: uppercase; margin: 0 0 20px; line-height: 1.1; }
.p360-employers__desc { color: var(--p360-primary-dark); font-weight: 600; font-size: 20px; max-width: 470px; margin-bottom: 28px; }
.p360-employers__bullets li { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.p360-employers__bullets b { display: block; color: var(--p360-primary-dark); font-size: 20px; }
.p360-employers__bullets small { color: var(--p360-text-muted); font-size: 18px; }
.p360-employers__ico { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--p360-primary); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--p360-shadow-sm); flex-shrink: 0; }
.p360-employers__ico svg { width: 30px; height: 30px; }
.p360-employers__intro .p360-btn { min-height: 56px; padding: 0 32px; font-size: 20px; margin-top: 12px; }
.p360-employers__top { text-align: center; }
.p360-employers__pill { display: inline-block; background: var(--p360-primary); color: #fff; font-weight: 700; text-transform: uppercase; border-radius: var(--p360-radius-pill); padding: 18px 40px; font-size: 22px; margin-bottom: 76px; box-shadow: var(--p360-shadow-md); }
.p360-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: end; }
.p360-podium__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; background: #fff; border-radius: 22px; padding: 40px 16px 26px; box-shadow: var(--p360-shadow-md); color: var(--p360-text); transition: transform var(--p360-ease), box-shadow var(--p360-ease); }
.p360-podium__card:hover { transform: translateY(-4px); box-shadow: var(--p360-shadow-lg); color: var(--p360-text); }
.p360-podium__card--1 { padding-top: 48px; padding-bottom: 32px; margin-top: -30px; }
/* Huy chương (ảnh images/p360/p360-medal-N.png) nằm trong mép trái card, nhô lên trên ~1/3 chiều cao huy chương như mockup.
   Khoảng cách pill → card (margin-bottom pill) phải ≥ độ nhô card hạng 1 + độ nhô huy chương để không đè chữ. */
.p360-medal { position: absolute; top: -26px; left: 10px; width: 54px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18)); z-index: 2; }
.p360-medal img { width: 100%; height: auto; display: block; }
.p360-podium__card--1 .p360-medal { width: 66px; top: -32px; left: 10px; }
.p360-podium__logo-wrap { position: relative; display: inline-block; }
.p360-podium__logo { width: 120px; height: 120px; border-radius: 50%; background: #fff; border: 4px solid var(--p360-primary-100); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 1; }
.p360-podium__card--1 .p360-podium__logo { width: 144px; height: 144px; border-color: var(--p360-primary-200); }
/* Logo phủ kín hình tròn (cắt giữa, không viền trắng) theo yêu cầu chủ dự án 23/09; logo ngang sẽ bị cắt 2 bên */
.p360-podium__logo img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
/* Vòng nguyệt quế (ảnh images/p360/p360-laurel.png, 2 nhánh trong 1 ảnh) ôm nửa dưới logo hạng 1, nằm gọn trong card.
   bottom 3px / width 150% là số chủ dự án chỉnh trong DevTools 23/09 */
.p360-laurel { position: absolute; left: 50%; bottom: 3px; width: 150%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.p360-laurel img { width: 100%; height: auto; display: block; }
.p360-podium__name { font-size: 18px; text-align: center; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p360-podium .p360-stars { font-size: 26px; letter-spacing: 4px; line-height: 1; }
.p360-podium__link { display: inline-flex; align-items: center; gap: 8px; background: var(--p360-primary-100); color: var(--p360-primary); font-weight: 700; border-radius: 10px; padding: 9px 20px; font-size: 17px; }
.p360-podium__link svg { width: 20px; height: 20px; }
.p360-podium__card:hover .p360-podium__link { background: var(--p360-primary); color: #fff; }
/* Dải logo NTD còn lại: nằm ngoài thẻ, mũi tên nằm ngoài khung nội dung như mockup */
.p360-logos { margin-top: 32px; }
.p360-logos .p360-carousel__track { gap: 24px; }
.p360-logos .p360-carousel__arrow, .p360-press .p360-carousel__arrow { width: 46px; height: 46px; border: 0; box-shadow: none; background: transparent; color: var(--p360-primary); }
.p360-logos .p360-carousel__arrow:hover, .p360-press .p360-carousel__arrow:hover { background: var(--p360-primary-100); color: var(--p360-primary); }
.p360-logos .p360-carousel__arrow svg, .p360-press .p360-carousel__arrow svg { width: 28px; height: 28px; stroke-width: 3; }
.p360-logos .p360-carousel__arrow--prev, .p360-press .p360-carousel__arrow--prev { left: -68px; }
.p360-logos .p360-carousel__arrow--next, .p360-press .p360-carousel__arrow--next { right: -68px; }
.p360-logos__item { display: flex; align-items: center; justify-content: center; height: 165px; background: #fff; border: 1px solid var(--p360-border); border-radius: 18px; padding: 18px; transition: box-shadow var(--p360-ease), transform var(--p360-ease); }
.p360-logos__item:hover { box-shadow: var(--p360-shadow-md); transform: translateY(-2px); }
.p360-logos__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ================= THỊ TRƯỜNG VIỆC LÀM ================= */
.p360-market { padding: 36px 0 0; }
.p360-market__card { background-color: var(--p360-navy-dash); background-size: cover; background-position: center; color: #fff; border-radius: 28px; padding: 40px 48px 44px; }
.p360-market__head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.p360-market__head h2 { color: #fff; font-size: 26px; margin: 0; }
.p360-market__date { color: var(--p360-yellow-soft); font-weight: 700; font-size: 26px; }
.p360-market__top { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: center; }
.p360-market__mascot img { width: 100%; max-width: 330px; height: auto; margin: 0 auto; display: block; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); }
.p360-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.p360-kpi { background: #fff; color: var(--p360-text); border-radius: 14px; padding: 30px 26px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--p360-shadow-md); }
.p360-kpi b { font-size: 46px; color: var(--p360-primary); line-height: 1; letter-spacing: -0.01em; }
.p360-kpi span { font-weight: 700; color: var(--p360-text); font-size: 20px; }
.p360-market__charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.p360-chart { background: #fff; color: var(--p360-text); border-radius: 18px; padding: 22px 26px 18px; box-shadow: var(--p360-shadow-md); min-width: 0; }
.p360-chart__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.p360-chart__head > div { flex: 1 1 auto; min-width: 0; }
.p360-chart__head b { display: block; font-size: 20px; color: var(--p360-text); }
.p360-chart__head small { display: block; color: var(--p360-text-muted); font-size: 15px; }
.p360-chart__ico { width: 40px; height: 40px; border-radius: 50%; background: var(--p360-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p360-chart__ico svg { width: 22px; height: 22px; }
.p360-chart__select { border: 1.5px solid var(--p360-primary); color: var(--p360-primary); border-radius: 10px; padding: 8px 12px; font-weight: 600; font-size: 16px; background: #fff; }
.p360-chart__body { min-height: 280px; }
.p360-chart__body svg { display: block; width: 100%; height: auto; font-family: var(--p360-font); }
.p360-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 14px; color: var(--p360-text-muted); margin-top: 8px; }
.p360-chart__legend span:not(.p360-chart__dot) { display: inline-flex; align-items: center; gap: 6px; }
.p360-chart__dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

/* ================= VIỆC LÀM ĐƯỢC ƯA CHUỘNG ================= */
.p360-featured { padding: 56px 0 40px; }
/* 2 cột cao bằng nhau (stretch): danh sách 5 card tự giãn đều để đáy danh sách ngang đáy banner Tạo CV bên trái */
.p360-featured__grid { display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 40px; align-items: stretch; }
.p360-featured__eyebrow { font-size: 36px; font-weight: 700; color: var(--p360-primary-dark); text-transform: uppercase; margin: 0; line-height: 1.1; }
.p360-featured__title { font-size: 48px; color: var(--p360-primary); text-transform: uppercase; margin: 0 0 16px; line-height: 1.1; white-space: nowrap; }
.p360-featured__desc { color: var(--p360-primary-dark); font-weight: 500; font-size: 20px; margin-bottom: 28px; max-width: 400px; }
.p360-featured__intro .p360-btn { min-height: 56px; padding: 0 32px; font-size: 20px; }
.p360-featured__banner { display: block; margin-top: 36px; border-radius: 20px; overflow: hidden; box-shadow: var(--p360-shadow-md); }
.p360-featured__banner img { width: 100%; height: auto; display: block; }
.p360-featured__list { display: flex; flex-direction: column; gap: 16px; }
/* Card theo mockup: 3 hàng chữ (tiêu đề 1 dòng, công ty, chip) trải đều theo chiều cao ô logo; lương ngang tiêu đề, nút ngang chip */
.p360-featured .p360-job { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 22px; padding: 20px 24px; border-radius: 18px; border: 1.5px solid #c9ddfb; align-items: center; flex: 1 1 auto; max-height: 200px; }
.p360-featured .p360-logo-box { width: 110px; height: 110px; border-radius: 14px; background: #fff; border: 1px solid var(--p360-border); }
.p360-featured .p360-logo-box img { object-fit: contain; padding: 8px; }
.p360-featured .p360-job__body { gap: 10px; justify-content: center; min-height: 110px; }
.p360-featured .p360-job__title { font-size: 19px; line-height: 1.3; }
.p360-featured .p360-job__title a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p360-featured .p360-job__company { font-size: 17px; color: var(--p360-text); }
.p360-featured .p360-job__row { gap: 10px 12px; }
.p360-featured .p360-job__row .p360-chip { font-size: 16px; font-weight: 500; padding: 6px 18px; border-radius: 999px; background: #e9eef5; color: var(--p360-text-muted); }
.p360-featured .p360-job__row .p360-chip--active { background: #c9ddfb; color: var(--p360-primary-dark); }
.p360-featured .p360-job__row .p360-chip--red { background: #ffd9d9; color: var(--p360-red-dark); font-weight: 700; }
.p360-featured .p360-job__side { justify-content: space-between; gap: 12px; min-height: 110px; padding-top: 0; }
.p360-featured .p360-salary { font-size: 18px; gap: 8px; }
.p360-featured .p360-salary__ico { width: 22px; height: 22px; font-size: 13px; }
.p360-featured .p360-job__side .p360-btn { min-height: 42px; padding: 0 24px; font-size: 17px; }

/* ================= SỨ MỆNH ================= */
.p360-mission { padding: 32px 0 8px; }
.p360-mission__img { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--p360-shadow-md); }

/* ================= BÁO CHÍ ================= */
.p360-press { padding: 48px 0 24px; }
.p360-press .p360-title { font-size: 34px; text-transform: uppercase; margin-bottom: 40px; }
.p360-press .p360-carousel__track { gap: 30px; }
.p360-press__card { display: flex; flex-direction: column; gap: 18px; height: 100%; color: var(--p360-text); }
.p360-press__card:hover { color: var(--p360-primary); }
.p360-press__logo { height: 130px; display: flex; align-items: center; justify-content: center; background: #eaf3ff; border-radius: 14px; overflow: hidden; padding: 16px; transition: box-shadow var(--p360-ease), transform var(--p360-ease); }
.p360-press__card:hover .p360-press__logo { box-shadow: var(--p360-shadow-md); transform: translateY(-2px); }
.p360-press__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.p360-press__title { font-size: 18px; font-weight: 500; line-height: 1.5; text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ================= CẨM NANG ================= */
.p360-hnews .p360-post__thumb { aspect-ratio: 16 / 10; }
.p360-hnews .p360-post__title { font-size: 18px; }

/* ================= RESPONSIVE ================= */
/* Laptop 1366 / 1440 / 1536 */
@media (max-width: 1599px) {
  .p360-hhero { padding: 28px 0 40px; }
  .p360-hhero .p360-hero__title { font-size: 26px; margin-bottom: 22px; }
  .p360-search { padding: 12px; gap: 12px; border-radius: 18px; }
  .p360-search__field { height: 54px; min-width: 220px; border-radius: 12px; }
  .p360-search__ico { left: 14px; width: 20px; height: 20px; }
  .p360-search__ico svg { width: 20px; height: 20px; }
  .p360-search__select, .p360-search__input { font-size: 16px; padding-left: 44px; }
  .p360-search__btn { min-height: 54px; font-size: 17px; padding: 0 28px; border-radius: 12px; }
  .p360-search__popular { font-size: 16px; margin: 18px 0 24px; }
  .p360-search__popular .p360-chip { font-size: 14px; padding: 6px 14px; }
  .p360-hhero__grid { grid-template-columns: 330px minmax(0, 1fr); gap: 24px; }
  .p360-catcard { border-radius: 16px; padding-top: 8px; }
  .p360-catcard__list a { font-size: 16px; padding: 9px 22px 9px 26px; }
  .p360-catcard__list svg { width: 18px; height: 18px; }
  .p360-catcard__foot { padding: 12px 22px 12px 26px; }
  .p360-catcard__foot > a { font-size: 16px; }
  .p360-catcard__nav button { width: 30px; height: 30px; }
  .p360-hslider { border-radius: 16px; }
  .p360-hstats { padding: 28px 0 8px; }
  .p360-hstats .p360-grid { gap: 16px; }
  .p360-hstats .p360-stat { padding: 18px 20px; gap: 16px; }
  .p360-hstats .p360-stat__icon { width: 54px; height: 54px; }
  .p360-hstats .p360-stat__icon svg { width: 26px; height: 26px; }
  .p360-hstats .p360-stat__value { font-size: 22px; }
  .p360-hstats .p360-stat__label { font-size: 16px; }
  .p360-hstats .p360-stat__sub { font-size: 14px; }
  .p360-employers { padding-top: 24px; }
  .p360-employers__card, .p360-market__card { padding: 40px 40px 36px; border-radius: 22px; }
  .p360-employers__grid { gap: 32px; }
  .p360-employers__eyebrow, .p360-featured__eyebrow { font-size: 28px; }
  .p360-employers__title { font-size: 44px; margin-bottom: 14px; }
  .p360-employers__desc, .p360-featured__desc, .p360-employers__bullets b { font-size: 17px; }
  .p360-employers__desc { margin-bottom: 20px; }
  .p360-employers__bullets small { font-size: 15px; }
  .p360-employers__bullets li { gap: 14px; margin-bottom: 14px; }
  .p360-employers__ico { width: 48px; height: 48px; }
  .p360-employers__ico svg { width: 24px; height: 24px; }
  .p360-employers__intro .p360-btn, .p360-featured__intro .p360-btn { min-height: 48px; font-size: 17px; padding: 0 26px; }
  .p360-employers__pill { font-size: 17px; padding: 14px 28px; margin-bottom: 62px; }
  .p360-podium { gap: 18px; }
  .p360-podium__card { padding: 34px 12px 20px; gap: 10px; }
  .p360-podium__card--1 { padding-top: 42px; padding-bottom: 28px; margin-top: -24px; }
  .p360-medal { width: 46px; top: -22px; left: 8px; }
  .p360-podium__card--1 .p360-medal { width: 56px; top: -27px; left: 8px; }
  .p360-podium__logo { width: 100px; height: 100px; }
  .p360-podium__card--1 .p360-podium__logo { width: 120px; height: 120px; }
  .p360-laurel { width: 150%; }
  .p360-podium__link { font-size: 16px; padding: 8px 18px; }
  .p360-podium__link svg { width: 16px; height: 16px; }
  .p360-podium__name { font-size: 16px; }
  .p360-podium .p360-stars { font-size: 22px; letter-spacing: 3px; }
  .p360-podium__link { font-size: 16px; padding: 8px 18px; }
  .p360-logos { margin-top: 26px; }
  .p360-logos .p360-carousel, .p360-press .p360-carousel { padding: 0 44px; }
  .p360-logos .p360-carousel__arrow--prev, .p360-press .p360-carousel__arrow--prev { left: -6px; }
  .p360-logos .p360-carousel__arrow--next, .p360-press .p360-carousel__arrow--next { right: -6px; }
  .p360-logos .p360-carousel__track { gap: 18px; }
  .p360-logos__item { height: 130px; border-radius: 14px; }
  .p360-market { padding-top: 28px; }
  .p360-market__head h2, .p360-market__date { font-size: 22px; }
  .p360-market__top { grid-template-columns: 250px minmax(0, 1fr); }
  .p360-market__mascot img { max-width: 250px; }
  .p360-kpis { gap: 16px; }
  .p360-kpi { padding: 22px 20px; gap: 8px; }
  .p360-kpi b { font-size: 36px; }
  .p360-kpi span { font-size: 17px; }
  .p360-market__charts { gap: 20px; margin-top: 22px; }
  .p360-chart { padding: 18px 20px 14px; }
  .p360-chart__head b { font-size: 17px; }
  .p360-chart__head small { font-size: 13px; }
  .p360-chart__body { min-height: 250px; }
  .p360-featured { padding: 40px 0 24px; }
  .p360-featured__grid { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; }
  .p360-featured__title { font-size: 38px; }
  .p360-featured__banner { margin-top: 26px; }
  .p360-featured__list { gap: 12px; }
  .p360-featured .p360-job { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 18px 20px; border-radius: 16px; }
  .p360-featured .p360-logo-box { width: 96px; height: 96px; border-radius: 12px; }
  .p360-featured .p360-job__body { min-height: 96px; gap: 8px; }
  .p360-featured .p360-job__side { min-height: 96px; gap: 10px; }
  .p360-featured .p360-job__title { font-size: 17px; }
  .p360-featured .p360-job__company { font-size: 16px; }
  .p360-featured .p360-job__row .p360-chip { font-size: 15px; padding: 6px 16px; }
  .p360-featured .p360-salary { font-size: 17px; }
  .p360-featured .p360-salary__ico { width: 20px; height: 20px; font-size: 12px; }
  .p360-featured .p360-job__side .p360-btn { min-height: 40px; font-size: 16px; padding: 0 22px; }
  .p360-mission { padding: 24px 0 4px; }
  .p360-mission__img { border-radius: 18px; }
  .p360-press { padding: 36px 0 16px; }
  .p360-press .p360-title { font-size: 28px; margin-bottom: 28px; }
  .p360-press .p360-carousel__track { gap: 20px; }
  .p360-press__logo { height: 100px; padding: 12px; }
  .p360-press__title { font-size: 15px; }
  .p360-hnews .p360-post__title { font-size: 16px; }
}

/* iPad ngang / laptop nhỏ (1024–1279): tìm việc xuống 2 hàng, slider lên trên card ngành nghề, thống kê 2 cột */
@media (max-width: 1279px) {
  .p360-search { flex-wrap: wrap; }
  .p360-search__field { min-width: calc(50% - 6px); }
  .p360-search__field--grow { min-width: 100%; }
  .p360-search__btn { width: 100%; }
  .p360-hhero__grid { grid-template-columns: minmax(0, 1fr); }
  .p360-catcard { order: 2; min-height: 0; }
  .p360-hhero__slider { order: 1; }
  .p360-hstats .p360-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-employers__card, .p360-market__card { padding: 32px 28px; }
  .p360-employers__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
  .p360-employers__title { font-size: 38px; }
  .p360-employers__pill { font-size: 15px; padding: 12px 22px; }
  .p360-podium { gap: 14px; }
  .p360-podium__logo { width: 96px; height: 96px; }
  .p360-podium__card--1 .p360-podium__logo { width: 116px; height: 116px; }
  .p360-laurel { display: none; }
  .p360-podium__name { font-size: 15px; }
  .p360-podium .p360-stars { font-size: 20px; }
  .p360-podium__link { font-size: 14px; padding: 6px 14px; }
  .p360-market__top { grid-template-columns: 200px minmax(0, 1fr); }
  .p360-market__mascot img { max-width: 200px; }
  .p360-kpi b { font-size: 30px; }
  .p360-kpi span { font-size: 15px; }
  .p360-featured__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
  .p360-featured__title { font-size: 30px; }
  .p360-featured .p360-job { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 16px; padding: 16px 18px; }
  .p360-featured .p360-logo-box { width: 90px; height: 90px; }
  .p360-featured .p360-job__body, .p360-featured .p360-job__side { min-height: 90px; }
  .p360-featured .p360-job__title { font-size: 16px; }
}

/* iPad dọc (768–1023) */
@media (max-width: 1023px) {
  .p360-employers__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p360-employers__intro { text-align: center; }
  .p360-employers__desc { margin-left: auto; margin-right: auto; }
  .p360-employers__bullets li { justify-content: center; text-align: left; }
  .p360-employers__top { padding-top: 8px; }
  .p360-podium__logo { width: 110px; height: 110px; }
  .p360-podium__card--1 .p360-podium__logo { width: 130px; height: 130px; }
  .p360-market__top { grid-template-columns: minmax(0, 1fr); }
  .p360-market__mascot { display: none; }
  .p360-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p360-market__charts { grid-template-columns: minmax(0, 1fr); }
  .p360-featured__grid { grid-template-columns: minmax(0, 1fr); }
  /* iPad dọc: chữ giới thiệu bên trái, banner CV bên phải; hàng cuối 1fr để 3 hàng chữ không bị giãn */
  .p360-featured__intro { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto auto 1fr; column-gap: 24px; row-gap: 0; align-items: start; }
  .p360-featured__intro .p360-featured__banner { grid-row: 1 / 5; grid-column: 2; margin-top: 0; align-self: center; }
  .p360-featured__intro .p360-featured__desc { margin-bottom: 20px; }
  .p360-featured .p360-job { grid-template-columns: 90px minmax(0, 1fr); max-height: none; flex: 0 0 auto; }
  .p360-featured .p360-job__body { min-height: 90px; gap: 8px; justify-content: center; }
  .p360-featured .p360-job__side { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; padding-top: 0; }
  .p360-hnews .p360-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Điện thoại (≤767) */
@media (max-width: 767px) {
  .p360-hhero { padding: 20px 0 28px; }
  .p360-hhero .p360-hero__title { font-size: var(--p360-fs-lg); margin-bottom: 16px; }
  .p360-search { padding: 10px; gap: 8px; border-radius: 14px; }
  .p360-search__field { min-width: 100%; height: 48px; }
  .p360-search__btn { min-height: 48px; }
  .p360-search__popular { font-size: 14px; gap: 8px; margin: 14px 0 18px; }
  .p360-hhero__grid { gap: 16px; }
  .p360-hslider img { aspect-ratio: 1933 / 814; }
  .p360-catcard__list a { font-size: 15px; padding: 9px 16px 9px 18px; }
  .p360-catcard__foot { padding: 10px 16px 10px 18px; }
  .p360-hstats { padding-top: 20px; }
  .p360-hstats .p360-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .p360-hstats .p360-stat { padding: 14px 16px; gap: 14px; }
  .p360-hstats .p360-stat__icon { width: 48px; height: 48px; }
  .p360-hstats .p360-stat__value { font-size: 20px; }
  .p360-hstats .p360-stat__label { font-size: 15px; }
  .p360-hstats .p360-stat__sub { font-size: 13px; }
  .p360-employers { padding-top: 16px; }
  .p360-employers__card, .p360-market__card { padding: 24px 14px; border-radius: 16px; }
  .p360-employers__eyebrow, .p360-featured__eyebrow { font-size: 22px; }
  .p360-employers__title, .p360-featured__title { font-size: 32px; }
  .p360-employers__desc, .p360-featured__desc { font-size: 15px; }
  .p360-employers__bullets b { font-size: 15px; }
  .p360-employers__bullets small { font-size: 13px; }
  .p360-employers__pill { font-size: 13px; padding: 10px 16px; margin-bottom: 40px; }
  .p360-podium { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .p360-podium__card { padding: 28px 6px 14px; border-radius: 14px; gap: 6px; }
  .p360-podium__card--1 { padding-top: 34px; padding-bottom: 20px; margin-top: -10px; }
  .p360-medal, .p360-podium__card--1 .p360-medal { width: 34px; top: -14px; left: 4px; }
  .p360-podium__logo, .p360-podium__card--1 .p360-podium__logo { width: 64px; height: 64px; border-width: 3px; }
  .p360-podium__name { font-size: 12px; min-height: 2.6em; }
  .p360-podium .p360-stars { font-size: 13px; letter-spacing: 0; }
  .p360-podium__link { font-size: 11px; padding: 4px 8px; }
  .p360-logos .p360-carousel, .p360-press .p360-carousel { padding: 0 30px; }
  .p360-logos .p360-carousel__arrow--prev, .p360-press .p360-carousel__arrow--prev { left: -10px; }
  .p360-logos .p360-carousel__arrow--next, .p360-press .p360-carousel__arrow--next { right: -10px; }
  .p360-logos .p360-carousel__track { gap: 12px; }
  .p360-logos__item { height: 90px; padding: 10px; }
  .p360-market { padding-top: 20px; }
  .p360-market__head { gap: 10px; margin-bottom: 14px; }
  .p360-market__head h2, .p360-market__date { font-size: 18px; }
  .p360-kpis { gap: 10px; }
  .p360-kpi { padding: 16px 14px; gap: 6px; border-radius: 12px; }
  .p360-kpi b { font-size: 26px; }
  .p360-kpi span { font-size: 14px; }
  .p360-chart { padding: 14px 12px 10px; }
  .p360-chart__head { flex-wrap: wrap; }
  .p360-chart__select { font-size: 14px; padding: 6px 10px; }
  .p360-chart__body { min-height: 0; }
  .p360-featured { padding: 28px 0 16px; }
  .p360-featured__intro { grid-template-columns: minmax(0, 1fr); }
  .p360-featured__intro .p360-featured__banner { grid-row: auto; grid-column: auto; margin-top: 20px; max-width: 100%; }
  .p360-featured .p360-job { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .p360-featured .p360-logo-box { width: 72px; height: 72px; }
  .p360-featured .p360-job__body { min-height: 0; }
  .p360-featured .p360-job__title { font-size: 16px; }
  .p360-featured .p360-job__title a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .p360-featured .p360-job__company { font-size: 14px; }
  .p360-featured .p360-job__row .p360-chip { font-size: 13px; padding: 5px 12px; }
  .p360-featured .p360-salary { font-size: 15px; }
  .p360-featured .p360-job__side .p360-btn { min-height: 36px; font-size: 14px; padding: 0 16px; }
  .p360-mission { padding: 16px 0 0; }
  .p360-mission__img { border-radius: 12px; }
  .p360-press { padding: 28px 0 8px; }
  .p360-press .p360-title { font-size: 22px; margin-bottom: 18px; }
  .p360-press .p360-carousel__track { gap: 12px; }
  .p360-press__logo { height: 80px; padding: 8px; }
  .p360-press__title { font-size: 13px; }
  .p360-hnews .p360-grid--4 { grid-template-columns: minmax(0, 1fr); }
}