/* ============================================================
   KetBan KB8-1: Centered Shell Layout
   ----------------------------------------------------------
   Mục đích:
   - Bóp toàn bộ web (header + sidebar + content + footer) vào
     khung centered max-width 1360px trên desktop
   - Hai bên màn hình: gradient nâu đậm (outer canvas)
   - Mobile (<1024px) GIỮ NGUYÊN, full-width 100%

   Tải SAU app.css để override các rule full-width.
   ============================================================ */

:root{
  --shell-max-width: 1360px;
  --shell-outer-bg: #1a1410;
  --shell-outer-bg-gradient: linear-gradient(180deg, #2a221e 0%, #1a1410 60%, #14100d 100%);
  --shell-side-shadow: 0 0 60px rgba(0,0,0,0.45);
}

/* ============ OUTER CANVAS (background ngoài shell) ============ */
/* Dùng pseudo-element trên body để tạo gradient ngoài shell mà
   không phá pattern overflow của các page khác. */
@media (min-width: 1024px){
  body{
    background: var(--shell-outer-bg-gradient);
    background-attachment: fixed;
  }
}

/* ============ SHELL WRAPPER ============ */
/* Bóp .header và .home-layout vào shell trên desktop.
   Dưới 1024px: KHÔNG bóp, giữ nguyên responsive cũ. */
@media (min-width: 1024px){
  body > .header,
  body > .home-layout{
    max-width: var(--shell-max-width);
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg);
    box-shadow: var(--shell-side-shadow);
  }

  /* Header sticky vẫn hoạt động trong shell.
     Background gradient của header (đã set trong app.css) tự bám
     vì box-shadow ở trên đè qua. Cần đảm bảo header không "ăn" ra
     ngoài shell width khi sticky. */
  body > .header{
    /* Đè rule sticky cũ — vẫn sticky, nhưng width không vượt shell */
    position: sticky;
    top: 0;
    z-index: 200;
  }

  /* Khi sticky, top:0 sẽ giữ header dán đỉnh viewport.
     Nhưng vì có max-width + margin auto, header tự center trong viewport. */

  /* home-layout: grid sidebar + content vẫn hoạt động bình thường.
     Sidebar bên trong sẽ tự lùi vào theo shell. */
  body > .home-layout{
    /* min-height để outer canvas (body bg) không bị "trống đáy" khi
       content ngắn */
    min-height: calc(100vh - 56px);
  }
}

/* ============ SIDEBAR fix sticky position ============ */
/* Sidebar dùng position:sticky top:56px. Trong shell vẫn hoạt động
   đúng vì sticky tham chiếu nearest scrolling ancestor (body). */

/* ============ FOOTER trong shell ============ */
/* footer nằm trong main.content nên đã tự bị giới hạn theo content
   width. Chỉ cần đảm bảo không có rule nào kéo nó ra. */

/* ============ ULTRA-WIDE (>1600px) optional polish ============ */
@media (min-width: 1600px){
  :root{
    --shell-side-shadow: 0 0 80px rgba(0,0,0,0.55);
  }
}

/* ============ Tinh chỉnh padding bên trong shell ============ */
/* Trên màn rộng, hero cần không quá rộng. Section đã có max-width
   1200px sẵn (từ app.css inline) nhưng giờ container shell 1360 -
   sidebar 250 = ~1110px khả dụng → để section auto fill là OK. */
@media (min-width: 1024px){
  /* Bỏ giới hạn 1200px của section CŨ (set trong app.blade.php inline)
     vì giờ shell đã là 1360px → để section fill content area */
  body[data-layout-sidebar="1"] .content > .section,
  body[data-layout-sidebar="1"] .content > .hero{
    max-width: none !important;
  }
}

/* ============ NO-SIDEBAR variant ============ */
/* Khi sidebar tắt (no-sidebar class), content full shell width.
   Section vẫn nên có max-width vừa phải để dễ đọc. */
@media (min-width: 1024px){
  .home-layout.no-sidebar .content > .section,
  .home-layout.no-sidebar .content > .hero{
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   KetBan KB8-2: Post Detail Hero Portrait + Polish
   ----------------------------------------------------------
   Block sau sẽ được APPEND vào cuối kb8-shell.css (KB8-1).
   Idempotent — apply.sh check marker trước khi append.
   ============================================================ */

/* ===== BEGIN ===== */

/* Hero ảnh portrait 3:4 — giống card ngoài trang chủ.
   Áp dụng class .post-hero-portrait (thêm mới, KHÔNG ghi đè
   .post-hero cũ vì có thể được dùng ở chỗ khác). */
.post-hero-portrait{
  aspect-ratio: 3 / 4;
  max-width: 640px;
  margin: 0 auto 18px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg3);
  position: relative;
  /* Override max-height của .post-hero cũ */
  max-height: none !important;
}
.post-hero-portrait img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Trên mobile <600px: vẫn giữ portrait nhưng fill width */
@media (max-width: 599px){
  .post-hero-portrait{
    max-width: 100%;
    border-radius: 10px;
  }
}

/* ===== KB7-fix: Ảnh khác trong gallery ĐỒNG NHẤT với thumbnail (3/4 + max-width 640px) ===== */
.post-gallery .pg-grid{
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: center !important;
  gap: 18px !important;
}
.post-gallery .pg-item{
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  max-width: 640px !important;
  height: auto !important;
  border-radius: 14px;
  background: var(--bg3);
  overflow: hidden;
  display: block;
}
.post-gallery .pg-item img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 599px){
  .post-gallery .pg-item{
    max-width: 100% !important;
    border-radius: 10px;
  }
}

