/* =========================================================
   Giao diện hiện đại cho Trang cá nhân (/pages/*) và Sửa trang (/updatePage)
   ========================================================= */
:root {
    --pg-accent: #2563eb;
    --pg-accent-2: #7c3aed;
    --pg-ink: #0f172a;
    --pg-text: #334155;
    --pg-muted: #64748b;
    --pg-faint: #94a3b8;
    --pg-border: #e5e8ee;
    --pg-bg: #fff;
    --pg-bg-soft: #f6f8fb;
    --pg-r: 14px;
    --pg-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
    --pg-shadow-hover: 0 12px 30px rgba(37,99,235,.16);
}

/* ---------- Header trang (cover + logo + tên) ---------- */
.wp-content-index .coverContent {
    border: none;
    height: 300px;
    border-radius: var(--pg-r);
    box-shadow: var(--pg-shadow);
    background: linear-gradient(135deg, #1e293b, #0f172a);
}
.wp-content-index #pcv { height: 300px; border-radius: var(--pg-r); }
.wp-content-index #pcv:after {
    content: ""; position: absolute; inset: 0; border-radius: var(--pg-r);
    background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,.72) 100%);
    pointer-events: none;
}
.wp-content-index #pcv img { height: 300px; object-fit: cover; }
.wp-content-index #plg {
    width: 118px; max-height: 118px; top: auto; bottom: 18px; left: 20px;
    border: 3px solid #fff; border-radius: 16px; padding: 0; overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.35); background: #fff; z-index: 3;
}
.wp-content-index #plg img { width: 112px; height: 112px; object-fit: cover; }
.wp-content-index .pn {
    top: auto; bottom: 42px; left: 156px; font-size: 26px; font-weight: 800;
    line-height: 1.2; z-index: 3; text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.wp-content-index .ct { bottom: 16px; }
.wp-content-index .ct div { background: rgba(15,23,42,.5); border-radius: 20px; backdrop-filter: blur(3px); line-height: 30px; height: 30px; }
.wp-content-index .ud { top: 16px; }
.wp-content-index .ud a {
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
    padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(3px); text-decoration: none;
}
.wp-content-index .ud a:hover { background: rgba(255,255,255,.28); }

/* ---------- Danh sách bài viết (card) ---------- */
.pg-list { display: flex; flex-direction: column; gap: 16px; margin: 6px 0 20px; }
.pg-card {
    position: relative; display: flex; align-items: stretch; gap: 0; text-decoration: none;
    background: var(--pg-bg); border: 1px solid var(--pg-border); border-radius: var(--pg-r);
    overflow: hidden; box-shadow: var(--pg-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pg-card:hover { transform: translateY(-3px); box-shadow: var(--pg-shadow-hover); border-color: #cdd8ee; }
/* tiêu đề = "stretched link" phủ cả card -> bấm đâu cũng mở bài (HTML hợp lệ, không lồng <a>) */
.pg-title a { color: inherit; text-decoration: none; }
.pg-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pg-admin { position: relative; z-index: 2; }
.pg-admin a { color: var(--pg-faint); text-decoration: none; }
.pg-admin a:hover { color: var(--pg-accent); }
/* ảnh đại diện */
.pg-thumb { flex: 0 0 216px; width: 216px; position: relative; background: var(--pg-bg-soft); overflow: hidden; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:before { content: ""; display: block; padding-top: 66%; } /* tỉ lệ 3:2 */
.pg-thumb img { position: absolute; inset: 0; }
/* bài KHÔNG có ảnh -> ô chữ cái gradient */
.pg-noimg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pg-accent), var(--pg-accent-2));
    color: #fff; font-size: 54px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.pg-noimg:after {
    content: ""; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
    border-radius: 50%; background: rgba(255,255,255,.12);
}
/* nội dung */
.pg-body { flex: 1 1 auto; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; }
.pg-cat {
    display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700;
    color: var(--pg-accent); background: #eef4ff; padding: 3px 10px; border-radius: 20px; margin-bottom: 9px;
}
.pg-title {
    font-size: 17.5px; line-height: 1.35; font-weight: 700; color: var(--pg-ink); margin: 0 0 7px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-card:hover .pg-title { color: var(--pg-accent); }
.pg-excerpt {
    font-size: 14px; line-height: 1.6; color: var(--pg-muted); margin: 0 0 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--pg-faint); }
.pg-meta span { display: inline-flex; align-items: center; gap: 5px; }
.pg-meta i { color: var(--pg-faint); }
.pg-empty { padding: 40px 20px; text-align: center; color: var(--pg-muted); background: var(--pg-bg-soft); border-radius: var(--pg-r); border: 1px dashed var(--pg-border); }
.pg-empty a { color: var(--pg-accent); font-weight: 600; }

/* sidebar box đẹp hơn */
#prmn .bxw { border: 1px solid var(--pg-border); border-radius: var(--pg-r); box-shadow: var(--pg-shadow); overflow: hidden; margin-bottom: 16px; }
#prmn .bxw .tittle { background: var(--pg-bg-soft); border-bottom: 1px solid var(--pg-border); font-weight: 700; color: var(--pg-ink); font-size: 14px; padding: 12px 14px; }
#prmn .bxw div { font-size: 13.5px; line-height: 1.65; color: var(--pg-text); }

@media (max-width: 640px) {
    .pg-card { flex-direction: column; }
    .pg-thumb { flex-basis: auto; width: 100%; }
    .pg-thumb:before { padding-top: 52%; }
    .pg-noimg { font-size: 46px; }
    .wp-content-index .pn { left: 20px; bottom: 16px; font-size: 20px; }
    .wp-content-index #plg { position: static; margin: 12px auto -60px; display: block; }
}

/* =========================================================
   /updatePage — form + thanh tiến trình (stepper)
   ========================================================= */
.up-wrap { max-width: 760px; margin: 18px auto 40px; padding: 0 14px; }
.up-card { background: var(--pg-bg); border: 1px solid var(--pg-border); border-radius: 18px; box-shadow: var(--pg-shadow); padding: 26px 26px 22px; display: flow-root; width: 100%; box-sizing: border-box; }
/* các panel bước nằm gọn trong card, không tràn / không float lung tung */
.up-card > div[id^="p"] { clear: both; width: 100%; box-sizing: border-box; }
.up-card .form-group:after { content: ""; display: table; clear: both; }
/* bước 1: prefix link + ô nhập để inline thay vì float (tránh sập chiều cao card) */
.pContent #p0 .control-label span[style*="float"] { float: none !important; display: inline-block; vertical-align: middle; }
.pContent #p0 #pl { float: none !important; display: inline-block; vertical-align: middle; width: 260px; max-width: 62%; margin-left: 6px; }
.up-head { text-align: center; margin-bottom: 20px; }
.up-head h1 { font-size: 24px; font-weight: 800; color: var(--pg-ink); margin: 0 0 4px; }
.up-head p { color: var(--pg-muted); font-size: 14px; margin: 0; }

/* ẩn nav tab cũ (pages.js vẫn cần các #m1..#m4) */
.pContent > .large-12.columns:first-child .main-nav { display: none; }

/* stepper */
.up-steps { position: relative; display: flex; justify-content: space-between; margin: 6px 0 26px; }
.up-progress { position: absolute; top: 17px; left: 6%; right: 6%; height: 4px; background: var(--pg-border); border-radius: 3px; z-index: 0; }
.up-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2)); border-radius: 3px; transition: width .35s ease; }
.up-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1 1 0; }
.up-step .dot {
    width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--pg-border);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--pg-faint);
    transition: all .2s ease;
}
.up-step .lbl { font-size: 11.5px; color: var(--pg-faint); font-weight: 600; text-align: center; line-height: 1.25; }
.up-step.is-active .dot { border-color: var(--pg-accent); color: var(--pg-accent); box-shadow: 0 0 0 4px rgba(37,99,235,.14); }
.up-step.is-active .lbl { color: var(--pg-accent); }
.up-step.is-done .dot { background: var(--pg-accent); border-color: var(--pg-accent); color: #fff; }
.up-step.is-done .dot:after { content: "\2713"; }
.up-step.is-done .dot .num { display: none; }
.up-step.is-done .lbl { color: var(--pg-text); }

/* các panel form */
.pContent #p0, .pContent #p1, .pContent #p2, .pContent #p4, .pContent #p5 { padding-top: 4px; }
.pContent .form-group { margin-bottom: 18px; }
.pContent .control-label { display: block; font-weight: 600; font-size: 13.5px; color: var(--pg-ink); margin-bottom: 7px; }
.pContent input.form-control, .pContent textarea.form-control, .pContent #pl {
    width: 100%; max-width: 100%; padding: 11px 13px; border: 1px solid #cfd6e0; border-radius: 10px;
    font-size: 15px; box-sizing: border-box; background: #fff; transition: border-color .15s, box-shadow .15s; color: var(--pg-ink);
}
.pContent input.form-control:focus, .pContent textarea.form-control:focus, .pContent #pl:focus {
    border-color: var(--pg-accent); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.pContent textarea.form-control { min-height: 96px; resize: vertical; }
