/* Pro Tip Banner */
.pro-tip-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(249, 115, 22, 0.12) 50%, rgba(239, 68, 68, 0.1) 100%);
border: 1px solid rgba(234, 179, 8, 0.35);
border-radius: 14px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.pro-tip-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}

.pro-tip-banner:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(234, 179, 8, 0.2);
border-color: rgba(234, 179, 8, 0.5);
}

.pro-tip-banner:hover::before {
transform: translateX(100%);
}

.pro-tip-banner__icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
border-radius: 12px;
flex-shrink: 0;
animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
50% { box-shadow: 0 0 20px 5px rgba(234, 179, 8, 0.2); }
}

.pro-tip-banner__icon svg {
width: 26px;
height: 26px;
color: #1c1917;
stroke: #1c1917;
}

.pro-tip-banner__content {
flex: 1;
min-width: 0;
}

.pro-tip-banner__content h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
margin: 0 0 4px 0;
line-height: 1.4;
}

.pro-tip-banner__more {
font-size: 0.8rem;
color: #eab308;
font-weight: 500;
opacity: 0.85;
transition: opacity 0.2s;
}

.pro-tip-banner:hover .pro-tip-banner__more {
opacity: 1;
}

.pro-tip-banner__arrow {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(234, 179, 8, 0.1);
border-radius: 50%;
flex-shrink: 0;
transition: all 0.3s ease;
}

.pro-tip-banner__arrow svg {
width: 16px;
height: 16px;
color: #eab308;
transition: transform 0.3s ease;
}

.pro-tip-banner:hover .pro-tip-banner__arrow {
background: rgba(234, 179, 8, 0.2);
}

.pro-tip-banner:hover .pro-tip-banner__arrow svg {
transform: translateX(3px);
}

/* Pro Tip Modal */
.pro-tip-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}

.pro-tip-modal__backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.pro-tip-modal__content {
position: relative;
max-width: 560px;
width: 100%;
max-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
background: linear-gradient(165deg, #1f1f23 0%, #141416 100%);
border: 1px solid rgba(234, 179, 8, 0.3);
border-radius: 20px;
overflow: hidden;
animation: modalSlideUp 0.4s ease;
box-shadow: 
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 100px rgba(234, 179, 8, 0.1),
inset 0 1px 0 rgba(255,255,255,0.05);
}

@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.pro-tip-modal__close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
font-size: 1.5rem;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
z-index: 1;
}

.pro-tip-modal__close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text);
transform: rotate(90deg);
}

.pro-tip-modal__header {
padding: 32px 32px 20px;
text-align: center;
background: linear-gradient(180deg, rgba(234, 179, 8, 0.08) 0%, transparent 100%);
flex-shrink: 0;
}

.pro-tip-modal__icon {
width: 72px;
height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eab308 0%, #f59e0b 100%);
border-radius: 20px;
box-shadow: 
0 10px 30px rgba(234, 179, 8, 0.3),
inset 0 -2px 0 rgba(0,0,0,0.1);
animation: float 3s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}

.pro-tip-modal__icon svg {
width: 40px;
height: 40px;
color: #1c1917;
stroke: #1c1917;
}

.pro-tip-modal__header h3 {
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
margin: 0;
letter-spacing: -0.02em;
}

.pro-tip-modal__body {
padding: 8px 32px 24px;
overflow-y: auto;
flex: 1;
min-height: 0;
}

/* Custom scrollbar for modal body */
.pro-tip-modal__body::-webkit-scrollbar {
width: 6px;
}
.pro-tip-modal__body::-webkit-scrollbar-track {
background: rgba(255,255,255,0.05);
border-radius: 3px;
}
.pro-tip-modal__body::-webkit-scrollbar-thumb {
background: rgba(234, 179, 8, 0.3);
border-radius: 3px;
}
.pro-tip-modal__body::-webkit-scrollbar-thumb:hover {
background: rgba(234, 179, 8, 0.5);
}

.pro-tip-modal__body p {
font-size: 0.95rem;
color: var(--text-muted);
line-height: 1.75;
margin-bottom: 16px;
}

.pro-tip-modal__body p:last-child {
margin-bottom: 0;
}

