/**
 * Rhys Man - Trang tuyển dụng & ứng tuyển
 * -----------------------------------------------------------------------------
 * Chỉ load trên: page có class .rm-page / shortcode tuyển dụng, và single rm_job.
 * Xem DevVN_RM_Assets::should_load() trong inc/recruitment/class-rm-assets.php
 *
 * Quy ước:
 *  - Token dùng tiền tố --rm-* (theo Brand Guideline Rhys Man §3.1, §5.1).
 *    KHÔNG dùng var(--fs-color-primary) vì primary của site là #ed2524,
 *    khác đỏ thương hiệu #B70606 trong Brand Guideline.
 *  - Mọi rule đều nằm trong scope .rm-recruit (body class) để không rò rỉ.
 *  - DOM Flatsome: [ux_text] => .text | [ux_image] => .img > .img-inner > img
 *    [section] => section.section > .section-content.relative | [col] => .col > .col-inner
 *
 * @package DevVN_Child
 * @author  Lê Văn Toản - https://levantoan.com/
 */

/* =============================================================================
   1. TOKENS
   ========================================================================== */
.rm-recruit {
  /* Brand (Brand Guideline §3.1) */
  --rm-ink: #141414;
  --rm-red: #b70606;
  --rm-red-dark: #5b0000;
  --rm-red-bright: #e01212;
  --rm-red-light: #e5241b;
  --rm-red-soft: rgba(183, 6, 6, .09);
  --rm-gold: #ddb378;

  /* Gradient thương hiệu (§5.1) */
  --rm-grad-red: linear-gradient(135deg, #e01212 0%, #b70606 52%, #5b0000 100%);
  --rm-grad-ink: linear-gradient(150deg, #202020 0%, #0c0c0c 100%);

  /* Neutrals */
  --rm-bg-soft: #f3f4f5;
  --rm-text: #1c1c1c;
  --rm-text-2: #4a4a4a;
  --rm-text-3: #7a7a7a;
  --rm-border: #e7e5e1;
  --rm-border-2: #d6d3cd;
  --rm-line-dark: rgba(255, 255, 255, .12);

  /* Elevation & shape */
  --rm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --rm-shadow: 0 6px 22px rgba(0, 0, 0, .08);
  --rm-shadow-lg: 0 22px 50px rgba(0, 0, 0, .16);
  --rm-radius: 10px;
  --rm-radius-lg: 16px;

  --rm-font-display: 'Kanit', 'Be Vietnam Pro', system-ui, sans-serif;
  --rm-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rm-ease-out: cubic-bezier(.2, .8, .2, 1);
  --rm-ease-elastic: cubic-bezier(.22, 1.15, .36, 1);

  /* Logo Zalo: dùng background-image với đường dẫn TƯƠNG ĐỐI so với file CSS
     => không hardcode domain/theme path vào DB, và không nhân bản <defs> id
     (clip0 / paint4_linear) như khi inline SVG nhiều lần trên cùng 1 trang. */
  --rm-zalo-logo: center/cover no-repeat url("../images/zalo-chat.svg");
}

/* =============================================================================
   2. SCOPE CƠ BẢN — chỉ trong #content, không đụng header/footer của site
   ========================================================================== */
.rm-recruit #content {
  font-family: var(--rm-font-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--rm-text);
}
.rm-recruit #content h1,
.rm-recruit #content h2,
.rm-recruit #content h3,
.rm-recruit #content h4,
.rm-recruit #content h5,
.rm-recruit #content h6 {
  font-family: var(--rm-font-body);
  color: var(--rm-ink);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
.rm-recruit #content p { margin: 0; }
.rm-recruit #content ul { list-style: none; margin: 0; padding: 0; }
.rm-recruit #content li { margin: 0; }
.rm-recruit #content .text { margin: 0; }
.rm-recruit #content a { text-decoration: none; }
.rm-recruit #content img { max-width: 100%; }

/* Flatsome nhét padding-bottom:30px cứng vào mọi .col.
   CHỈ bỏ ở desktop — nơi các cột nằm cạnh nhau nên 30px đó chỉ tạo khoảng
   thừa dưới section. Từ tablet trở xuống các cột XẾP CHỒNG, chính 30px này
   là khoảng cách giữa chúng => giữ lại, nếu bỏ các mục sẽ dính vào nhau. */
@media (min-width: 850px) {
  .rm-recruit #content .rm-sec .col { padding-bottom: 0; }
}

/* Focus accessibility floor */
.rm-recruit #content :focus-visible {
  outline: 3px solid var(--rm-red);
  outline-offset: 2px;
  border-radius: 3px;
}
.rm-recruit .rm-hero :focus-visible,
.rm-recruit .rm-contact :focus-visible,
.rm-recruit .rm-apply-guide :focus-visible,
.rm-recruit .rm-cta-band :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .rm-recruit #content *,
  .rm-recruit #content *::before,
  .rm-recruit #content *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   2b. ICON — file .svg thật, hiển thị bằng CSS mask
   -----------------------------------------------------------------------------
   Vì sao mask chứ không phải <img src>:
     - mask + background-color:currentColor => icon tự đổi màu theo ngữ cảnh
       (trắng trên thẻ cờ đỏ, đỏ trên nền trắng). <img> không làm được.
     - Đường dẫn nằm trong CSS (tương đối) => KHÔNG hardcode domain/theme path
       vào post_content, và trong UX Builder chỉ còn <i class="rm-i rm-i-pin">.
   Kích thước: 1em => chỉnh bằng font-size của chính nó hoặc phần tử cha.
   Ngoại lệ: logo Zalo nhiều màu => dùng background-image (--rm-zalo-logo).
   ========================================================================== */
.rm-recruit #content .rm-i,
.rm-recruit .rm-i {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--rm-i) center / contain no-repeat;
  mask: var(--rm-i) center / contain no-repeat;
}

.rm-i-pin { --rm-i: url("../images/icons/pin.svg"); }
.rm-i-cash { --rm-i: url("../images/icons/cash.svg"); }
.rm-i-clock { --rm-i: url("../images/icons/clock.svg"); }
.rm-i-brief { --rm-i: url("../images/icons/brief.svg"); }
.rm-i-users { --rm-i: url("../images/icons/users.svg"); }
.rm-i-arrow { --rm-i: url("../images/icons/arrow.svg"); }
.rm-i-check { --rm-i: url("../images/icons/check.svg"); }
.rm-i-search { --rm-i: url("../images/icons/search.svg"); }
.rm-i-mail { --rm-i: url("../images/icons/mail.svg"); }
.rm-i-phone { --rm-i: url("../images/icons/phone.svg"); }
.rm-i-refresh { --rm-i: url("../images/icons/refresh.svg"); }
.rm-i-file { --rm-i: url("../images/icons/file.svg"); }
.rm-i-file-text { --rm-i: url("../images/icons/file-text.svg"); }
.rm-i-upload { --rm-i: url("../images/icons/upload.svg"); }
.rm-i-close { --rm-i: url("../images/icons/close.svg"); }
.rm-i-send { --rm-i: url("../images/icons/send.svg"); }
.rm-i-copy { --rm-i: url("../images/icons/copy.svg"); }
.rm-i-alert { --rm-i: url("../images/icons/alert.svg"); }
.rm-i-globe { --rm-i: url("../images/icons/globe.svg"); }
.rm-i-heart { --rm-i: url("../images/icons/heart.svg"); }
.rm-i-bulb { --rm-i: url("../images/icons/bulb.svg"); }
.rm-i-bolt { --rm-i: url("../images/icons/bolt.svg"); }
.rm-i-shield-check { --rm-i: url("../images/icons/shield-check.svg"); }
.rm-i-medal { --rm-i: url("../images/icons/medal.svg"); }
.rm-i-facebook { --rm-i: url("../images/icons/facebook.svg"); }


