/* ============================================================
   iig-inner.css — giao diện các trang trong (tin tức, bài thi, đăng ký,
   giới thiệu) theo tông cam/đỏ/vàng, dùng CHUNG header/footer IIG.
   Class đặt tiền tố ip- / ipage để không đụng CSS gốc của IIG.
   ============================================================ */

:root {
  --ip-red: #e4002b; --ip-orange: #ff6a00; --ip-yellow: #facb0e;
  --ip-dark: #b00020; --ip-ink: #241a12; --ip-muted: #6f6157;
  --ip-line: #efe6dd; --ip-soft: #fff8f1;
  --ip-grad: linear-gradient(120deg, #e4002b 0%, #ff6a00 60%, #facb0e 100%);
  --ip-shadow: 0 14px 34px rgba(228,0,43,.18);
}

.ipage { padding-block: 2.4rem 3.2rem; }
.ipage-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; }

/* Dải tiêu đề trang — chừa khoảng trên để tiêu đề không bị logo nổi (góc trái) che.
   Trên mobile logo ~92px nên vẫn cần padding-top lớn. */
.ip-hero { background: var(--ip-grad); color: #fff; padding: 6rem 0 2rem; }
@media (min-width: 1024px) { .ip-hero { padding-top: 5.4rem; } }
.ip-hero .ipage-wrap { display: flex; flex-direction: column; gap: .3rem; }
.ip-hero h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.ip-breadcrumb { font-size: .85rem; color: rgba(255,255,255,.9); }
.ip-breadcrumb a { color: #fff; text-decoration: none; opacity: .9; }
.ip-breadcrumb a:hover { text-decoration: underline; }

/* Tiêu đề khối trong trang (nền trắng) */
.ip-section-title { position: relative; font-size: 1.5rem; color: var(--ip-ink); margin: 0 0 1.4rem; padding-bottom: .5rem; }
.ip-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; border-radius: 4px; background: var(--ip-grad); }

/* Lưới thẻ */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.3rem; }
.ip-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ip-line); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.08); transition: transform .14s, box-shadow .14s; }
.ip-card:hover { transform: translateY(-3px); box-shadow: var(--ip-shadow); }
.ip-thumb { aspect-ratio: 16/10; background: var(--ip-soft); overflow: hidden; }
.ip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ip-thumb.ph { display: grid; place-items: center; background: linear-gradient(135deg, #ffe08a, #ff6a00); color: #fff; font-weight: 800; font-size: 1.5rem; }
.ip-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ip-tag { align-self: start; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--ip-red); background: #ffe9d6; padding: .2rem .55rem; border-radius: 999px; }
.ip-card h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.ip-card h3 a { color: var(--ip-ink); text-decoration: none; }
.ip-card h3 a:hover { color: var(--ip-red); }
.ip-excerpt { margin: 0; color: var(--ip-muted); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; }
.ip-meta { margin-top: auto; font-size: .82rem; color: var(--ip-muted); }

/* Nút */
.ip-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.3rem; border-radius: 999px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: .95rem; font-family: inherit; }
.ip-btn-primary { background: var(--ip-grad); color: #fff; box-shadow: var(--ip-shadow); }
.ip-btn-primary:hover { color: #fff; filter: brightness(1.03); }
.ip-btn-outline { background: #fff; color: var(--ip-red); border: 2px solid var(--ip-orange); }
.ip-btn-lg { padding: .9rem 1.7rem; font-size: 1.05rem; }
.ip-btn-sm { padding: .45rem .9rem; font-size: .85rem; }

/* Chips lọc */
.ip-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.ip-chip { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--ip-line); background: #fff; color: var(--ip-ink); font-weight: 600; font-size: .9rem; text-decoration: none; }
.ip-chip:hover { border-color: var(--ip-orange); color: var(--ip-red); }
.ip-chip.active { background: var(--ip-grad); color: #fff; border-color: transparent; }

/* Phân trang */
.ip-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.ip-pagination a, .ip-pagination span { min-width: 42px; text-align: center; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--ip-line); color: var(--ip-ink); font-weight: 600; text-decoration: none; }
.ip-pagination .current { background: var(--ip-grad); color: #fff; border-color: transparent; }

/* Bài viết chi tiết */
.ip-article { max-width: 820px; margin-inline: auto; }
.ip-article h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.25; margin: .4rem 0 .6rem; color: var(--ip-ink); }
.ip-article .ip-meta2 { color: var(--ip-muted); font-size: .9rem; margin-bottom: 1.2rem; }
.ip-article .ip-figure { border-radius: 14px; overflow: hidden; margin-bottom: 1.4rem; }
.ip-body { font-size: 1.05rem; color: #2c2117; line-height: 1.75; }
.ip-body img { border-radius: 10px; margin-block: 1rem; max-width: 100%; height: auto; }
.ip-body h2, .ip-body h3 { color: var(--ip-ink); }
.ip-body a { color: var(--ip-red); text-decoration: underline; }

/* Form đăng ký */
.ip-form-card { background: #fff; border: 1px solid var(--ip-line); border-radius: 14px; box-shadow: var(--ip-shadow); padding: 1.6rem; max-width: 660px; margin-inline: auto; }
.ip-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ip-field { display: flex; flex-direction: column; gap: .35rem; }
.ip-field.full { grid-column: 1 / -1; }
.ip-field label { font-weight: 700; font-size: .92rem; }
.ip-req { color: var(--ip-red); }
.ip-field input, .ip-field select, .ip-field textarea { padding: .7rem .8rem; border: 1.5px solid var(--ip-line); border-radius: 10px; font: inherit; width: 100%; background: #fff; }
.ip-field input:focus, .ip-field select:focus, .ip-field textarea:focus { outline: none; border-color: var(--ip-orange); box-shadow: 0 0 0 3px rgba(255,106,0,.15); }
.ip-field.has-error input, .ip-field.has-error select { border-color: var(--ip-red); }
.ip-err { color: var(--ip-red); font-size: .85rem; }
.ip-alert { padding: .9rem 1.1rem; border-radius: 10px; margin-bottom: 1.2rem; font-weight: 600; }
.ip-alert-success { background: #e6f7ea; color: #1a7f37; border: 1px solid #b7e4c4; }
.ip-alert-error { background: #fdeaea; color: var(--ip-dark); border: 1px solid #f5c2c2; }

/* Nhóm bài thi */
.ip-testgroup { margin-bottom: 2.2rem; }
.ip-testgroup h2 { font-size: 1.15rem; color: var(--ip-dark); margin: 0 0 1rem; border-inline-start: 5px solid var(--ip-orange); padding-inline-start: .7rem; }

/* Dải CTA */
.ip-cta { background: var(--ip-grad); color: #fff; border-radius: 16px; padding: 2rem 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 2rem; }
.ip-cta h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.ip-cta .ip-btn { background: #fff; color: var(--ip-red); }

.ip-empty { text-align: center; color: var(--ip-muted); padding: 2.5rem 1rem; }

@media (max-width: 720px) { .ip-form-grid { grid-template-columns: 1fr; } }