/* 快速教學選單項目樣式 */
.quick-tutorial-item {
    background: linear-gradient(135deg, #ff6b3d 0%, #ff4757 100%) !important;
    border-radius: 4px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 107, 61, 0.3);
    transition: all 0.3s ease;
}

.quick-tutorial-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 61, 0.4);
}

.quick-tutorial-item > a {
    color: #ffffff !important;
    font-weight: 500;
    text-decoration: none !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.quick-tutorial-item > a:hover,
.quick-tutorial-item > a:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 耳機圖示樣式 */
/*
.quick-tutorial-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
*/

/* 使用 CSS 繪製耳機圖示 */
/*
.quick-tutorial-icon::before {
    content: '🎧';
    font-size: 16px;
    filter: brightness(0) invert(1);
}
*/

/* 替代圖示方案 - 使用 Material Design Icons 字體 */
.quick-tutorial-icon.zmdi {
    font-family: 'Material-Design-Iconic-Font';
}

.quick-tutorial-icon.zmdi::before {
    content: '\f29c'; /* zmdi-headset-mic 的 Unicode */
    font-size: 30px;
    color: #ffffff;
}

/* 確保在主選單中的定位 */
#menu-neticrm.menu.horizontal-menu .quick-tutorial-item {
    display: inline-block;
}

/* 首頁 VIP 體驗區塊樣式 */
.vip-experience-container {
text-align: center;
margin: 24px 0;
padding: 0 16px;
}

.vip-experience-link {
display: inline-block;
background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
color: #ffffff !important;
text-decoration: none !important;
padding: 16px 32px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
box-shadow: 0 3px 12px rgba(74, 144, 226, 0.3);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.vip-experience-link:hover,
.vip-experience-link:focus {
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(74, 144, 226, 0.4);
}

.vip-experience-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}

.vip-experience-link:hover::before {
left: 100%;
}

.vip-experience-description {
color: #666666;
font-size: 14px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
padding: 0 16px;
}

/* 響應式設計 */
@media (max-width: 768px) {
.quick-tutorial-item {
    margin-left: 4px;
    margin-top: 4px;
}

.quick-tutorial-item > a {
    padding: 10px 12px !important;
    font-size: 14px;
}

.quick-tutorial-icon {
    width: 16px;
    height: 16px;
    font-size: 14px;
}

.vip-experience-container {
    margin: 20px 0;
    padding: 0 12px;
}

.vip-experience-link {
    font-size: 16px;
    padding: 14px 24px;
    margin-bottom: 14px;
}

.vip-experience-description {
    font-size: 13px;
    padding: 0 8px;
}
}

/* 確保不影響現有的下拉選單 */
.quick-tutorial-item .links {
    display: none !important;
}

/* 微互動效果 */
.quick-tutorial-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

.quick-tutorial-item:hover::after {
    left: 100%;
}