/* Kích thước icon trong từng hộp chứa (.rm-i dùng width/height:1em) */
.rm-recruit #content .rm-search-ic .rm-i { font-size: 16px; }
.rm-recruit #content .rm-aside-meta .am-ic .rm-i { font-size: 16px; }
.rm-recruit #content .rm-apply-way .wi .rm-i { font-size: 22px; }
.rm-recruit #content .rm-file-drop .fd-ic .rm-i { font-size: 22px; }
.rm-recruit #content .rm-connect-ic .rm-i { font-size: 28px; }
.rm-recruit #content .rm-form-success .fs-ic .rm-i { font-size: 38px; }
.rm-recruit #content .rm-detail-share .rm-i { font-size: 16px; }
.rm-recruit #content .button.rm-btn .rm-i { font-size: 16px; transition: transform .25s; }
.rm-recruit #content .button.rm-btn:hover .rm-i { transform: translateX(3px); }
.rm-recruit #content .rm-filter-reset .rm-i { font-size: 16px; }

/* =============================================================================
   2c. ICON BOX (Flatsome [featured_box] + inline_svg)
   -----------------------------------------------------------------------------
   Hai vấn đề của Flatsome khi icon là SVG dạng NÉT (fill="none" + stroke):
   1. flatsome.css có `.icon-box-img svg { fill: currentColor }` VÀ
      `.icon-box-img svg path { fill: currentColor }` — nó mặc định icon là
      hình tô đặc. Rule thứ 2 nhắm THẲNG vào <path> nên chỉ trả fill:none cho
      <svg> là chưa đủ: <path> vẫn bị tô (còn <circle>/<rect> thì không, vì
      không bị nhắm) => icon nét biến thành khối đặc.
      => phải trả fill:none cho CẢ <svg> lẫn <path>.
   2. Tuỳ chọn "Icon color" chỉ set `color` lên .icon-inner. File SVG hardcode
      stroke="#000" nên màu không đổi => bắc cầu color -> stroke.
   CSS luôn thắng presentation attribute nên KHÔNG cần sửa/up lại file SVG.
   ========================================================================== */
.rm-recruit #content .icon-inner svg[fill="none"],
.rm-recruit #content .icon-inner svg[fill="none"] path { fill: none; }
.rm-recruit #content .icon-inner svg[stroke] { stroke: currentColor; }
.rm-recruit #content .icon-inner svg[fill]:not([fill="none"]),
.rm-recruit #content .icon-inner svg[fill]:not([fill="none"]) path { fill: currentColor; }

/* =============================================================================
   3. NÚT — .button.rm-btn (đấu specificity với .button của Flatsome)
   ========================================================================== */
.rm-recruit #content .button.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 0;
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: 8px;
  font-family: var(--rm-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: all .25s;
  box-shadow: none;
}
.rm-recruit #content .button.rm-btn span { line-height: 1.2; }
.rm-recruit #content .button.rm-btn i { margin: 0; transition: transform .25s; font-size: 1em; }
.rm-recruit #content .button.rm-btn:hover i { transform: translateX(3px); }
.rm-recruit #content .button.rm-btn-lg { padding: 14px 28px; font-size: 15px; }
.rm-recruit #content .button.rm-btn-block { width: 100%; }

.rm-recruit #content .button.rm-btn-primary { background-color: var(--rm-red); color: #fff; }
.rm-recruit #content .button.rm-btn-primary:hover {
  background-color: var(--rm-red-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(225, 37, 27, .32);
}
.rm-recruit #content .button.rm-btn-dark { background-color: var(--rm-ink); color: #fff; }
.rm-recruit #content .button.rm-btn-dark:hover { background-color: #000; color: #fff; transform: translateY(-2px); }

.rm-recruit #content .button.rm-btn-outline {
  background-color: transparent;
  color: var(--rm-ink);
  box-shadow: inset 0 0 0 1.5px var(--rm-border-2);
}
.rm-recruit #content .button.rm-btn-outline:hover {
  background-color: var(--rm-ink);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--rm-ink);
}
.rm-recruit #content .button.rm-btn-light { background-color: #fff; color: var(--rm-ink); }
.rm-recruit #content .button.rm-btn-light:hover { background-color: var(--rm-red); color: #fff; transform: translateY(-2px); }

.rm-recruit #content .button.rm-btn-ghost {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
}
.rm-recruit #content .button.rm-btn-ghost:hover { background-color: #fff; color: var(--rm-ink); }

/* CTA band: nút trắng hover thành đen (design .cta-band .btn-light:hover) */
.rm-recruit .rm-cta-band #content .button.rm-btn-light:hover,
.rm-recruit #content .rm-cta-band .button.rm-btn-light:hover { background-color: var(--rm-ink); color: #fff; }

/* =============================================================================
   4. TIÊU ĐỀ MỤC DÙNG CHUNG
   ========================================================================== */
.rm-recruit #content .rm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--rm-red);
}
.rm-recruit #content .rm-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--rm-red);
  display: inline-block;
  flex: none;
}
/* Biến thể canh giữa: thêm vạch bên phải */
.rm-recruit #content .rm-eyebrow-center { justify-content: center; }
.rm-recruit #content .rm-eyebrow-center::after {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--rm-red);
  display: inline-block;
  flex: none;
}
.rm-recruit #content .rm-eyebrow--light { color: var(--rm-red-light); }
.rm-recruit #content .rm-eyebrow--light::before,
.rm-recruit #content .rm-eyebrow--light::after { background: var(--rm-red-light); }

/* Đầu mục section: class đặt trên [col] => style .col-inner.
   Phải ghi rõ margin-left:0 — Flatsome tự canh giữa .col-inner khi có
   max-width, làm khối tiêu đề bị đẩy sang phải. */
.rm-recruit #content .rm-head > .col-inner {
  max-width: 760px;
  margin: 0 auto 44px 0;
}
.rm-recruit #content .rm-head-center > .col-inner { margin-left: auto; margin-right: auto; }

.rm-recruit #content .rm-title,
.rm-recruit #content .rm-title h2 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-size: clamp(27px, 4.2vw, 46px);
  line-height: 1.05;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--rm-ink);
}
.rm-recruit #content .rm-title .slant { font-style: italic; color: var(--rm-red); }
.rm-recruit #content .rm-title .outline {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--rm-red);
}
.rm-recruit #content .rm-subtitle {
  color: var(--rm-text-2);
  font-size: 15.5px;
  line-height: 1.7;
  /* Thở với thanh gạch phía trên — trước đây dính sát (0px) */
  margin-top: 14px;
}
/* Gạch gradient dưới tiêu đề.
   12px trên / 14px dưới: cân hai bên. Trước là 16px trên và 0px dưới nên
   thanh gạch bị hút xuống sát mô tả và rời khỏi tiêu đề. */
