/* =========================================================================
 * TẦNG 1: CẤU HÌNH HỆ VỎ (SYSTEM SHELL VIEWPORT LOCK)
 * Ép toàn bộ ứng dụng kiosk phải nằm trọn trong 1 màn hình, khử thanh cuộn.
 * ========================================================================= */
.rkm-kiosk-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.rkm-map-canvas-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

.rkm-map-canvas-wrapper svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* =========================================================================
 * TẦNG 2: GIAO DIỆN HYBRID TRONG SVG (UI SHELL)
 * ========================================================================= */
.rkm-native-html-ui {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    font-family: 'Bai Jamjuree', sans-serif !important;
    pointer-events: auto !important;
    overflow: hidden !important;
}

.rkm-numpad-ui {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 2px solid #4c5429 !important;
    border-radius: 16px !important;
    padding: 10px !important;
    box-shadow: 0 10px 25px rgba(76, 84, 41, 0.2) !important;
}

.rkm-display-box {
    margin-bottom: 8px !important;
    height: 20% !important;
    position: relative !important;
    z-index: 10 !important;
}

.rkm-display-box input {
    width: 100% !important;
    height: 100% !important;
    font-size: 22px !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 3px solid #4c5429 !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #1a2307 !important; 
    -webkit-text-fill-color: #1a2307 !important;
    font-weight: 900 !important;
    border-radius: 8px 8px 0 0 !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.rkm-display-box input::placeholder {
    color: #8a936a !important;
    -webkit-text-fill-color: #8a936a !important;
    opacity: 0.8 !important;
}

.rkm-virtual-numpad {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    flex-grow: 1 !important;
}

.rkm-key {
    background: #ffffff !important;
    border: 1px solid rgba(76, 84, 41, 0.2) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    color: #4c5429 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.1s ease !important;
}

.rkm-key:active {
    transform: translateY(2px) scale(0.95) !important;
    background: #4c5429 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.rkm-key-clear { color: #e11d48 !important; }
.rkm-key-find { background: #4c5429 !important; color: #ffffff !important; border: none !important; }
.rkm-key-find:active { background: #363c1d !important; }

.rkm-info-ui {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #4c5429 !important;
    border-radius: 12px !important;
    padding: 8px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; 
    justify-content: space-between !important;
    gap: 10px !important;
    box-shadow: 0 8px 20px rgba(76, 84, 41, 0.15) !important;
}

.rkm-info-col {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    background: #f4f5f0 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

.rkm-info-col.rkm-focus-active {
    background: #e9ebd9 !important;
    border-color: #4c5429 !important;
    box-shadow: inset 0 0 8px rgba(76, 84, 41, 0.2) !important;
    transform: scale(1.02) !important;
}

.rkm-info-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.rkm-info-label {
    font-weight: 700 !important;
    color: #888 !important;
    font-size: 11px !important;
    margin-bottom: 2px !important;
    text-transform: uppercase !important;
}

.rkm-info-val {
    font-weight: 900 !important;
    color: #4c5429 !important;
    font-size: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* =========================================================================
 * TẦNG 3: ĐỘNG CƠ CÁP QUANG ĐẬM NÉT (BOLD QUANTUM FLOW ENGINE V7.3)
 * [ĐIỀU CHỈNH]: Phóng to toàn diện kích cỡ các layer chỉ đường để tăng độ nhận diện.
 * ========================================================================= */
[id^="route__"] {
    fill: none !important;
    stroke: transparent !important;
    stroke-width: 14px !important; /* Mở rộng vùng tương tác đón chuột (Hitbox) */
}

/* 1. LỚP RÃNH ÂM CHÌM (BASE SHADOW) - Nền đổ bóng */
[id^="route__"].rkm-path-base {
    stroke: #4c5429 !important;
    stroke-dasharray: none !important; 
    stroke-width: 18px !important; /* [CẬP NHẬT]: Tăng từ 10px lên 18px tạo rãnh sâu rõ nét */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 0.14 !important; 
}

/* 2. LỚP LÕI SỢI CÁP CHÍNH (SOLID CORE) - Trả lại size ban đầu */
.rkm-path-core {
    fill: none !important;
    stroke: #4c5429 !important; 
    stroke-width: 6.5px !important; /* [YÊU CẦU]: Tăng từ 2.5px lên 6.5px giúp khôi phục độ dày dặn nguyên bản */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    opacity: 0.95 !important;
}

/* 3. LỚP HẠT NĂNG LƯỢNG MÀU THƯƠNG HIỆU #D7DE27 (PHOTON FLOW) */
.rkm-path-flow {
    fill: none !important;
    stroke: #D7DE27 !important; 
    stroke-width: 7.5px !important; /* [YÊU CẦU]: Tăng từ 4px lên 7.5px để bao bọc và làm nổi bật lõi chỉ đường */
    stroke-dasharray: 12 42 !important; /* Nới rộng khoảng cách đứt khúc tương ứng với độ dày mới */
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
    filter: drop-shadow(0px 0px 8px rgba(215, 222, 39, 0.95)) !important; 
    animation: rkmQuantumFlow 0.9s linear infinite !important;
}

@keyframes rkmQuantumFlow {
    from { stroke-dashoffset: 54; }
    to { stroke-dashoffset: 0; }
}

/* =========================================================================
 * HOẠT HỌA PHẢN HỒI ĐIỂM NÚT & HIỆU ỨNG AURORA HEARTBEAT SMOOTH
 * ========================================================================= */
[id^="node__"], [id^="_"] {
    transform-origin: center !important;
    transform-box: fill-box !important; 
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease !important;
}
[id^="node__"]:hover, [id^="_"]:hover { 
    transform: scale(1.45) !important; 
}

[id^="btn__sidebar__"] {
    transform-origin: center !important;
    transform-box: fill-box !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    cursor: pointer !important;
}
[id^="btn__sidebar__"]:hover {
    transform: scale(1.08) !important;
    filter: drop-shadow(0px 4px 8px rgba(76, 84, 41, 0.25)) !important;
}

/* ĐIỂM ĐÃ CHỌN: Tỏa hào quang xanh lá sáng thương hiệu */
[id^="node__"].start-selected, [id^="_"].start-selected,
[id^="node__"].end-selected, [id^="_"].end-selected {
    transform: scale(1.45) !important; 
    filter: drop-shadow(0px 0px 14px rgba(215, 222, 39, 0.95)) !important; 
}

/* VÒNG SÓNG TIM ĐẬP MỊN MÀNG & GỌN GÀNG (GIẢM 30% SIZE) */
.rkm-heartbeat-ring {
    transform-origin: center !important;
    transform-box: fill-box !important;
    filter: drop-shadow(0px 0px 8px rgba(215, 222, 39, 0.85)) !important;
    animation: rkmHeartbeatEngine 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

@keyframes rkmHeartbeatEngine {
    0% {
        transform: scale(0.9);
        opacity: 1;
        stroke-width: 5px;
    }
    40% {
        opacity: 0.45;
        stroke-width: 2.2px;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
        stroke-width: 0.1px;
    }
}

/* =========================================================================
 * UX PATCH — chỉ BỔ SUNG, không sửa các rule phía trên.
 * ========================================================================= */

/* (A) Lớp đường tô sáng & đoạn thẳng tổng hợp KHÔNG được chặn click vào node,
 *     để khách luôn bấm lại được điểm đi / điểm đến sau khi đã có lộ trình. */
[id^="route__"].rkm-path-base,
.rkm-path-core,
.rkm-path-flow,
.rkm-synth {
    pointer-events: none !important;
}

/* (B) Ô nhập số phòng: luôn hiển thị RÕ số đang nhập, chữ đậm màu đậm,
 *     đè mọi style của theme (BeTheme/Elementor) bằng độ ưu tiên cao hơn. */
#rkm-app-shell .rkm-display-box {
    min-height: 42px !important;
}
#rkm-app-shell #rkm-search-input,
#rkm-app-shell .rkm-display-box input {
    color: #1a2307 !important;
    -webkit-text-fill-color: #1a2307 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    letter-spacing: 2px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.85) !important;
}