.pContent #pln { font-size: 12.5px; color: var(--pg-faint); }
.pContent #pln .red, .pContent .red { color: #dc2626; }

/* nút bấm hiện đại (đè Foundation + btn-warning cũ) */
.pContent .btn, .pContent button.btn-warning {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--pg-accent); color: #fff !important; border: none; border-radius: 10px;
    padding: 11px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer; margin: 6px 8px 6px 0;
    transition: background .15s, box-shadow .15s, transform .05s; text-shadow: none;
}
.pContent .btn:hover, .pContent button.btn-warning:hover { background: #1d4ed8; box-shadow: 0 6px 18px rgba(37,99,235,.32); }
.pContent .btn:active, .pContent button.btn-warning:active { transform: translateY(1px); }
.pContent button[id^="bk"] { background: #eef2f7; color: var(--pg-text) !important; }
.pContent button[id^="bk"]:hover { background: #e2e8f2; box-shadow: none; }
.pContent #upc6, .pContent #pc6 { background: linear-gradient(135deg, #16a34a, #15803d); }
.pContent #upc6:hover, .pContent #pc6:hover { box-shadow: 0 6px 18px rgba(22,163,74,.32); }

/* xem trước logo/banner */
.pContent .logo { border: 1px solid var(--pg-border); border-radius: 12px; box-shadow: var(--pg-shadow); max-width: 250px; max-height: 180px; }
.pContent .coverContent { border: 1px solid var(--pg-border); border-radius: 12px; box-shadow: var(--pg-shadow); height: auto; margin: 0; }
.pContent .coverContent img { width: 100%; height: auto; display: block; border-radius: 12px; }
.pContent input[type=file] { margin-top: 10px; font-size: 13px; }

@media (max-width: 560px) {
    .up-card { padding: 18px 14px; }
    .up-step .lbl { display: none; }
    .up-progress { top: 17px; }
}