.rm-recruit #content .rm-rule::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 3px;
  background: var(--rm-grad-red);
  margin-top: 12px;
}
.rm-recruit #content .rm-rule-center::after { margin-left: auto; margin-right: auto; }

/* Watermark viền "RHYS MAN" — thuần trang trí nên dùng pseudo, không tạo element */
.rm-recruit #content .rm-watermark > .section-content::before {
  content: "RHYS MAN";
  position: absolute;
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(183, 6, 6, .13);
  font-size: clamp(80px, 15vw, 200px);
  line-height: .8;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* =============================================================================
   5. HERO
   ========================================================================== */
.rm-recruit #content .rm-hero { position: relative; overflow: hidden; color: #fff; }
.rm-recruit #content .rm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(183, 6, 6, .55), transparent 60%),
    radial-gradient(900px 520px at -6% 108%, rgba(91, 0, 0, .6), transparent 62%),
    var(--rm-grad-ink);
}
.rm-recruit #content .rm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 60, 60, .05) 46px 47px);
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 30%, #000 100%);
}
.rm-recruit #content .rm-hero > .section-content { z-index: 2; }
.rm-recruit #content .rm-hero.rm-watermark > .section-content::before {
  top: -16%;
  right: -2%;
  -webkit-text-stroke-color: rgba(255, 255, 255, .06);
}

.rm-recruit #content .rm-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--rm-red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #fff;
}
.rm-recruit #content .rm-hero-title { margin-top: 20px; }
.rm-recruit #content .rm-hero-title h1 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.22;
  letter-spacing: .004em;
  color: #fff;
}
.rm-recruit #content .rm-hero-title .hot {
  font-style: italic;
  background: var(--rm-grad-red);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: .06em;
}
.rm-recruit #content .rm-hero-sub {
  margin-top: 18px;
  font-size: clamp(15px, 2vw, 17.5px);
  color: rgba(255, 255, 255, .78);
  max-width: 560px;
}
.rm-recruit #content .rm-hero-cta { margin-top: 26px; }
.rm-recruit #content .rm-hero-social {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
/* [ux_text] bọc nội dung trong <p> (wpautop) nên flex chỉ thấy 1 con <p>
   -> nhãn + 3 icon <a> (display:grid = block) rơi xuống dòng.
   display:contents cho <p> để chúng thành flex-item trực tiếp = hàng ngang
   đúng như thiết kế gốc. Áp cả frontend lẫn builder. */
.rm-recruit #content .rm-hero-social > p {
  display: contents;
}
.rm-recruit #content .rm-hero-social .lbl {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}
.rm-recruit #content .rm-hero-social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.rm-recruit #content .rm-hero-social a:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}
.rm-recruit #content .rm-hero-social a .rm-i { font-size: 20px; }
.rm-recruit #content .rm-hero-social .rm-ic-web { background: var(--rm-red); }
.rm-recruit #content .rm-hero-social .rm-ic-fb { background: #1877f2; }
.rm-recruit #content .rm-hero-social .rm-ic-zalo { background: var(--rm-zalo-logo); }

/* Khung ảnh hero */
.rm-recruit #content .rm-hero-img .img-inner {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 6px rgba(183, 6, 6, .12);
}
.rm-recruit #content .rm-hero-img .img-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 90px rgba(183, 6, 6, .25);
  pointer-events: none;
}

/* =============================================================================
   6. STATS
   ========================================================================== */
.rm-recruit #content .rm-stats .col { padding: 0; }
.rm-recruit #content .rm-stat > .col-inner {
  padding: 30px 18px;
  text-align: center;
  position: relative;
}
/* Vạch ngăn giữa các chỉ số (bỏ vạch đầu tiên) */
.rm-recruit #content .rm-stat + .rm-stat > .col-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: var(--rm-line-dark);
}
/* Từ tablet trở xuống chỉ số xếp 2 cột => item đầu mỗi hàng không có vạch trái */
@media (max-width: 849px) {
  .rm-recruit #content .rm-stat:nth-child(odd) > .col-inner::before { display: none; }
}
.rm-recruit #content .rm-stat-num {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  color: #fff;
}
.rm-recruit #content .rm-stat-num em { font-style: italic; color: var(--rm-red-light); }
.rm-recruit #content .rm-stat-label {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .6);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* =============================================================================
   7. CÂU CHUYỆN THƯƠNG HIỆU
   ========================================================================== */
.rm-recruit #content .rm-story { position: relative; overflow: hidden; }
.rm-recruit #content .rm-story.rm-watermark > .section-content::before { top: -6%; left: -2%; }
.rm-recruit #content .rm-story-row { position: relative; z-index: 1; }

/* Thẻ đỏ = .col-inner của cột trái */
.rm-recruit #content .rm-story-card > .col-inner {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 42px 42px 36px;
  color: #fff;
  height: 100%;
  box-shadow: 0 34px 66px rgba(183, 6, 6, .32);
  background:
    repeating-linear-gradient(116deg, transparent 0 26px, rgba(255, 255, 255, .045) 26px 27px),
    var(--rm-grad-red);
}
.rm-recruit #content .rm-story-card > .col-inner::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
  pointer-events: none;
}
.rm-recruit #content .rm-quote-mark {
  position: relative;
  font-family: Georgia, serif;
  font-size: 120px;
  line-height: .5;
  height: 46px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .55);
  opacity: .9;
}
.rm-recruit #content .rm-story-title { position: relative; margin: 6px 0 18px; }
.rm-recruit #content .rm-story-title h3 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.04;
  color: #fff;
}
.rm-recruit #content .rm-story-title h3::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: var(--rm-gold);
  margin-top: 14px;
}
.rm-recruit #content .rm-story-text {
  position: relative;
  color: rgba(255, 255, 255, .92);
  font-size: 15px;
  line-height: 1.72;
}
.rm-recruit #content .rm-story-inset {
  position: relative;
  margin-top: 22px;
  background: rgba(0, 0, 0, .82);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
  border-left: 3px solid var(--rm-gold);
}

/* Ảnh bên phải */
.rm-recruit #content .rm-story-media > .col-inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--rm-shadow-lg);
  background: #111;
  height: 100%;
}
.rm-recruit #content .rm-story-media .img,
.rm-recruit #content .rm-story-media .img-inner { height: 100%; }
.rm-recruit #content .rm-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rm-recruit #content .rm-story-media > .col-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 45%);
  pointer-events: none;
}
.rm-recruit #content .rm-story-cap {
  position: absolute;
  left: 18px;
  bottom: 16px;
  right: 18px;
  z-index: 2;
  color: #fff;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

/* =============================================================================
   8. TUYÊN NGÔN
   ========================================================================== */