.pro-tip-modal__body strong {
color: #eab308;
font-weight: 600;
}

.pro-tip-modal__body em {
color: var(--text);
font-style: normal;
font-weight: 500;
}

.pro-tip-highlight {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
border-left: 3px solid #ef4444;
padding: 14px 18px;
border-radius: 0 10px 10px 0;
color: #fca5a5 !important;
font-weight: 500;
}

.blue-check {
color: #3b82f6;
font-weight: 600;
}

.pro-tip-cta {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.1));
border: 1px solid rgba(34, 197, 94, 0.25);
padding: 16px 20px;
border-radius: 12px;
text-align: center;
margin-top: 8px;
}

.pro-tip-cta strong {
color: #22c55e !important;
}

.pro-tip-modal__footer {
padding: 0 32px 28px;
text-align: center;
flex-shrink: 0;
}

.pro-tip-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 36px;
background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
border: none;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 600;
color: #1c1917;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(234, 179, 8, 0.3);
}

.pro-tip-modal__btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(234, 179, 8, 0.4);
}

.pro-tip-modal__btn:active {
transform: translateY(0);
}

/* Mobile responsive for banner and modal */
@media (max-width: 640px) {
.pro-tip-banner {
padding: 14px 16px;
gap: 12px;
}

.pro-tip-banner__icon {
width: 40px;
height: 40px;
border-radius: 10px;
}

.pro-tip-banner__icon svg {
width: 22px;
height: 22px;
}

.pro-tip-banner__content h4 {
font-size: 0.85rem;
}

.pro-tip-banner__more {
font-size: 0.75rem;
}

.pro-tip-banner__arrow {
width: 28px;
height: 28px;
}

.pro-tip-modal {
padding: 12px;
}

.pro-tip-modal__content {
border-radius: 16px;
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
}

.pro-tip-modal__header {
padding: 16px 16px 12px;
flex-shrink: 0;
}

.pro-tip-modal__icon {
width: 50px;
height: 50px;
border-radius: 14px;
margin-bottom: 10px;
}

.pro-tip-modal__icon svg {
width: 28px;
height: 28px;
}

.pro-tip-modal__header h3 {
font-size: 1.05rem;
}

.pro-tip-modal__body {
padding: 4px 16px 16px;
}

.pro-tip-modal__body p {
font-size: 0.88rem;
line-height: 1.6;
margin-bottom: 12px;
}

.pro-tip-highlight {
padding: 10px 14px;
font-size: 0.85rem;
}

.pro-tip-cta {
padding: 12px 14px;
}

.pro-tip-modal__footer {
padding: 12px 16px 16px;
flex-shrink: 0;
}

.pro-tip-modal__btn {
width: 100%;
padding: 12px 20px;
font-size: 0.9rem;
}

.pro-tip-modal__close {
top: 10px;
right: 10px;
width: 32px;
height: 32px;
font-size: 1.3rem;
}
}

/* Guest Home Layout */
.guest-home {
padding-top: 12px;
padding-bottom: 24px;
}

.guest-home__container {
max-width: 1400px;
}

.guest-home__layout {
display: grid;
grid-template-columns: 380px 1fr;
gap: 24px;
align-items: start;
}

.guest-home__left {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 80px;
}

.guest-home__right {
min-width: 0;
}

/* Why Choose Us */
.why-choose-us {
background: linear-gradient(135deg, rgba(98, 0, 234, 0.1), rgba(59, 130, 246, 0.08));
border: 1px solid rgba(98, 0, 234, 0.2);
border-radius: 12px;
padding: 20px;
}

.why-choose-us h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 1rem;
font-weight: 600;
color: var(--text);
margin: 0 0 16px 0;
}

.why-choose-us h3 svg {
width: 22px;
height: 22px;
color: #eab308;
fill: #eab308;
}

.why-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}

.why-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}

.why-list li strong {
color: var(--text);
font-weight: 600;
}

.why-icon {
font-size: 1.2rem;
flex-shrink: 0;
margin-top: 2px;
}

/* Guest Login Modal */
.guest-login-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}

.guest-login-modal__backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
}

.guest-login-modal__content {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
max-width: 400px;
width: 90%;
text-align: center;
}

