/* ============================================================================
   LALATV CMS — LỚP GIAO DIỆN HỒNG (phủ lên AdminLTE/Oze, KHÔNG đổi chức năng)
   Nạp CUỐI CÙNG trong _Root.cshtml. Gỡ bỏ = xoá 1 dòng <link>, giao diện về cũ.
   Tone lấy từ web thật lalatv.com.vn: #e28cb0 (chủ đạo), #c2648f, #b0537e,
   nền nhạt #ffedf4 / #f3cfdd, nhấn vàng #fed731, đỏ #d35448.
   Tạo 01/10/2026.
   ========================================================================= */

:root {
    --lala-hong: #e28cb0;
    --lala-hong-600: #c2648f;
    --lala-hong-700: #b0537e;
    --lala-hong-800: #8f3f66;
    --lala-hong-50: #ffedf4;
    --lala-hong-100: #f3cfdd;
    --lala-vang: #fed731;
    --lala-do: #d35448;
    --lala-muc: #212529;
    --lala-mo: #6c757d;
    --lala-vien: #e7e2e4;
    --lala-nen: #f7f5f6;
    --lala-bong: 0 1px 2px rgba(31, 12, 22, .06), 0 1px 3px rgba(31, 12, 22, .04);
}

/* ---------- Nền chung + chữ ---------- */
body,
.content-wrapper,
.right-side {
    background: var(--lala-nen) !important;
    color: var(--lala-muc);
}

body {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--lala-hong-700); }
a:hover, a:focus { color: var(--lala-hong-800); }

.content { padding: 18px 20px 28px; }

/* ---------- Thanh trên cùng ---------- */
.skin-yellow .main-header .navbar,
.main-header .navbar {
    background: linear-gradient(135deg, var(--lala-hong-700) 0%, var(--lala-hong-600) 100%) !important;
    box-shadow: 0 1px 4px rgba(143, 63, 102, .18);
}

.skin-yellow .main-header .logo,
.main-header .logo {
    background: var(--lala-hong-800) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 0 !important;
}