.rm-recruit #content .rm-num-card > .col-inner {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: 20px;
  padding: 30px 32px;
  box-shadow: var(--rm-shadow);
}
.rm-recruit #content .rm-num-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.rm-recruit #content .rm-num-row + .rm-num-row { margin-top: 24px; }
.rm-recruit #content .rm-num-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rm-grad-red);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 19px;
  box-shadow: 0 8px 18px rgba(183, 6, 6, .32);
}
.rm-recruit #content .rm-num-lead {
  font-weight: 700;
  color: var(--rm-ink);
  font-size: 15.5px;
  margin-bottom: 12px;
  line-height: 1.55;
}
.rm-recruit #content .rm-diamonds { display: grid; gap: 9px; }
.rm-recruit #content .rm-diamonds li {
  position: relative;
  padding-left: 24px;
  color: var(--rm-text-2);
  font-size: 14.5px;
  line-height: 1.6;
}
.rm-recruit #content .rm-diamonds li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--rm-red);
  transform: rotate(45deg);
  border-radius: 1px;
}

.rm-recruit #content .rm-manifesto-title h3 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(22px, 3.4vw, 36px);
  color: var(--rm-ink);
  letter-spacing: .01em;
}
.rm-recruit #content .rm-spark { color: var(--rm-red); }

.rm-recruit #content .rm-banner > .col-inner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  text-align: center;
  background: var(--rm-grad-red);
  color: #fff;
  padding: 34px 30px;
  box-shadow: 0 26px 54px rgba(183, 6, 6, .26);
}
.rm-recruit #content .rm-banner > .col-inner::before,
.rm-recruit #content .rm-banner > .col-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0 12px, rgba(255, 255, 255, .16) 12px 14px);
}
.rm-recruit #content .rm-banner > .col-inner::before { left: -20px; }
.rm-recruit #content .rm-banner > .col-inner::after { right: -20px; transform: scaleX(-1); }
.rm-recruit #content .rm-banner-text {
  position: relative;
  z-index: 1;
}
.rm-recruit #content .rm-banner-text p {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 600;
  line-height: 1.5;
  margin: 6px 0;
}
.rm-recruit #content .rm-banner-text p.big {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(18px, 2.8vw, 26px);
}

/* =============================================================================
   9. VĂN HÓA — Tầm nhìn / Sứ mệnh + bản đồ
   ========================================================================== */
.rm-recruit #content .rm-vm { overflow: hidden; }
.rm-recruit #content .rm-vm-block + .rm-vm-block { margin-top: 26px; }
.rm-recruit #content .rm-vm-block h3 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 20px;
  color: var(--rm-ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rm-recruit #content .rm-vm-block h3::before {
  content: "";
  width: 30px;
  height: 3px;
  background: var(--rm-red);
  border-radius: 2px;
  flex: none;
}
.rm-recruit #content .rm-vm-block p {
  color: var(--rm-text-2);
  font-size: 15px;
  line-height: 1.72;
}
.rm-recruit #content .rm-map {
  max-width: 560px;
  margin: 0 auto;
  animation: rm-float 8s ease-in-out infinite;
}
.rm-recruit #content .rm-map img { filter: drop-shadow(0 14px 30px rgba(183, 6, 6, .12)); }
@keyframes rm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =============================================================================
   10. 6 GIÁ TRỊ CỐT LÕI — thẻ cờ (pennant)
   ========================================================================== */
.rm-recruit #content .rm-values-head { text-align: center; }
.rm-recruit #content .rm-values-head > .col-inner { margin-bottom: 50px; }
/* display:flex (KHÔNG inline-flex) để khối "6 Giá trị cốt lõi" xuống dòng riêng.
   .rm-eyebrow là inline-flex nên nếu khối này cũng inline-flex thì 2 phần
   sẽ nằm chung 1 hàng trên desktop. */
.rm-recruit #content .rm-big6 {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-top: 12px;
}
.rm-recruit #content .rm-num6 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(64px, 10vw, 112px);
  line-height: .72;
  background: var(--rm-grad-red);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rm-recruit #content .rm-txt6 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(28px, 4.8vw, 52px);
  color: var(--rm-ink);
  line-height: .92;
  text-align: left;
}

/* Thẻ cờ = [featured_box] (.icon-box). Badge số là [ux_text] riêng, đặt
   absolute trong .col-inner để KHÔNG bị clip-path của thẻ cờ cắt mất. */
.rm-recruit #content .rm-pennant > .col-inner {
  position: relative;
  margin-top: 28px;
  height: 100%;
  display: flex;
  transition: transform .3s var(--rm-ease-out);
}
.rm-recruit #content .rm-pennant > .col-inner:hover { transform: translateY(-9px); }

.rm-recruit #content .rm-pennant-badge {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 21px;
  color: var(--rm-red);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .3), 0 0 0 5px rgba(183, 6, 6, .16);
  border: 3px solid #fff;
  z-index: 3;
}

.rm-recruit #content .rm-pennant-body.icon-box {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 42px 15px 34px;
  text-align: center;
  color: #fff;
  background: linear-gradient(158deg, #e5201a 0%, #b70606 46%, #6d0202 100%);
  border-radius: 16px 16px 7px 7px;
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  box-shadow: 0 18px 38px rgba(183, 6, 6, .34);
  transition: box-shadow .3s;
  display: block;
}
.rm-recruit #content .rm-pennant > .col-inner:hover .rm-pennant-body.icon-box {
  box-shadow: 0 34px 60px rgba(183, 6, 6, .46);
}
.rm-recruit #content .rm-pennant-body.icon-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), transparent);
  pointer-events: none;
}

/* Hộp icon 44px bo tròn, mờ — icon bên trong 23px */
.rm-recruit #content .rm-pennant-body .icon-box-img {
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  position: relative;
  z-index: 2;
}
.rm-recruit #content .rm-pennant-body .icon-inner { padding: 10px; }
.rm-recruit #content .rm-pennant-body .icon-box-text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.45;
}
.rm-recruit #content .rm-pennant-body .icon-box-text h5 {
  font-family: var(--rm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 9px;
}

/* =============================================================================
   11. CHÍNH SÁCH NHÂN SỰ
   ========================================================================== */
.rm-recruit #content .rm-policy-wrap > .col-inner {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--rm-shadow);
}
.rm-recruit #content .rm-policy {
  border-radius: 18px;
  padding: 26px 28px;
  background: var(--rm-bg-soft);
}
.rm-recruit #content .rm-policy + .rm-policy { margin-top: 22px; }
.rm-recruit #content .rm-policy.is-dark { background: var(--rm-ink); color: #fff; }
.rm-recruit #content .rm-policy-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.rm-recruit #content .rm-policy-num {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--rm-red);
  color: var(--rm-red);
  display: grid;
  place-items: center;
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 16px;
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-num {
  border-color: var(--rm-red-light);
  color: var(--rm-red-light);
}
.rm-recruit #content .rm-policy-eyebrow h3 {
  font-family: var(--rm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.1;
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-eyebrow h3 { color: #fff; }
.rm-recruit #content .rm-policy-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rm-red);
  margin: 10px 0 8px;
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-tag { color: var(--rm-gold); }
.rm-recruit #content .rm-policy-text p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--rm-text-2);
  margin-bottom: 8px;
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-text p { color: rgba(255, 255, 255, .78); }
.rm-recruit #content .rm-policy-list { display: grid; gap: 8px; margin-top: 6px; }
.rm-recruit #content .rm-policy-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rm-text-2);
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-list li { color: rgba(255, 255, 255, .78); }
.rm-recruit #content .rm-policy-list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--rm-red);
  transform: rotate(45deg);
}
.rm-recruit #content .rm-policy-media .img-inner {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--rm-shadow);
}
.rm-recruit #content .rm-policy.is-dark .rm-policy-media .img-inner {
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