.guest-login-modal__close {
position: absolute;
top: 12px;
right: 12px;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-muted);
cursor: pointer;
padding: 4px 8px;
line-height: 1;
}

.guest-login-modal__close:hover {
color: var(--text);
}

.guest-login-modal__icon {
font-size: 3rem;
margin-bottom: 16px;
}

.guest-login-modal__content h3 {
font-size: 1.25rem;
margin: 0 0 12px 0;
color: var(--text);
}

.guest-login-modal__content p {
color: var(--text-muted);
margin: 0 0 20px 0;
font-size: 0.95rem;
}

.guest-login-modal__content p a {
color: var(--primary);
font-weight: 600;
}

.guest-login-modal__actions {
display: flex;
gap: 12px;
justify-content: center;
}

.guest-login-modal__actions .btn {
padding: 10px 24px;
font-size: 0.9rem;
}

/* Mobile: Guest Layout */
@media (max-width: 1024px) {
.guest-home__layout {
grid-template-columns: 1fr;
}

.guest-home__left {
position: static;
order: 1;
}

.guest-home__right {
order: 2;
}
}

@media (max-width: 768px) {
.guest-home__container {
padding: 0;
}

.guest-home__left {
padding: 0 12px;
}

.why-choose-us {
padding: 16px;
}

.why-choose-us h3 {
font-size: 0.95rem;
}

.why-list li {
font-size: 0.85rem;
}
}

/* Member Home Layout */
.member-home {
padding-top: 12px;
}

.member-home__container {
max-width: 1600px;
}

/* News Groups - Compact inline style */
.news-groups {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
margin-bottom: 12px;
background: rgba(59, 130, 246, 0.08);
border-radius: 8px;
}

.news-groups h4 {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
font-weight: 500;
white-space: nowrap;
}

.news-groups h4::before {
content: '🔔';
font-size: 0.85rem;
}

.news-groups__list {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.news-group-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
text-decoration: none;
font-weight: 500;
font-size: 0.8rem;
}

.news-group-item svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}

.news-group-item--zalo { 
color: #0068FF; 
}
.news-group-item--zalo:hover { 
background: rgba(0, 104, 255, 0.2);
border-color: #0068FF; 
}
.news-group-item--telegram { 
color: #0088cc; 
}
.news-group-item--telegram:hover { 
background: rgba(0, 136, 204, 0.2);
border-color: #0088cc; 
}
.news-group-item--whatsapp { 
color: #25D366; 
}
.news-group-item--whatsapp:hover { 
background: rgba(37, 211, 102, 0.2);
border-color: #25D366; 
}

/* Main Layout */
.member-home__main {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: start;
}

.member-home__services {
min-width: 0;
}

.member-home__sidebar {
position: sticky;
top: 80px;
display: flex;
flex-direction: column;
gap: 16px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}

/* Custom scrollbar for sidebar */
.member-home__sidebar::-webkit-scrollbar {
width: 4px;
}
.member-home__sidebar::-webkit-scrollbar-track {
background: transparent;
}
.member-home__sidebar::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 4px;
}

/* Sidebar Cards */
.sidebar-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
}

.sidebar-card h4 {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
padding: 14px 16px;
margin: 0;
border-radius: 12px 12px 0 0;
}

/* Sidebar icon */
.sidebar-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}

.sidebar-icon svg {
width: 18px;
height: 18px;
}

/* Usage Notes - Orange/Brown theme */
.sidebar-card.usage-notes {
border-color: rgba(234, 179, 8, 0.2);
}

.sidebar-card.usage-notes h4 {
background: linear-gradient(135deg, rgba(120, 80, 40, 0.5), rgba(60, 40, 20, 0.4));
border-bottom: 1px solid rgba(234, 179, 8, 0.15);
}

.sidebar-card.usage-notes .sidebar-icon {
background: rgba(234, 179, 8, 0.15);
border: 2px solid #eab308;
}

.sidebar-card.usage-notes .sidebar-icon svg {
color: #eab308;
stroke: #eab308;
}

/* Contact Support - Teal/Green theme */
.sidebar-card.contact-support {
border-color: rgba(20, 184, 166, 0.2);
}

