.realm-badge { display: inline-block; margin-top: 5px; font-size: 0.9em; padding: 3px 10px; border-radius: 20px; background: rgba(0,0,0,0.4); border: 1px solid var(--tuyet-border-mid); box-shadow: inset 0 0 10px rgba(0,0,0,0.5); letter-spacing: 0.5px; }

/* --- UI/UX: HIỆU ỨNG TÊN CẢNH GIỚI (MẶC ĐỊNH) --- */
.user-id-styled { padding: 3px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: bold; transition: 0.3s; margin: 2px; background: transparent; cursor: help; vertical-align: middle; }
.user-name-inner { display: inline-block; padding: 2px 8px; border-radius: 6px; }

.style-luyenkhi { color: #cbd5e1; }
.style-trucco { color: #2ed573; text-shadow: 0 0 5px rgba(46,213,115,0.5); }
.style-kimdan { color: #ffa502; text-shadow: 0 0 8px #ffa502; animation: blink-kimdan 1.5s infinite alternate; }
.style-nguyenanh { color: #1e90ff; text-shadow: 0 0 10px #1e90ff; animation: pulse-text-nguyenanh 1.5s infinite alternate; }
.style-hoathan { color: #9b59b6; text-shadow: 0 0 12px #9b59b6, 0 0 20px rgba(155,89,182,0.3); }
.style-luyenhu { color: #ff4757; text-shadow: 0 0 15px #ff4757; animation: blink-luyenhu 1s infinite alternate; }
.style-hopthe { color: #ff6b81; text-shadow: 0 0 20px #ff6b81; animation: glow-hopthe 1s infinite alternate; }
.style-daithua { background: linear-gradient(90deg, #ff4757, #ffa502, #2ed573, #1e90ff, #9b59b6); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow-bg 2.5s ease infinite, glow-daithua 1s alternate infinite; font-size: 1.1em; font-weight: 900; }

@keyframes blink-kimdan { from { text-shadow: 0 0 5px #ffa502; } to { text-shadow: 0 0 15px #ffa502, 0 0 8px #ffa502; } }
@keyframes pulse-text-nguyenanh { from { text-shadow: 0 0 5px #1e90ff; } to { text-shadow: 0 0 15px #1e90ff; } }
@keyframes blink-luyenhu { from { transform: scale(0.98); text-shadow: 0 0 5px #ff4757; } to { transform: scale(1.05); text-shadow: 0 0 25px #ff4757; } }
@keyframes glow-hopthe { from { text-shadow: 0 0 10px #ff6b81; } to { text-shadow: 0 0 30px #ff6b81; } }
@keyframes rainbow-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glow-daithua { from { filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); transform: scale(1); } to { filter: drop-shadow(0 0 15px #ff4757); transform: scale(1.08); } }

/* =========================================================
    KỲ TRÂN CÁC - BỘ KIỂU CHỮ (FONTS) CỰC PHẨM
    ========================================================= */
.font-macdinh { }
.font-inhoa { text-transform: uppercase; letter-spacing: 1px; }
.font-thuphap1 { font-family: 'Dancing Script', cursive; font-size: 1.35em; font-weight: normal !important; letter-spacing: 1px; }
.font-thuphap2 { font-family: 'Pacifico', cursive; font-size: 1.1em; font-weight: normal !important; letter-spacing: 1px; }
.font-pixel { font-family: 'Bungee', cursive; font-size: 0.85em; font-weight: normal !important; letter-spacing: 1px; }
.font-buibam { font-family: 'Sedgwick Ave Display', cursive; font-size: 1.25em; font-weight: normal !important; letter-spacing: 1px; }

/* =========================================================
    KỲ TRÂN CÁC - BỘ HIỆU ỨNG TÊN (TEXT EFFECTS) CỰC PHẨM
    ========================================================= */
.pet-icon-floating {
    display: inline-block; margin-left: 8px; font-size: 1.25em; animation: pet-float 2s infinite ease-in-out;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) !important; vertical-align: middle;
    -webkit-text-fill-color: initial !important; background: none !important; -webkit-background-clip: border-box !important;
}
@keyframes pet-float { 0% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-5px) scale(1.1); } 100% { transform: translateY(0px) scale(1); } }

.effect-none { } 
.effect-luutinh { background: linear-gradient(120deg, #b0bec5 0%, #ffffff 40%, #ffffff 60%, #b0bec5 100%) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: luutinh-shine 2.5s linear infinite; font-weight: 900; filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); }
@keyframes luutinh-shine { to { background-position: 200% center; } }
.effect-chankhi { color: #ff9f43 !important; text-shadow: 0 0 10px #ff9f43, 0 0 20px #ff4757, 0 0 30px #c0392b !important; animation: chankhi-pulse 1.2s infinite alternate; font-weight: 900; }
@keyframes chankhi-pulse { from { transform: scale(0.95); filter: brightness(0.8); } to { transform: scale(1.08); filter: brightness(1.2); text-shadow: 0 0 15px #ffeb3b, 0 0 25px #ff4757, 0 0 40px #c0392b !important; } }
.effect-tauhoa { color: #fff !important; font-weight: 900; animation: tauhoa-glitch 0.25s infinite linear alternate-reverse; position: relative; }
@keyframes tauhoa-glitch { 0% { text-shadow: 3px 0 #ff0000, -3px 0 #00ffff !important; transform: skewX(0deg); } 20% { text-shadow: -3px 0 #ff0000, 3px 0 #00ffff !important; transform: skewX(-5deg); } 40% { text-shadow: 3px 0 #00ff00, -3px 0 #ff00ff !important; transform: skewX(5deg); } 60% { text-shadow: 3px 0 #00ff00, -3px 0 #ff00ff !important; transform: skewX(0deg); } 80% { text-shadow: 2px -2px #ff0000, -2px 2px #00ffff !important; transform: skewX(3deg); } 100% { text-shadow: -2px 2px #ff0000, 2px -2px #00ffff !important; transform: skewX(-3deg); } }
.effect-loicuu { color: #1e293b !important; text-shadow: 0 0 2px #00ffff !important; font-weight: 900; animation: loicuu-flash 1.5s infinite; }
@keyframes loicuu-flash { 0%, 85%, 90%, 95% { color: #1e293b !important; text-shadow: 0 0 2px #00ffff !important; } 87%, 92%, 100% { color: #ffffff !important; text-shadow: 0 0 15px #ffffff, 0 0 30px #00ffff, 0 0 50px #00a8ff !important; } }
.effect-hondon { background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important; background-size: 400% 400% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 900; animation: hondon-flow 4s ease infinite; filter: drop-shadow(0 2px 5px rgba(255,255,255,0.3)); }
@keyframes hondon-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.effect-kiemy { color: transparent !important; -webkit-text-stroke: 1px #fff; text-shadow: 0 0 15px rgba(255,255,255,0.8) !important; font-weight: 900; letter-spacing: 2px; }
.effect-maton { background: linear-gradient(180deg, #000000, #8b0000) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 -2px 10px rgba(255,0,0,0.8)); font-weight: 900; animation: maton-breathe 2s infinite alternate; }
@keyframes maton-breathe { from { filter: drop-shadow(0 -2px 5px #ff0000); } to { filter: drop-shadow(0 -10px 20px #8b0000); } }
.effect-tinhha { background: radial-gradient(circle, #fff, #00a8ff, #1e293b) !important; background-size: 300% 300% !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 900; animation: tinhha-twinkle 3s infinite; }
@keyframes tinhha-twinkle { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
.effect-uhoa { color: #00ffcc !important; text-shadow: 0 -3px 8px #008080, 0 -8px 15px #00ffcc !important; font-weight: 900; animation: uhoa-flicker 0.15s infinite alternate; }
@keyframes uhoa-flicker { from { text-shadow: 0 -2px 5px #008080; } to { text-shadow: 0 -10px 20px #00ffcc; transform: translateY(1px); } }
.effect-tramhuong { color: #f1c40f !important; text-shadow: 1px 1px 0 #d35400, 2px 2px 0 #e67e22, 0 0 15px rgba(241, 196, 15, 0.5) !important; font-weight: 900; letter-spacing: 1px; }
.effect-vongxuyen { background: linear-gradient(90deg, #8e44ad, #2980b9, #8e44ad) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: vongxuyen-flow 2s infinite linear; font-weight: 900; filter: drop-shadow(0 2px 4px rgba(41, 128, 185, 0.6)); }
@keyframes vongxuyen-flow { to { background-position: 200% center; } }
.effect-nguhanh { color: #fff !important; font-weight: 900; animation: nguhanh-cycle 5s infinite; text-shadow: 0 0 10px currentColor !important; }
@keyframes nguhanh-cycle { 0% { color: #2ecc71 !important; } 20% { color: #e74c3c !important; } 40% { color: #f1c40f !important; } 60% { color: #bdc3c7 !important; } 80% { color: #3498db !important; } 100% { color: #2ecc71 !important; } }
.effect-thienma { color: #000 !important; -webkit-text-stroke: 1px #c0392b; text-shadow: 3px 3px 0 rgba(192, 57, 43, 0.5), -3px -3px 0 rgba(0, 0, 0, 0.8) !important; font-weight: 900; letter-spacing: 2px; animation: thienma-shake 0.1s infinite; }
@keyframes thienma-shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 50% { transform: translate(-1px, -2px) rotate(-1deg); } 100% { transform: translate(-3px, 0px) rotate(1deg); } }
.effect-daoquang { color: #fff !important; text-shadow: 0 0 20px #f1c40f, 0 0 40px #f39c12, 0 0 60px #fff !important; font-weight: 900; animation: daoquang-pulse 2s infinite alternate; }
@keyframes daoquang-pulse { from { filter: brightness(1); } to { filter: brightness(1.5); text-shadow: 0 0 30px #f1c40f, 0 0 60px #fff !important; } }
.effect-vanphat { background: repeating-linear-gradient(45deg, #f1c40f, #f39c12 10px, #e67e22 10px, #f1c40f 20px) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 900; animation: vanphat-scroll 3s infinite linear; filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.8)); }
@keyframes vanphat-scroll { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }

/* =========================================================
    KỲ TRÂN CÁC - BỘ KHUNG VIỀN (BORDERS) CỰC PHẨM
    ========================================================= */
.frame-none { } 

.frame-nhatnguyet { position: relative; padding: 5px 15px !important; border-radius: 30px !important; background: rgba(15, 23, 42, 0.8) !important; z-index: 1; overflow: hidden; border: 1px solid transparent !important; box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important; }
.frame-nhatnguyet::before { content: ""; position: absolute; inset: -15px; z-index: -1; background: conic-gradient(from 0deg, #00a8ff, transparent 30%, #ff9f43, transparent 60%, #00a8ff); animation: spin-nhatnguyet 3s linear infinite; }
.frame-nhatnguyet::after { content: ""; position: absolute; inset: 2px; background: rgba(15, 23, 42, 0.95); border-radius: 30px; z-index: -1; }
@keyframes spin-nhatnguyet { 100% { transform: rotate(360deg); } }

.frame-phuonghoang { border: 2px solid transparent !important; background: rgba(211, 84, 0, 0.1) !important; border-radius: 20px !important; padding: 5px 15px !important; position: relative; }
.frame-phuonghoang::before { content: ''; position: absolute; inset: -3px; border-radius: 20px; z-index: -1; background: linear-gradient(90deg, #e74c3c, #f1c40f, #e74c3c); background-size: 200% 200%; animation: phuonghoang-fire 1.5s infinite alternate; filter: blur(4px); }
@keyframes phuonghoang-fire { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* 8 KHUNG CONIC GRADIENT */
.frame-conic1, .frame-conic2, .frame-conic3, .frame-conic4, .frame-conic5, .frame-conic6, .frame-conic7, .frame-conic8 {
    position: relative; padding: 5px 15px !important; border-radius: 30px !important; background: rgba(15, 23, 42, 0.8) !important; z-index: 1; overflow: hidden; border: 1px solid transparent !important; box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
}
.frame-conic1::before, .frame-conic2::before, .frame-conic3::before, .frame-conic4::before, .frame-conic5::before, .frame-conic6::before, .frame-conic7::before, .frame-conic8::before {
    content: ""; position: absolute; inset: -15px; z-index: -1; animation: spin-nhatnguyet 3s linear infinite;
}
.frame-conic1::after, .frame-conic2::after, .frame-conic3::after, .frame-conic4::after, .frame-conic5::after, .frame-conic6::after, .frame-conic7::after, .frame-conic8::after {
    content: ""; position: absolute; inset: 2px; background: rgba(15, 23, 42, 0.95); border-radius: 30px; z-index: -1;
}

.frame-conic1::before { background: conic-gradient(from 0deg, #8e44ad, transparent 25%, #2980b9, transparent 50%, #00ffff, transparent 75%, #8e44ad); }
.frame-conic2::before { background: conic-gradient(from 0deg, #c0392b, transparent 25%, #e67e22, transparent 50%, #f1c40f, transparent 75%, #c0392b); }
.frame-conic3::before { background: conic-gradient(from 0deg, #27ae60, transparent 25%, #2ecc71, transparent 50%, #f1c40f, transparent 75%, #27ae60); }
.frame-conic4::before { background: conic-gradient(from 0deg, #74b9ff, transparent 25%, #ffffff, transparent 50%, #00ffff, transparent 75%, #74b9ff); }
.frame-conic5::before { background: conic-gradient(from 0deg, #2c3e50, transparent 25%, #c0392b, transparent 50%, #8e44ad, transparent 75%, #2c3e50); }
.frame-conic6::before { background: conic-gradient(from 0deg, #f39c12, transparent 25%, #f1c40f, transparent 50%, #ffffff, transparent 75%, #f39c12); }
.frame-conic7::before { background: conic-gradient(from 0deg, #fd79a8, transparent 25%, #9b59b6, transparent 50%, #00ffff, transparent 75%, #fd79a8); }
.frame-conic8::before { background: conic-gradient(from 0deg, #d35400, transparent 25%, #27ae60, transparent 50%, #013220, transparent 75%, #d35400); }

/* 8 KHUNG LINEAR GRADIENT BORDER */
.frame-linear1, .frame-linear2, .frame-linear3, .frame-linear4, .frame-linear5, .frame-linear6, .frame-linear7, .frame-linear8 {
    position: relative; padding: 5px 15px !important; border-radius: 8px !important; background: rgba(15, 23, 42, 0.8) !important; z-index: 1; overflow: hidden; border: none !important; box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
}
.frame-linear1::before, .frame-linear2::before, .frame-linear3::before, .frame-linear4::before, .frame-linear5::before, .frame-linear6::before, .frame-linear7::before, .frame-linear8::before {
    content: ""; position: absolute; inset: 0; z-index: -1; background-size: 200% 200%; animation: bg-linear-move 3s ease infinite;
}
.frame-linear1::after, .frame-linear2::after, .frame-linear3::after, .frame-linear4::after, .frame-linear5::after, .frame-linear6::after, .frame-linear7::after, .frame-linear8::after {
    content: ""; position: absolute; inset: 2px; background: rgba(15, 23, 42, 0.95); border-radius: 6px; z-index: -1;
}
@keyframes bg-linear-move { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.frame-linear1::before { background-image: linear-gradient(45deg, #2980b9, #00ffff, #ffffff, #2980b9); }
.frame-linear2::before { background-image: linear-gradient(45deg, #c0392b, #ff9f43, #f1c40f, #c0392b); }
.frame-linear3::before { background-image: linear-gradient(45deg, #27ae60, #f1c40f, #2ecc71, #27ae60); }
.frame-linear4::before { background-image: linear-gradient(45deg, #f1c40f, #ffffff, #f39c12, #f1c40f); }
.frame-linear5::before { background-image: linear-gradient(45deg, #8e44ad, #1e293b, #9b59b6, #8e44ad); }
.frame-linear6::before { background-image: linear-gradient(45deg, #8b0000, #ff4757, #000000, #8b0000); }
.frame-linear7::before { background-image: linear-gradient(45deg, #e84393, #00ffff, #f1c40f, #e84393); }
.frame-linear8::before { background-image: linear-gradient(45deg, #1e293b, #74b9ff, #ffffff, #1e293b); }