/* =============================================================================
   12. GALLERY — [ux_gallery] của Flatsome (lightbox native)
   ========================================================================== */
.rm-recruit #content .rm-gallery .col { padding: 0 7px 14px; }
.rm-recruit #content .rm-gallery .img-inner {
  border-radius: var(--rm-radius);
  overflow: hidden;
  box-shadow: var(--rm-shadow-sm);
}
.rm-recruit #content .rm-gallery-note {
  text-align: center;
  color: var(--rm-text-3);
  font-size: 13px;
  margin-top: 16px;
}

/* =============================================================================
   13. BĂNG TRÍCH DẪN
   ========================================================================== */
.rm-recruit #content .rm-quoteband > .col-inner {
  position: relative;
  border: 1.5px solid rgba(183, 6, 6, .28);
  border-radius: 20px;
  background: #fff;
  padding: 40px 44px;
  text-align: center;
  box-shadow: var(--rm-shadow-sm);
}
.rm-recruit #content .rm-quoteband > .col-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  border-radius: 3px;
  background: var(--rm-grad-red);
}
.rm-recruit #content .rm-quoteband-title h3 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(22px, 3.6vw, 38px);
  color: var(--rm-red);
  margin-bottom: 12px;
}
.rm-recruit #content .rm-quoteband-text {
  color: var(--rm-text-2);
  font-size: 15.5px;
  line-height: 1.72;
  max-width: 720px;
  margin: 0 auto;
}
.rm-recruit #content .rm-quoteband-text strong { color: var(--rm-ink); }

/* =============================================================================
   14. BĂNG LIÊN HỆ CÔNG TY
   ========================================================================== */
.rm-recruit #content .rm-contact { position: relative; overflow: hidden; }
.rm-recruit #content .rm-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(700px 380px at 88% 120%, rgba(183, 6, 6, .4), transparent 60%);
}
.rm-recruit #content .rm-contact > .section-content { z-index: 1; }
.rm-recruit #content .rm-contact-logo { max-width: 170px; }
.rm-recruit #content .rm-contact-brand-text {
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  line-height: 1.7;
  max-width: 340px;
  margin-top: 18px;
}
.rm-recruit #content .rm-contact-info h3 {
  font-family: var(--rm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  color: #fff;
  margin-bottom: 16px;
}
/* Mỗi dòng liên hệ = [featured_box pos="left"] (.icon-box-left đã là flex) */
.rm-recruit #content .rm-contact-item.icon-box {
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
}
.rm-recruit #content .rm-contact-item + .rm-contact-item { margin-top: 13px; }
.rm-recruit #content .rm-contact-item .icon-box-img { margin: 0 13px 0 0; }
.rm-recruit #content .rm-contact-item .icon-box-text { padding: 0; }
.rm-recruit #content .rm-contact-item strong { color: #fff; font-weight: 600; }
.rm-recruit #content .rm-contact-info a { color: inherit; }
.rm-recruit #content .rm-contact-info a:hover { color: var(--rm-red-light); }

/* Email/URL là chuỗi dài KHÔNG có khoảng trắng -> trên container hẹp (mobile,
   panel builder) không xuống dòng được nên tràn ra ngoài thẻ. Cho .icon-box-text
   co được dưới bề rộng nội dung (min-width:0 vì nó là flex-item của icon-box-left)
   và cho phép ngắt chuỗi dài. Áp cho cả liên hệ lẫn hướng dẫn ứng tuyển. */
.rm-recruit #content .rm-contact-item .icon-box-text,
.rm-recruit #content .rm-apply-way .icon-box-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* =============================================================================
   15. HƯỚNG DẪN ỨNG TUYỂN
   ========================================================================== */
.rm-recruit #content .rm-apply-cta > .col-inner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  color: #fff;
  background: var(--rm-grad-red);
  padding: 40px 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 26px 54px rgba(183, 6, 6, .28);
}
.rm-recruit #content .rm-apply-cta-title h3 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1;
  color: #fff;
}
.rm-recruit #content .rm-apply-cta-title .em {
  display: block;
  -webkit-text-stroke: 1.4px #fff;
  color: transparent;
}
.rm-recruit #content .rm-apply-cta-text {
  margin: 14px 0 22px;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  line-height: 1.6;
}
.rm-recruit #content .rm-apply-guide > .col-inner {
  background: var(--rm-ink);
  color: #fff;
  border-radius: 20px;
  padding: 36px 34px;
  height: 100%;
}
.rm-recruit #content .rm-apply-guide-title h4 {
  font-family: var(--rm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  color: #fff;
  margin-bottom: 6px;
}
.rm-recruit #content .rm-apply-guide-sub {
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rm-line-dark);
}
/* Mỗi cách ứng tuyển = [featured_box pos="left"], icon 22px trong hộp 44px */
.rm-recruit #content .rm-apply-way.icon-box { align-items: flex-start; }
.rm-recruit #content .rm-apply-way + .rm-apply-way { margin-top: 16px; }
.rm-recruit #content .rm-apply-way .icon-box-img {
  height: 44px;
  margin: 0 16px 0 0;
  border-radius: 12px;
  background: rgba(183, 6, 6, .18);
}
.rm-recruit #content .rm-apply-way .icon-inner { padding: 11px; }
.rm-recruit #content .rm-apply-way .icon-box-text {
  padding: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
}
.rm-recruit #content .rm-apply-way .icon-box-text h5 {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 3px;
}
.rm-recruit #content .rm-apply-way a { color: var(--rm-gold); }
.rm-recruit #content .rm-apply-way a:hover { text-decoration: underline; }

/* =============================================================================
   16. CTA BAND
   ========================================================================== */
.rm-recruit #content .rm-cta-band { text-align: center; }
.rm-recruit #content .rm-cta-title h2 {
  font-family: var(--rm-font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -.01em;
  color: #fff;
  margin-bottom: 12px;
}
.rm-recruit #content .rm-cta-text {
  font-size: 16px;
  color: rgba(255, 255, 255, .92);
  max-width: 560px;
  margin: 0 auto 26px;
}

/* =============================================================================
   17. CONNECT CHANNELS
   ========================================================================== */
.rm-recruit #content .rm-connect-card > .col-inner {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  padding: 30px 26px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.rm-recruit #content .rm-connect-card > .col-inner:hover {
  transform: translateY(-5px);
  box-shadow: var(--rm-shadow-lg);
}
.rm-recruit #content .rm-connect-ic {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}
.rm-recruit #content .rm-connect-ic.c-fb { background: #1877f2; }
.rm-recruit #content .rm-connect-ic.c-mail { background: var(--rm-red); }
.rm-recruit #content .rm-connect-ic.c-zalo { background: var(--rm-zalo-logo); }
.rm-recruit #content .rm-connect-title h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--rm-ink);
  margin-bottom: 6px;
}
.rm-recruit #content .rm-connect-text {
  font-size: 14px;
  color: var(--rm-text-2);
  margin-bottom: 16px;
  flex-grow: 1;
}

/* =============================================================================
   18. RESPONSIVE — trang giới thiệu
   ========================================================================== */
