/* Con trỏ chuột tùy biến (custom cursor) — mọi trang kế thừa base.html; phần tử do web_home/cursor.js tạo.
   Chấm nhỏ bám đúng vị trí chuột, khung ngoài đuổi theo trễ một chút; rê vào link / nút thì chấm phình to,
   khung ẩn. Con trỏ hệ thống vẫn giữ — lớp này chỉ trang trí, pointer-events: none nên không chặn click.
   Màu theo --tv-cursor-color (mặc định xanh chủ đạo); trang riêng đặt lại biến (landing Tết: đỏ).
   Chuột nằm trên nền xanh chủ đạo thì cursor.js gắn .is-on-blue → đổi sang --tv-cursor-color-on-blue (cam chủ đạo). */

:root {
    --tv-cursor-color: var(--BLUE, #005792);
    --tv-cursor-color-on-blue: var(--ORANGE, #FDC300);
}

/* Đặt biến ngay trên lớp con trỏ nên thắng cả giá trị trang riêng đặt ở tổ tiên. */
.tv-cursor.is-on-blue {
    --tv-cursor-color: var(--tv-cursor-color-on-blue);
}

.tv-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2147483000;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    will-change: transform;
}

.tv-cursor.is-visible { opacity: 1; }

/* Chấm giữa: 6px, xoay 45° thành hạt kim cương; hover phình 80px và mờ đi. */
.tv-cursor-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--tv-cursor-color);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: width 0.3s ease-out, height 0.3s ease-out, border-radius 0.3s ease-out, opacity 0.3s ease-out,
        background-color 0.2s ease-out;
}

.tv-cursor-inner.is-hover::before {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    opacity: 0.5;
}

/* Khung ngoài: 40px chỉ viền, đuổi theo chuột nhờ transition trên transform. */
.tv-cursor-outer {
    transition: opacity 0.2s ease-out, transform 0.12s ease-out;
}

.tv-cursor-outer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--tv-cursor-color);
    border-radius: 10px;
    opacity: 0.6;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: border-color 0.2s ease-out;
}

.tv-cursor-outer.is-hover { opacity: 0; }

@media print {
    .tv-cursor { display: none; }
}