.sidebar-card.contact-support h4 {
background: linear-gradient(135deg, rgba(13, 80, 80, 0.6), rgba(8, 50, 50, 0.5));
border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

.sidebar-card.contact-support .sidebar-icon {
background: rgba(20, 184, 166, 0.15);
border: 2px solid #14b8a6;
}

.sidebar-card.contact-support .sidebar-icon svg {
color: #14b8a6;
stroke: #14b8a6;
}

/* Accordion */
.accordion {
padding: 0;
}

.accordion-item {
border-bottom: 1px solid var(--border);
}

.accordion-item:last-child {
border-bottom: none;
}

.accordion-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: none;
border: none;
color: var(--text);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
text-align: left;
transition: background 0.2s;
}

.accordion-header:hover {
background: rgba(255,255,255,0.03);
}

.accordion-header svg {
transition: transform 0.2s;
flex-shrink: 0;
color: var(--text-muted);
}

.accordion-item.is-active .accordion-header svg {
transform: rotate(180deg);
}

.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
padding: 0 16px;
}

.accordion-item.is-active .accordion-content {
padding-top: 8px;
padding-bottom: 16px;
}

.accordion-content p {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 8px;
}

.accordion-content p:last-child {
margin-bottom: 0;
}

.accordion-content a {
color: var(--primary);
}

/* Contact List */
.contact-list {
display: flex;
flex-direction: column;
}

.contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
text-decoration: none;
color: var(--text);
font-size: 0.9rem;
transition: background 0.2s;
border-bottom: 1px solid var(--border);
}

.contact-item:last-child {
border-bottom: none;
}

.contact-item:hover {
background: rgba(255,255,255,0.03);
}

.contact-item .icon-wrapper {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.contact-item--messenger .icon-wrapper {
background: rgba(0, 132, 255, 0.15);
}
.contact-item--messenger .icon-wrapper svg {
color: #0084FF;
fill: #0084FF;
}
.contact-item--zalo .icon-wrapper {
background: rgba(0, 104, 255, 0.15);
}
.contact-item--zalo .icon-wrapper svg text {
fill: #0068FF;
}
.contact-item--phone .icon-wrapper {
background: rgba(34, 197, 94, 0.15);
}
.contact-item--phone .icon-wrapper svg {
color: #22c55e;
stroke: #22c55e;
}
.contact-item--whatsapp .icon-wrapper {
background: rgba(37, 211, 102, 0.15);
}
.contact-item--whatsapp .icon-wrapper svg {
color: #25D366;
fill: #25D366;
}
.contact-item--facebook .icon-wrapper {
background: rgba(24, 119, 242, 0.15);
}
.contact-item--facebook .icon-wrapper svg {
color: #1877F2;
fill: #1877F2;
}

.contact-item .icon-wrapper svg {
width: 20px;
height: 20px;
}

.contact-item .contact-text {
display: flex;
flex-direction: column;
gap: 2px;
}

.contact-item .contact-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 400;
}

.contact-item .contact-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}

/* Mobile Responsive */
@media (max-width: 1024px) {
.member-home__main {
grid-template-columns: 1fr;
}

.member-home__sidebar {
position: static;
max-height: none;
order: 2;
}

.member-home__services {
order: 1;
}
}

@media (max-width: 640px) {
.news-groups {
padding: 10px 12px;
gap: 8px;
flex-wrap: nowrap;
}

.news-groups h4 {
font-size: 0.75rem;
flex-shrink: 0;
}

.news-groups__list {
gap: 6px;
flex-wrap: nowrap;
}

.news-group-item {
padding: 6px 12px;
font-size: 0.75rem;
gap: 5px;
white-space: nowrap;
}

.news-group-item svg {
width: 16px;
height: 16px;
}
}