@media (max-width: 849px) {
  .rm-recruit #content .rm-map { max-width: 440px; }
  .rm-recruit #content .rm-story-card > .col-inner { height: auto; }
  .rm-recruit #content .rm-story-media > .col-inner { height: auto; }
  .rm-recruit #content .rm-story-media img { height: auto; }
  .rm-recruit #content .rm-apply-cta > .col-inner,
  .rm-recruit #content .rm-apply-guide > .col-inner { height: auto; }
  .rm-recruit #content .rm-policy-wrap > .col-inner { padding: 26px; }

  /* Trong thẻ chính sách: ảnh (force_first) nằm trên, text nằm dưới.
     => ảnh cần khoảng cách xuống text; text là phần tử cuối nên bỏ padding
     để không cộng thêm khoảng thừa vào đáy thẻ. */
  .rm-recruit #content .rm-policy .rm-policy-media { padding-bottom: 20px; }
  .rm-recruit #content .rm-policy .rm-policy-body { padding-bottom: 0; }
  .rm-recruit #content .rm-policy-media > .col-inner { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 549px) {
  .rm-recruit #content { font-size: 14px; }
  .rm-recruit #content .rm-story-card > .col-inner { padding: 30px 24px 26px; }
  .rm-recruit #content .rm-num-card > .col-inner { padding: 24px 20px; }
  .rm-recruit #content .rm-num-row { grid-template-columns: 1fr; gap: 12px; }
  .rm-recruit #content .rm-policy-wrap > .col-inner { padding: 22px; }
  .rm-recruit #content .rm-quoteband > .col-inner { padding: 30px 22px; }
  .rm-recruit #content .rm-apply-cta > .col-inner,
  .rm-recruit #content .rm-apply-guide > .col-inner { padding: 30px 24px; }
  .rm-recruit #content .rm-big6 { flex-wrap: wrap; }
  .rm-recruit #content .rm-policy { padding: 20px 18px; }
  .rm-recruit #content .button.rm-btn { padding: 10px 16px; font-size: 13px; }
  .rm-recruit #content .rm-stat { padding: 22px 12px; }
}

/* =============================================================================
   19. THẺ TIN TUYỂN DỤNG — dùng chung trang chủ + trang danh sách
   ========================================================================== */
.rm-recruit #content .rm-jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rm-recruit #content .rm-job-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.rm-recruit #content .rm-job-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rm-shadow-lg);
  border-color: transparent;
}
.rm-recruit #content .rm-job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.rm-recruit #content .rm-job-dept {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--rm-red);
  background: var(--rm-red-soft);
  padding: 5px 12px;
  border-radius: 999px;
}
.rm-recruit #content .rm-job-deadline-pill {
  font-size: 12px;
  color: var(--rm-text-3);
  white-space: nowrap;
}
.rm-recruit #content .rm-job-deadline-pill.is-expired { color: var(--rm-red); }
.rm-recruit #content .rm-job-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--rm-ink);
  line-height: 1.32;
}
.rm-recruit #content .rm-job-card h3 a { color: inherit; }
.rm-recruit #content .rm-job-card h3 a:hover { color: var(--rm-red); }
.rm-recruit #content .rm-job-summary {
  font-size: 14px;
  color: var(--rm-text-2);
  line-height: 1.6;
  flex-grow: 1;
}
.rm-recruit #content .rm-job-meta {
  display: grid;
  gap: 8px;
  border-top: 1px dashed var(--rm-border);
  padding-top: 14px;
}
.rm-recruit #content .rm-job-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--rm-text-2);
}
.rm-recruit #content .rm-job-meta .rm-i { font-size: 16px; color: var(--rm-red); }
.rm-recruit #content .rm-job-meta strong { color: var(--rm-ink); font-weight: 600; }
.rm-recruit #content .rm-job-card-foot { display: flex; gap: 10px; }
.rm-recruit #content .rm-job-card-foot .button.rm-btn { flex: 1; }

/* =============================================================================
   20. BỘ LỌC
   ========================================================================== */
.rm-recruit #content .rm-filter-bar {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  padding: 18px;
  box-shadow: var(--rm-shadow-sm);
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.rm-recruit #content .rm-filter-field { display: flex; flex-direction: column; gap: 6px; }
.rm-recruit #content .rm-filter-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rm-text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rm-recruit #content .rm-control-wrap { position: relative; }
.rm-recruit #content .rm-filter-field input,
.rm-recruit #content .rm-filter-field select {
  width: 100%;
  margin: 0;
  height: auto;
  padding: 12px 14px;
  border: 1.5px solid var(--rm-border-2);
  border-radius: 9px;
  /* KHÔNG dùng shorthand `background` trên input/select: sẽ xoá mũi tên select */
  background-color: #fff;
  box-shadow: none;
  font-size: 14.5px;
  color: var(--rm-text);
  transition: border-color .2s, box-shadow .2s;
}
.rm-recruit #content .rm-filter-field input { padding-left: 40px; }
.rm-recruit #content .rm-search-ic {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rm-text-3);
  pointer-events: none;
  display: grid;
  place-items: center;
}
.rm-recruit #content .rm-filter-field input:focus,
.rm-recruit #content .rm-filter-field select:focus {
  outline: none;
  border-color: var(--rm-red);
  box-shadow: 0 0 0 3px var(--rm-red-soft);
}
.rm-recruit #content .rm-filter-count {
  font-size: 14px;
  color: var(--rm-text-2);
  margin-bottom: 18px;
}
.rm-recruit #content .rm-filter-count strong { color: var(--rm-ink); }
.rm-recruit #content .rm-no-result {
  text-align: center;
  padding: 50px 20px;
  color: var(--rm-text-3);
  background: var(--rm-bg-soft);
  border-radius: var(--rm-radius-lg);
}
.rm-recruit #content .rm-no-result .rm-i { display: block; font-size: 48px; color: var(--rm-border-2); margin: 0 auto 12px; }
.rm-recruit #content .rm-no-result a { color: var(--rm-red); text-decoration: underline; }

/* =============================================================================
   21. PAGE HEAD / BREADCRUMB
   Dùng ở 2 nơi:
     - single-rm_job.php  => <section class="rm-page-head"> (tự set nền + padding)
     - page tuyển dụng/ứng tuyển => [section bg_color dark] + class .rm-page-head-sec
       (nền/padding do option của section lo, CSS chỉ lo phần bên trong)
   ========================================================================== */
.rm-recruit .rm-page-head {
  background: var(--rm-ink);
  color: #fff;
  padding: 48px 0 40px;
  position: relative;
}
.rm-recruit .rm-page-head h1,
.rm-recruit #content .rm-page-title h1 {
  font-family: var(--rm-font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .004em;
  color: #fff;
  margin: 0;
}
.rm-recruit .rm-page-head h1 {
  color: #fff !important;
}
.rm-recruit .rm-ph-desc {
  color: rgba(255, 255, 255, .72);
  margin-top: 10px;
  max-width: 640px;
}
.rm-recruit .rm-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 14px;
}
.rm-recruit .rm-breadcrumb a { color: inherit; }
.rm-recruit .rm-breadcrumb a:hover { color: #fff; }
.rm-recruit .rm-breadcrumb span[aria-current] { color: var(--rm-red-light); }
.rm-recruit .rm-ph-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 16px;
}
.rm-recruit .rm-ph-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
}
.rm-recruit .rm-ph-tags span .rm-i { font-size: 16px; color: var(--rm-red-light); }