/* ===== Polish: Related posts thumbs tăng size cho dễ nhìn ===== */
.post-sidebar .related-item{
  padding: 10px 0;
  gap: 12px;
}
.post-sidebar .ri-thumb{
  width: 72px;
  height: 96px; /* 3:4 ratio */
  border-radius: 8px;
}

/* ===== Polish: Post content readable max-width ===== */
/* Chỉ apply trên desktop trong shell, tránh dòng quá dài khó đọc.
   Áp dụng cho .post-content (text content render từ Trix). */
@media (min-width: 1024px){
  .post-main .post-content{
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Heading + author row + breadcrumb cũng nên align cùng readable column.
     Nhưng để giữ design hiện tại không bị xáo, chỉ giới hạn .post-content
     thôi — các phần khác giữ full content area. */
}

/* ===== END ===== */


/* ============================================================
   KetBan KB8-3: Unified Theme (Xanh-tím than ảo) + Dropdown Fix
   ----------------------------------------------------------
   Block sau sẽ được APPEND vào cuối kb8-shell.css.
   Idempotent — apply.sh check marker trước khi append.

   Mục tiêu:
   1. Đổi outer canvas + shell sang cùng tông xanh-tím than ảo
      (gradient mịn, không ranh giới rõ giữa outer và shell)
   2. Fix dropdown user: bám đúng cạnh shell, không bay ra góc viewport
   ============================================================ */

/* ===== BEGIN ===== */

/* ──────────────────────────────────────────────────────────────
   1. UNIFIED THEME — Xanh-tím than ảo
   ──────────────────────────────────────────────────────────────
   Override các biến màu cốt lõi để toàn site hài hòa.
   Tông chung: deep navy → tím-than → blue-violet ảo.

   Outer canvas (body bg ngoài shell): gradient tối hơn shell ~8%
   Shell bg (--bg): tông giữa
   Card bg (--bg2): nhạt hơn shell ~6% (nổi card)
   Input/control bg (--bg3): nhạt hơn bg2 ~4% */
:root{
  /* Core dark palette — xanh-tím than ảo */
  --bg:      #14172a;   /* shell main bg (sâu, hơi tím) */
  --bg2:     #1c2138;   /* card / panel bg (sáng hơn nhẹ) */
  --bg3:     #252a45;   /* input / chip bg */
  --border:  #2e3556;   /* border subtle, hơi violet */

  /* Accent giữ nguyên (xanh-tím gradient đã đẹp) */
  /* --accent: #2563eb; --accent2: #7c3aed; — không đổi */

  /* Text mềm hơn cho tông tối */
  --text:    #e4e6f1;
  --text2:   #9ca3c4;
  --text3:   #6a7299;
}

/* Outer canvas: gradient ảo dùng cùng tông, tối hơn shell chút */
@media (min-width: 1024px){
  body{
    background:
      radial-gradient(ellipse at 50% 0%,
        rgba(124, 58, 237, 0.08) 0%,
        transparent 50%),
      radial-gradient(ellipse at 50% 100%,
        rgba(37, 99, 235, 0.05) 0%,
        transparent 50%),
      linear-gradient(180deg,
        #0d0f1f 0%,
        #0a0c1a 50%,
        #0d0f1f 100%) !important;
    background-attachment: fixed !important;
  }
}

/* Mobile <1024px: body bg dùng --bg (không cần outer canvas) */
@media (max-width: 1023px){
  body{ background: var(--bg) !important; }
}

/* Shell wrapper (header + home-layout) đã có max-width từ .
   Override background-color sang gradient mịn để shell và outer
   liền mạch hơn, không có cạnh cứng. */
@media (min-width: 1024px){
  body > .header{
    background:
      linear-gradient(180deg,
        rgba(20, 23, 42, 0.95) 0%,
        var(--bg2) 100%) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }

  body > .home-layout{
    /* Mềm cạnh shell: dùng gradient từ trên xuống thay vì flat color */
    background:
      linear-gradient(180deg,
        var(--bg) 0%,
        #161930 100%) !important;
    /* Box-shadow mềm hơn, có chút màu tím để hợp tông */
    box-shadow:
      0 0 80px rgba(124, 58, 237, 0.08),
      0 0 40px rgba(0, 0, 0, 0.4) !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. POLISH các thành phần để hài hòa với palette mới
   ────────────────────────────────────────────────────────────── */

/* Sidebar bg đồng bộ shell */
@media (min-width: 1024px){
  .d-sidebar{
    background: transparent !important;
    border-right: 1px solid var(--border) !important;
  }
}

/* Footer hài hòa, gradient từ shell xuống đáy */
.footer{
  background:
    linear-gradient(180deg,
      #0f1226 0%,
      #0a0c1c 100%) !important;
  border-top: 1px solid var(--border) !important;
}

/* Hero section gradient hợp tông */
.hero{
  background:
    linear-gradient(135deg,
      #14172a 0%,
      #1c1f3a 50%,
      #14172a 100%) !important;
}
.hero::before{
  background: radial-gradient(circle,
    rgba(124, 58, 237, 0.12) 0%,
    transparent 65%) !important;
}
.hero::after{
  background: radial-gradient(circle,
    rgba(37, 99, 235, 0.10) 0%,
    transparent 65%) !important;
}

/* Card hover glow tông tím để hài hòa */
.card:hover,
.post-card:hover{
  border-color: var(--accent2) !important;
  box-shadow: 0 12px 32px rgba(124, 58, 237, 0.18) !important;
}

/* ──────────────────────────────────────────────────────────────
   3. FIX DROPDOWN USER — bám đúng vị trí avatar
   ──────────────────────────────────────────────────────────────
   Vấn đề: .dropdown dùng position:fixed; right:12px → bám viewport
   edge thật. Khi shell bóp 1360px centered, dropdown bay ra ngoài
   shell sang góc phải viewport.

   Fix: dùng calc() để tính right offset động.
   - Mobile (<1024px): right:12px (giữ nguyên)
   - Desktop (≥1024px) viewport ≤ shell: right:12px
   - Desktop viewport > shell: right = (viewport - shell)/2 + 12px
     → bám đúng cạnh phải shell với padding 12px

   Dùng max() để tự động chọn giá trị lớn hơn (CSS native, no JS). */
.dropdown{
  /* Override right: từ CSS gốc (right:12px) sang calc động */
  right: max(12px, calc((100vw - var(--shell-max-width)) / 2 + 12px)) !important;
  /* Tông màu hài hòa */
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 1px rgba(124, 58, 237, 0.4) !important;
}

/* Dropdown items hover hợp tông */
.dd-item:hover{
  background: var(--bg3) !important;
}

/* ──────────────────────────────────────────────────────────────
   4. SUBTLE accent cho input + control để liền mạch
   ────────────────────────────────────────────────────────────── */

/* Search box trong header */
.h-search-form{
  background: rgba(37, 42, 69, 0.6) !important;
  backdrop-filter: blur(4px);
}

/* Search results dropdown */
.h-search-results{
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 1px rgba(124, 58, 237, 0.3) !important;
}

/* Login/Register buttons hài hòa hơn */
.btn-login{
  background: rgba(37, 42, 69, 0.8) !important;
  border-color: var(--border) !important;
}
.btn-login:hover{
  border-color: var(--accent2) !important;
  color: var(--accent2) !important;
}

/* ===== END ===== */


/* ============================================================
   KB-FIX-1: Align top navbar với mép phải sidebar
   ----------------------------------------------------------
   Mục tiêu: Trên desktop có sidebar, .h-cats (Phổ biến / Mới
   nhất / Thảo luận / Viết bài) phải bắt đầu căn lề trái với
   cột content (= 250px tính từ trái shell, ngang với top sidebar)
   thay vì căn giữa header.

   Cách làm:
   - Cố định width của .h-left = 250px (= width của sidebar)
     → toàn bộ logo block chiếm cột 1 của shell.
   - .h-cats bỏ flex:1 + justify-content:center, đổi sang
     justify-content:flex-start để menu bắt đầu sát mép trái
     của khu vực còn lại (= mép phải sidebar).
   - Khi user chưa login (.h-right có nút Đăng nhập/Đăng ký),
     hoặc đã login (.h-user), các action vẫn dồn về phải bằng
     margin-left:auto trên search box.

   Chỉ apply cho desktop có sidebar (≥1024px + body[data-layout-sidebar="1"])
   để mobile và layout no-sidebar không bị ảnh hưởng.
   ============================================================ */

@media (min-width: 1024px){
  body[data-layout-sidebar="1"] > .header > .h-left{
    width: 250px !important;
    flex-shrink: 0 !important;
    /* giữ logo cùng vị trí với content cột 1 (sidebar) */
  }

  body[data-layout-sidebar="1"] > .header > .h-cats{
    flex: 0 1 auto !important;       /* override flex:1 từ app.css */
    justify-content: flex-start !important;  /* override center từ app.css */
    margin-right: auto !important;   /* đẩy search + actions sang phải */
    padding-left: 16px;              /* spacing nhỏ giữa logo và menu */
  }

  /* Search box giữ max-width đã có (400px) nhưng không cần
     margin auto vì h-cats đã chiếm phần đầu */
  body[data-layout-sidebar="1"] > .header > .h-search{
    margin-left: 0 !important;
  }
}

/* ===== END ===== */

/* KB_SHELL_UI_SYNC_20260515: unify outer canvas, top nav and sidebar */
:root {
  --kb-shell-bg: #14172a;
  --kb-shell-bg-2: #161930;
  --kb-shell-panel: #1c2138;
  --kb-shell-panel-2: #252a45;
  --kb-shell-border: rgba(148,163,184,.16);
  --kb-shell-border-strong: rgba(129,140,248,.34);
}

@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.08) 0%, transparent 46%),
      radial-gradient(ellipse at 50% 100%, rgba(37,99,235,.06) 0%, transparent 48%),
      linear-gradient(180deg, #0b0e1d 0%, #101326 54%, #0b0e1d 100%) !important;
    background-attachment: fixed !important;
  }

  body > .header,
  body > .home-layout {
    box-shadow:
      0 0 80px rgba(37,99,235,.055),
      0 0 48px rgba(0,0,0,.42) !important;
  }

  body > .header {
    background:
      linear-gradient(180deg, rgba(28,33,56,.98), rgba(20,23,42,.98)) !important;
    border-bottom: 1px solid var(--kb-shell-border) !important;
  }

  body > .home-layout {
    background:
      linear-gradient(180deg, var(--kb-shell-bg) 0%, var(--kb-shell-bg-2) 100%) !important;
  }

  .d-sidebar {
    background:
      linear-gradient(180deg, rgba(28,33,56,.94), rgba(20,23,42,.96)) !important;
    border-right: 1px solid var(--kb-shell-border) !important;
  }
}

/* Mobile keeps full-width dark theme */
@media (max-width: 1023px) {
  body {
    background: var(--kb-shell-bg) !important;
  }

  .m-sidebar {
    background:
      linear-gradient(180deg, rgba(28,33,56,.98), rgba(20,23,42,.98)) !important;
    border-right: 1px solid var(--kb-shell-border) !important;
  }
}

/* Top nav buttons/search */
.h-cat {
  background: rgba(37,42,69,.72) !important;
  border: 1px solid var(--kb-shell-border) !important;
  color: var(--text2) !important;
  border-radius: 8px !important;
}

.h-cat:hover,
.h-cat.active {
  background: linear-gradient(135deg, rgba(37,99,235,.32), rgba(124,58,237,.24)) !important;
  border-color: var(--kb-shell-border-strong) !important;
  color: #fff !important;
}

.h-search-form {
  background: rgba(15,18,38,.46) !important;
  border: 1px solid var(--kb-shell-border) !important;
  border-radius: 999px !important;
}

.h-search-form:focus-within {
  border-color: rgba(96,165,250,.48) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* Sidebar menu */
.d-sidebar .m-item,
.m-sidebar .m-item {
  color: var(--text2) !important;
  border-left-color: transparent !important;
}

.d-sidebar .m-item:hover,
.m-sidebar .m-item:hover {
  background: rgba(37,42,69,.72) !important;
  color: var(--text) !important;
}

.d-sidebar .m-item.active,
.m-sidebar .m-item.active,
.d-sidebar .m-item-parent.active,
.m-sidebar .m-item-parent.active {
  background: linear-gradient(90deg, rgba(37,99,235,.18), rgba(124,58,237,.12)) !important;
  border-left-color: var(--accent) !important;
  color: #fff !important;
}

.d-sidebar .m-item.active .m-item-l span,
.m-sidebar .m-item.active .m-item-l span {
  color: #fff !important;
}

/* Sidebar group/header rows */
.m-item-parent,
.m-item-group,
.d-sidebar .m-item-parent,
.m-sidebar .m-item-parent {
  background: transparent !important;
}

.d-sidebar .sb-submenu,
.m-sidebar .sb-submenu {
  background: rgba(15,18,38,.10) !important;
}

/* Dropdown/account surfaces */
.dropdown,
.h-search-results {
  background: var(--kb-shell-panel) !important;
  border: 1px solid var(--kb-shell-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.44) !important;
}

.dd-item:hover {
  background: var(--kb-shell-panel-2) !important;
}

/* Content base */
.content {
  background:
    linear-gradient(180deg, rgba(20,23,42,.90), rgba(20,23,42,.98)) !important;
}