/* Full viewport width on mobile */
@media (max-width: 768px) {
.member-home__container {
padding: 0 !important;
}

.member-home__services,
.platform-browser,
.platform-browser__list,
.platform-card,
.platform-inline-detail {
width: 100%;
max-width: 100%;
}

.platform-card {
border-radius: 0;
border-left: none;
border-right: none;
}

.platform-card__head {
padding: 12px 16px;
}

.platform-card__head h2 {
font-size: 1.25rem;
white-space: nowrap;
}

.platform-grid {
padding: 0 12px 16px;
gap: 0.5rem 0.4rem;
}

.platform-chip {
min-width: 90px;
padding: 0.5rem 0.35rem;
}

.platform-chip__icon svg {
width: 38px;
height: 38px;
}

.platform-chip__label {
font-size: 0.85rem;
}

.member-home__sidebar {
padding: 0 12px;
}

.sidebar-card {
border-radius: 12px;
}
}

/* Guide Modal Styles */
.order-form__label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.35rem;
}

.order-form__guide-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.12));
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 6px;
color: #60a5fa;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}

.order-form__guide-btn:hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(99, 102, 241, 0.2));
border-color: rgba(59, 130, 246, 0.5);
transform: translateY(-1px);
}

.order-form__guide-btn svg {
flex-shrink: 0;
}

/* Guide Modal */
.guide-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}

.guide-modal[hidden] {
display: none;
}

.guide-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
animation: fadeIn 0.25s ease;
}

.guide-modal__panel {
position: relative;
width: 100%;
max-width: 600px;
max-height: 85vh;
display: flex;
flex-direction: column;
background: linear-gradient(165deg, #1f1f23 0%, #141416 100%);
border: 1px solid rgba(59, 130, 246, 0.2);
border-radius: 16px;
overflow: hidden;
animation: modalSlideUp 0.3s ease;
box-shadow: 
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 80px rgba(59, 130, 246, 0.1);
}

.guide-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, transparent 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}

.guide-modal__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--text);
}

.guide-modal__title svg {
color: #60a5fa;
flex-shrink: 0;
}

.guide-modal__close {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
cursor: pointer;
color: var(--text-muted);
transition: all 0.2s;
}

.guide-modal__close:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text);
}

.guide-modal__close svg {
width: 16px;
height: 16px;
}

.guide-modal__content {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
font-size: 0.9rem;
line-height: 1.75;
color: var(--text-muted);
}

.guide-modal__content::-webkit-scrollbar {
width: 6px;
}
.guide-modal__content::-webkit-scrollbar-track {
background: rgba(255,255,255,0.03);
border-radius: 3px;
}
.guide-modal__content::-webkit-scrollbar-thumb {
background: rgba(59, 130, 246, 0.25);
border-radius: 3px;
}
.guide-modal__content::-webkit-scrollbar-thumb:hover {
background: rgba(59, 130, 246, 0.4);
}

.guide-modal__content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 0.75rem 0;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.guide-modal__content ol,
.guide-modal__content ul {
padding-left: 1.25rem;
margin: 0.75rem 0;
}

.guide-modal__content li {
margin-bottom: 0.5rem;
}

.guide-modal__content strong {
color: #60a5fa;
font-weight: 600;
}

.guide-modal__content code {
background: rgba(59, 130, 246, 0.1);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.85em;
color: #93c5fd;
}

.guide-modal__content p {
margin-bottom: 0.75rem;
}

.guide-modal__content p:last-child {
margin-bottom: 0;
}

.guide-modal__footer {
padding: 1rem 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
flex-shrink: 0;
}

.guide-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 2rem;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
color: white;
cursor: pointer;
transition: all 0.2s;
}

.guide-modal__btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

@media (max-width: 768px) {
.guide-modal__panel {
max-height: 90vh;
border-radius: 12px;
}

.guide-modal__content {
padding: 1rem;
}

.guide-modal__header,
.guide-modal__footer {
padding: 0.85rem 1rem;
}

}

.icon-box-custom{
    
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    border-radius: 12px;
    flex-shrink: 0;
    animation: pulse-glow 2s ease-in-out infinite;
}

.badge-hot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
}

.top-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.top-update {
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  white-space: nowrap;
}

.nav-user-avatar-custom {
  width: 45px;
  height: 45px;
  border-radius: 50%; /* hoặc 10px nếu muốn vuông bo góc */
  overflow: hidden;
  background: rgba(255,255,255,0.1); /* nền nhẹ nếu ảnh nhỏ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-user-avatar-custom img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* QUAN TRỌNG */
}