/* =============================================================================
   22. CHI TIẾT TIN TUYỂN DỤNG
   ========================================================================== */
.rm-recruit #content .rm-detail-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}
.rm-recruit #content .rm-detail-main h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--rm-ink);
  margin: 28px 0 14px;
  padding-left: 14px;
  position: relative;
}
.rm-recruit #content .rm-detail-main h2:first-child { margin-top: 0; }
.rm-recruit #content .rm-detail-main h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--rm-red);
  border-radius: 2px;
}
.rm-recruit #content .rm-detail-main p {
  color: var(--rm-text-2);
  margin-bottom: 12px;
  font-size: 15.5px;
}
/* Mô tả công việc = post_content (khung soạn thảo chính), cho phép rich text */
.rm-recruit #content .rm-job-content p {
  color: var(--rm-text-2);
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.7;
}
.rm-recruit #content .rm-job-content ul { display: grid; gap: 11px; margin: 0 0 12px; }
.rm-recruit #content .rm-job-content ul li {
  position: relative;
  padding-left: 22px;
  color: var(--rm-text-2);
  font-size: 15px;
  line-height: 1.6;
}
.rm-recruit #content .rm-job-content ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--rm-red);
  transform: rotate(45deg);
}
.rm-recruit #content .rm-job-content ol {
  margin: 0 0 12px 20px;
  list-style: decimal;
  color: var(--rm-text-2);
}
.rm-recruit #content .rm-job-content ol li { list-style: decimal; margin-bottom: 8px; }
.rm-recruit #content .rm-job-content strong { color: var(--rm-ink); }
.rm-recruit #content .rm-job-content a { color: var(--rm-red); text-decoration: underline; }

.rm-recruit #content .rm-detail-list { display: grid; gap: 11px; margin-bottom: 8px; }
.rm-recruit #content .rm-detail-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--rm-text-2);
  font-size: 15px;
  line-height: 1.6;
}
.rm-recruit #content .rm-detail-list li .rm-i { font-size: 18px; color: var(--rm-red); margin-top: 4px; }
.rm-recruit #content .rm-detail-share {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rm-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rm-recruit #content .rm-detail-share > span { font-weight: 700; color: var(--rm-ink); font-size: 14px; }
/* Gồm cả .sh-copy vì nó là <button>, không phải <a>.
   min-height/line-height phải reset — Flatsome đặt min-height cho <button>
   làm nút bị cao hơn 1px nên không tròn đều. */
.rm-recruit #content .rm-detail-share a,
.rm-recruit #content .rm-detail-share .sh-copy {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: transform .2s, background .2s;
}
.rm-recruit #content .rm-detail-share a:hover,
.rm-recruit #content .rm-detail-share .sh-copy:hover { transform: translateY(-3px); }
.rm-recruit #content .rm-detail-share .sh-fb { background: #1877f2; }
.rm-recruit #content .rm-detail-share .sh-zalo { background: var(--rm-zalo-logo); }
.rm-recruit #content .rm-detail-share .sh-copy { background: var(--rm-ink); border: 0; cursor: pointer; margin: 0;}
.rm-recruit #content .rm-detail-share .sh-copy.is-copied { background: #16a34a; }

/* Sidebar */
.rm-recruit #content .rm-detail-aside { position: sticky; top: 90px; display: grid; gap: 18px; }
.rm-recruit #content .rm-aside-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  padding: 24px;
  box-shadow: var(--rm-shadow-sm);
}
.rm-recruit #content .rm-aside-card .rm-ac-dept {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--rm-red);
  background: var(--rm-red-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.rm-recruit #content .rm-aside-card h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--rm-ink);
  line-height: 1.3;
  margin-bottom: 16px;
}
.rm-recruit #content .rm-aside-meta { display: grid; gap: 12px; margin-bottom: 18px; }
.rm-recruit #content .rm-aside-meta li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.rm-recruit #content .rm-aside-meta .am-ic {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 9px;
  background: var(--rm-bg-soft);
  color: var(--rm-red);
  display: grid;
  place-items: center;
}
.rm-recruit #content .rm-aside-meta .am-label { font-size: 12px; color: var(--rm-text-3); }
.rm-recruit #content .rm-aside-meta .am-value { font-weight: 700; color: var(--rm-ink); }
.rm-recruit #content .rm-deadline-warn {
  font-size: 13px;
  color: var(--rm-text-3);
  text-align: center;
  margin-top: 10px;
}
.rm-recruit #content .rm-aside-help { background: var(--rm-ink); color: #fff; border-color: var(--rm-ink); }
.rm-recruit #content .rm-aside-help h3,
.rm-recruit #content .rm-aside-help h4 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.rm-recruit #content .rm-aside-help p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 14px;
}
.rm-recruit #content .rm-ah-row { display: flex; gap: 10px; }
.rm-recruit #content .rm-ah-row .button.rm-btn { flex: 1; padding: 10px; font-size: 13px; }

/* =============================================================================
   23. FORM ỨNG TUYỂN
   ========================================================================== */
.rm-recruit #content .rm-apply-wrap {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}
.rm-recruit #content .rm-form-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  padding: 32px;
  box-shadow: var(--rm-shadow-sm);
}
.rm-recruit #content .rm-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rm-recruit #content .rm-form-field { display: flex; flex-direction: column; gap: 7px; }
.rm-recruit #content .rm-form-field.full { grid-column: 1 / -1; }
.rm-recruit #content .rm-form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--rm-ink);
  margin: 0;
}
.rm-recruit #content .rm-form-field label .req { color: var(--rm-red); }
.rm-recruit #content .rm-form-field input,
.rm-recruit #content .rm-form-field select,
.rm-recruit #content .rm-form-field textarea {
  margin: 0;
  height: auto;
  padding: 12px 14px;
  border: 1.5px solid var(--rm-border-2);
  border-radius: 9px;
  /* Chỉ background-color — giữ mũi tên native của select */
  background-color: #fff;
  box-shadow: none;
  font-size: 14.5px;
  color: var(--rm-text);
  transition: border-color .2s, box-shadow .2s;
}
.rm-recruit #content .rm-form-field textarea { resize: vertical; min-height: 110px; }
.rm-recruit #content .rm-form-field input:focus,
.rm-recruit #content .rm-form-field select:focus,
.rm-recruit #content .rm-form-field textarea:focus {
  outline: none;
  border-color: var(--rm-red);
  box-shadow: 0 0 0 3px var(--rm-red-soft);
}
.rm-recruit #content .rm-form-field input.is-invalid,
.rm-recruit #content .rm-form-field select.is-invalid {
  border-color: var(--rm-red);
  background-color: rgba(183, 6, 6, .05);
}
.rm-recruit #content .rm-field-error {
  font-size: 12.5px;
  color: var(--rm-red);
  display: none;
}
.rm-recruit #content .rm-field-error.show { display: block; }