.skin-yellow .main-header .logo:hover { background: #7d3659 !important; }

.main-header .navbar .nav > li > a,
.main-header .navbar .sidebar-toggle {
    color: rgba(255, 255, 255, .92) !important;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .sidebar-toggle:hover {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

/* ---------- Menu trái ---------- */
.main-sidebar,
.left-side { background: #fff !important; border-right: 1px solid var(--lala-vien); }

.sidebar-menu > li > a {
    color: #3d3238 !important;
    font-weight: 600;
    border-left: 3px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.sidebar-menu > li > a > i { color: var(--lala-hong-600) !important; width: 20px; text-align: center; }

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: var(--lala-hong-50) !important;
    color: var(--lala-hong-800) !important;
    border-left-color: var(--lala-hong-600) !important;
}

.sidebar-menu .treeview-menu { background: #fdf9fb !important; padding-left: 6px; }

.sidebar-menu .treeview-menu > li > a {
    color: #5b4a52 !important;
    font-weight: 500;
    font-size: 13px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > i { color: var(--lala-hong) !important; }

.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a {
    background: var(--lala-hong-100) !important;
    color: var(--lala-hong-800) !important;
    border-radius: 4px;
}

.user-panel { border-bottom: 1px solid var(--lala-vien); padding: 14px 12px; }
.user-panel .info p, .user-panel > .info > p { color: var(--lala-muc) !important; font-weight: 700; }
.user-panel .image img { border: 2px solid var(--lala-hong-100); }

/* ---------- Khung nội dung (panel / box) ---------- */
.panel, .box {
    border: 1px solid var(--lala-vien) !important;
    border-radius: 10px !important;
    box-shadow: var(--lala-bong) !important;
    background: #fff;
    overflow: hidden;
}

.panel-primary, .panel-default, .panel-info, .panel-warning, .panel-success {
    border-color: var(--lala-vien) !important;
}

.panel-heading,
.panel-primary > .panel-heading,
.box-header {
    background: var(--lala-hong-50) !important;
    border-bottom: 1px solid var(--lala-hong-100) !important;
    color: var(--lala-hong-800) !important;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 12px 16px !important;
}

.panel-heading a, .panel-primary > .panel-heading a { color: var(--lala-hong-800) !important; }
.panel-body, .box-body { padding: 16px !important; }

/* ---------- Nút ---------- */
.btn {
    border-radius: 6px !important;
    font-weight: 600;
    padding: 7px 14px;
    border-width: 1px;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn + .btn { margin-left: 6px; }

.btn-primary, .btn-info {
    background: var(--lala-hong-700) !important;
    border-color: var(--lala-hong-700) !important;
    color: #fff !important;
}

.btn-primary:hover, .btn-info:hover,
.btn-primary:focus, .btn-info:focus,
.btn-primary:active, .btn-info:active {
    background: var(--lala-hong-800) !important;
    border-color: var(--lala-hong-800) !important;
}

.btn-default {
    background: #fff !important;
    border-color: #d9d2d6 !important;
    color: #4a3d44 !important;
}

.btn-default:hover { background: var(--lala-hong-50) !important; border-color: var(--lala-hong-100) !important; color: var(--lala-hong-800) !important; }

.btn-success {
    background: var(--lala-hong) !important;
    border-color: var(--lala-hong) !important;
    color: #4a1f33 !important;
}

.btn-success:hover { background: var(--lala-hong-600) !important; border-color: var(--lala-hong-600) !important; color: #fff !important; }

.btn-warning {
    background: var(--lala-vang) !important;
    border-color: #ecc41f !important;
    color: #4a3c00 !important;
}

.btn-warning:hover { background: #ecc41f !important; }

.btn-danger {
    background: var(--lala-do) !important;
    border-color: var(--lala-do) !important;
    color: #fff !important;
}

.btn-danger:hover { background: #b8443a !important; border-color: #b8443a !important; }

/* ---------- Biểu mẫu ---------- */
label, .control-label {
    font-weight: 600;
    color: #4a3d44;
    font-size: 13px;
    margin-bottom: 5px;
}

.form-control, .chosen-single, .select2-selection {
    border-radius: 6px !important;
    border-color: #ded7db !important;
    box-shadow: none !important;
    height: 36px;
    font-size: 14px;
}

.form-control:focus {
    border-color: var(--lala-hong) !important;
    box-shadow: 0 0 0 3px rgba(226, 140, 176, .22) !important;
}

.form-group { margin-bottom: 14px; }

/* ---------- Bảng dữ liệu ---------- */
.table { background: #fff; }

.table > thead > tr > th {
    background: #fbf6f8 !important;
    color: #6a5560 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    border-bottom: 2px solid var(--lala-hong-100) !important;
    vertical-align: middle;
    padding: 10px 12px !important;
}

.table > tbody > tr > td {
    border-top: 1px solid #f0ebed !important;
    padding: 10px 12px !important;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) { background: #fcfbfb; }
.table-hover > tbody > tr:hover { background: var(--lala-hong-50) !important; }

/* ---------- Phân trang ---------- */
.pagination > li > a, .pagination > li > span {
    color: var(--lala-hong-700);
    border-color: #e6dfe3;
    margin: 0 2px;
    border-radius: 6px !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > li > a:hover {
    background: var(--lala-hong-700) !important;
    border-color: var(--lala-hong-700) !important;
    color: #fff !important;
}

/* ---------- Nhãn, thẻ trạng thái ---------- */
.label-primary, .badge { background: var(--lala-hong-700) !important; }
.label-success { background: var(--lala-hong) !important; color: #4a1f33 !important; }
.label-warning { background: var(--lala-vang) !important; color: #4a3c00 !important; }
.label-danger { background: var(--lala-do) !important; }

/* ---------- Hộp thoại ---------- */
.modal-content { border-radius: 10px; border: 0; box-shadow: 0 12px 40px rgba(31, 12, 22, .18); }

.modal-header {
    background: var(--lala-hong-50);
    border-bottom: 1px solid var(--lala-hong-100);
    border-radius: 10px 10px 0 0;
}

.modal-title { color: var(--lala-hong-800); font-weight: 700; }
.modal-footer { border-top: 1px solid #f0ebed; }

/* ---------- Chân trang ---------- */
.main-footer {
    background: #fff !important;
    border-top: 1px solid var(--lala-vien) !important;
    color: var(--lala-mo);
}

/* ---------- Ô đánh dấu, thanh cuộn ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--lala-hong-700); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e3d8dd; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--lala-hong); }

/* ============================================================================
   SỬA LỖI BỐ CỤC BẢNG DỮ LIỆU (lỗi CÓ TỪ TRƯỚC, không phải do tone hồng)
   - Oze.css ép ".dataTable td { width:100px !important }" + "table-layout:fixed"
     -> mọi cột rộng đúng 100px, cột Tên bị bẻ từng chữ.
   - film_video.js in <img width="100" height="100"> -> ảnh 16:9 bị bóp vuông.
   ========================================================================= */

table.dataTable {
    table-layout: auto !important;
    width: 100% !important;
}

.dataTable td, .dataTable th {
    width: auto !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}

.dataTable td { max-width: 340px; }

/* Ảnh trong bảng: giữ đúng tỉ lệ, không bóp vuông */
.table td img,
.dataTable td img,
.input-table img {
    width: auto !important;
    height: auto !important;
    max-width: 124px;
    max-height: 84px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
}

/* Mã QR cần vuông và đủ lớn để quét */
.table td img[src*="qr"], .dataTable td img[src*="QR"] { max-width: 108px; max-height: 108px; }

/* Bảng rộng thì cuộn ngang trong khung, không phá bố cục trang */
.table-responsive, .fixed-table-body { overflow-x: auto; }

/* Cột thao tác: các nút xếp gọn, cùng cỡ */
.dataTable td a.btn, .dataTable td .btn {
    display: block;
    width: 100%;
    margin: 0 0 4px !important;
    padding: 5px 8px;
    font-size: 12px;
    text-align: center;
}

/* Ô dữ liệu gọn lại để bảng đỡ chật */
.table > tbody > tr > td { padding: 8px 10px !important; }
.table > thead > tr > th { padding: 9px 10px !important; }

/* ---------- Tiêu đề cột không bị bẻ chữ, bảng rộng thì cuộn ngang ---------- */
.table > thead > tr > th,
.dataTable th {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

#main-content { overflow-x: auto; }

/* Các cột ngắn giữ nguyên dòng cho dễ đọc */
.dataTable td { vertical-align: middle; }

/* ---------- Cột thao tác: đồng bộ thành nút viền, cùng cỡ ---------- */
.dataTable td a.btn,
.dataTable td .btn {
    background: #fff !important;
    border: 1px solid var(--lala-hong-100) !important;
    color: var(--lala-hong-700) !important;
    font-weight: 600;
    border-radius: 5px !important;
}

.dataTable td a.btn:hover,
.dataTable td .btn:hover {
    background: var(--lala-hong-50) !important;
    border-color: var(--lala-hong) !important;
    color: var(--lala-hong-800) !important;
}

.dataTable td a.btn-danger,
.dataTable td .btn-danger,
.dataTable td a[onclick*="delete"],
.dataTable td a[onclick*="Delete"],
.dataTable td a[onclick*="xoa"] {
    color: var(--lala-do) !important;
    border-color: #f2cfcb !important;
}

.dataTable td a.btn-danger:hover,
.dataTable td .btn-danger:hover,
.dataTable td a[onclick*="delete"]:hover,
.dataTable td a[onclick*="Delete"]:hover {
    background: #fdf1f0 !important;
    border-color: var(--lala-do) !important;
    color: #a83a30 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   01/10/2026 — ba việc làm đẹp chị Nga đã duyệt (mục 10.8 việc 7)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (a) Cột QR làm lưới rộng hơn màn hình ──────────────────────────────
   `film_video.js` → rendQR() vẽ mã QR cứng 128×128px vào ô cuối MỖI dòng
   (`new QRCode(..., {width:128, height:128})`), nên bảng Quản lý Video phải
   cuộn ngang. Thu ô QR về 64px bằng CSS — KHÔNG sửa JS, không đổi dữ liệu.
   Trỏ chuột vào ô thì QR nổi lên 160px (định vị tuyệt đối nên không đẩy
   dòng, neo cạnh phải nên không tràn ra ngoài màn hình) → vẫn quét được. */
.dataTable td > div[id^="qrcode"] {
    display: block;
    width: 64px;
    height: 64px;
    overflow: hidden;
}

.dataTable td > div[id^="qrcode"] canvas,
.dataTable td > div[id^="qrcode"] img {
    width: 64px !important;
    height: 64px !important;
}

/* Chỉ ô NÀO có mã QR mới bị bó 72px — các lưới khác không đụng tới. */
.dataTable td:has(> div[id^="qrcode"]) {
    width: 72px;
}

.dataTable td > div[id^="qrcode"]:hover {
    position: relative;
    overflow: visible;
    z-index: 60;
}

.dataTable td > div[id^="qrcode"]:hover canvas,
.dataTable td > div[id^="qrcode"]:hover img {
    position: absolute;
    top: -48px;
    right: 0;
    width: 160px !important;
    height: 160px !important;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--lala-hong-100);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(176, 83, 126, .28);
}

/* ── (b) Ẩn nút "Live Stream đang test đừng dùng" ───────────────────────
   Có ở Views/film_video/Index.cshtml và UserUpload.cshtml, cùng id
   `livestream`. Ẩn chứ không xoá khỏi view — gỡ lại chỉ cần bỏ khối này.
   `:has()` thu luôn ô col-md-2 rỗng cho khỏi hở một khoảng trên thanh nút;
   trình duyệt cũ không hiểu `:has()` thì vẫn ẩn được nút nhờ dòng đầu. */
#livestream {
    display: none !important;
}

.row > [class*="col-"]:has(> #livestream) {
    display: none !important;
}