/* Upload CV */
.rm-recruit #content .rm-file-drop {
  border: 1.5px dashed var(--rm-border-2);
  border-radius: 11px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
  background-color: var(--rm-bg-soft);
}
.rm-recruit #content .rm-file-drop:hover,
.rm-recruit #content .rm-file-drop.is-dragover {
  border-color: var(--rm-red);
  background-color: rgba(183, 6, 6, .05);
}
.rm-recruit #content .rm-file-drop input { display: none; }
.rm-recruit #content .rm-file-drop .fd-ic {
  width: 46px;
  height: 46px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fff;
  color: var(--rm-red);
  display: grid;
  place-items: center;
  box-shadow: var(--rm-shadow-sm);
}
.rm-recruit #content .rm-file-drop .fd-main { font-weight: 600; color: var(--rm-ink); font-size: 14.5px; }
.rm-recruit #content .rm-file-drop .fd-main em { color: var(--rm-red); font-style: normal; }
.rm-recruit #content .rm-file-drop .fd-hint { font-size: 12.5px; color: var(--rm-text-3); margin-top: 4px; }
.rm-recruit #content .rm-file-name {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--rm-bg-soft);
  border-radius: 9px;
  font-size: 14px;
}
.rm-recruit #content .rm-file-name.show { display: flex; }
.rm-recruit #content .rm-file-name > .rm-i { font-size: 18px; color: var(--rm-red); }
.rm-recruit #content .rm-file-name .fn-text {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rm-recruit #content .rm-file-name .fn-remove {
  color: var(--rm-text-3);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
.rm-recruit #content .rm-file-name .fn-remove:hover { color: var(--rm-red); }

.rm-recruit #content .rm-form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--rm-text-2);
  font-weight: 400;
}
.rm-recruit #content .rm-form-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--rm-red);
  flex: none;
}
.rm-recruit #content .rm-form-consent a { color: var(--rm-red); text-decoration: underline; }

/* Tách nút gửi khỏi ô "đồng ý" phía trên. Dùng hook [data-rm-submit] (chỉ nút
   submit của form ứng tuyển) nên KHÔNG ảnh hưởng nút primary ở hero / job card. */
.rm-recruit #content .button.rm-btn-primary[data-rm-submit] { margin-top: 16px; }

.rm-recruit #content .rm-form-alert {
  display: none;
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 9px;
  font-size: 14px;
  background: rgba(183, 6, 6, .07);
  border: 1px solid rgba(183, 6, 6, .3);
  color: var(--rm-red);
}
.rm-recruit #content .rm-form-alert.show { display: block; }

.rm-recruit #content .rm-form-success { display: none; text-align: center; padding: 30px 20px; }
.rm-recruit #content .rm-form-success.show { display: block; }
.rm-recruit #content .rm-form-success .fs-ic {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: grid;
  place-items: center;
}
.rm-recruit #content .rm-form-success h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--rm-ink);
  margin-bottom: 8px;
}
.rm-recruit #content .rm-form-success p { color: var(--rm-text-2); margin-bottom: 18px; }
.rm-recruit #content .rm-form-success .rm-success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.rm-recruit #content .rm-apply-side { display: grid; gap: 18px; position: sticky; top: 90px; }
.rm-recruit #content .rm-apply-side .rm-aside-card ul { display: grid; gap: 12px; }
.rm-recruit #content .rm-apply-side .rm-aside-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--rm-text-2);
}
.rm-recruit #content .rm-apply-side .rm-aside-card li .rm-i { font-size: 18px; color: var(--rm-red); margin-top: 3px; }
.rm-recruit #content .rm-apply-side .rm-aside-help li { color: rgba(255, 255, 255, .8); }

/* =============================================================================
   24. RESPONSIVE — tuyển dụng / ứng tuyển
   ========================================================================== */
@media (max-width: 1100px) {
  .rm-recruit #content .rm-detail-wrap { grid-template-columns: 1fr 300px; gap: 26px; }
  .rm-recruit #content .rm-apply-wrap { grid-template-columns: 1fr 300px; gap: 26px; }
}
@media (max-width: 960px) {
  .rm-recruit #content .rm-jobs-grid { grid-template-columns: 1fr 1fr; }
  .rm-recruit #content .rm-detail-wrap { grid-template-columns: 1fr; }
  .rm-recruit #content .rm-detail-aside { position: static; order: -1; }
  .rm-recruit #content .rm-apply-wrap { grid-template-columns: 1fr; }
  .rm-recruit #content .rm-apply-side { position: static; }
  .rm-recruit #content .rm-filter-bar { grid-template-columns: 1fr 1fr; }
  .rm-recruit #content .rm-filter-field.full-sm { grid-column: 1 / -1; }
  .rm-recruit #content .rm-filter-reset { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rm-recruit #content .rm-jobs-grid { grid-template-columns: 1fr; }
  .rm-recruit #content .rm-form-grid { grid-template-columns: 1fr; }
  .rm-recruit #content .rm-form-card { padding: 22px; }
}
@media (max-width: 549px) {
  .rm-recruit #content .rm-filter-bar { grid-template-columns: 1fr; }
  .rm-recruit .rm-page-head { padding: 36px 0 30px; }
}

/* =============================================================================
   25. FIX HIỂN THỊ TRONG UX BUILDER (KHÔNG ẢNH HƯỞNG FRONTEND)
   -----------------------------------------------------------------------------
   Trong builder, Flatsome bọc mỗi phần tử [ux_text] bằng
   <div class="uxb-wrapper uxb-wrapper--text uxb-draggable"> để kéo-thả.
   Lớp bọc này KHÔNG tồn tại ở frontend, nên mọi rule dưới đây chỉ chạy
   trong builder (selector đều chứa .uxb-wrapper--text).

   Vấn đề: thân thẻ cờ .rm-pennant dùng .col-inner{display:flex}. Ở frontend,
   badge số (.rm-pennant-badge) là position:absolute nên ra khỏi dòng, thân cờ
   (flex:1) chiếm trọn cột. Trong builder, badge bị bọc bởi .uxb-wrapper--text
   NẰM TRONG DÒNG -> thành 1 flex-item cạnh thân cờ, bóp thân cờ hẹp lại,
   chữ bị dồn xuống nhiều dòng.

   LƯU Ý: KHÔNG dùng selector rộng .rm-pennant .uxb-wrapper--text — vì phần MÔ TẢ
   của thẻ cờ ("Đặt sự hài lòng...") CŨNG là [ux_text] nằm trong .icon-box-text,
   nên cũng mang class .uxb-wrapper--text. Chỉ nhắm ĐÚNG wrapper chứa badge bằng
   :has(> .rm-pennant-badge) (mô tả có con class rỗng nên không khớp).

   Cách xử lý: cho CHÍNH wrapper-của-badge nhận đúng vị trí absolute của badge
   (ra khỏi dòng) -> thân cờ full-width trở lại; badge bên trong về static để
   lấp đầy wrapper. Wrapper vẫn là 1 hộp 56x56 nên vẫn bấm chọn / kéo được.
   ========================================================================== */
.rm-recruit #content .rm-pennant .uxb-wrapper--text:has(> .rm-pennant-badge) {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  z-index: 3;
}
.rm-recruit #content .rm-pennant .uxb-wrapper--text > .rm-pennant-badge {
  position: static;
  top: auto;
  left: auto;
  transform: none;
}