/**
 * Custom Action Buttons - Shortcode & Live Preview styles
 *
 * Chỉ dùng cho shortcode [custom_action_buttons] và khung xem trước trong trang cài đặt.
 * Button 1 / Button 2 trong Header của Flatsome được trang trí bởi native-buttons.css.
 */

/* Base Wrapper & Smooth Fade-in Animation */
/*.cab-wrapper {*/
/*    position: relative;*/
/*    z-index: 99;*/
/*    box-sizing: border-box;*/
/*    background: transparent !important;*/
/*    animation: cabFadeIn 0.25s ease-out forwards;*/
/*}*/

/*@keyframes cabFadeIn {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(-3px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/* Container */
/*.cab-container {*/
/*    box-sizing: border-box;*/
/*    display: flex;*/
/*    align-items: flex-start;*/
/*    justify-content: center;*/
/*    gap: 12px;*/
/*}*/

/*.cab-container .cab-item {*/
/*    min-width: 125px;*/
/*    max-width: 160px;*/
/*}*/

/* Item Link Wrapper */
/*.cab-item {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    text-decoration: none !important;*/
/*    position: relative;*/
/*    user-select: none;*/
/*    -webkit-tap-highlight-color: transparent;*/
/*    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;*/
/*    cursor: pointer;*/
/*}*/

/*.cab-item:hover {*/
/*    transform: translateY(-2px);*/
/*    filter: brightness(1.06);*/
/*}*/

/*.cab-item:active {*/
/*    transform: scale(0.96) translateY(0);*/
/*}*/

/* Top Badge */
/*.cab-badge {*/
/*    display: inline-block;*/
/*    margin-bottom: 3px;*/
/*    padding: 1.5px 9px;*/
/*    border-radius: 999px;*/
/*    font-size: 10px;*/
/*    font-weight: 700;*/
/*    line-height: 1.25;*/
/*    text-align: center;*/
/*    white-space: nowrap;*/
/*    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);*/
/*    box-sizing: border-box;*/
/*    pointer-events: none;*/
/*    transition: transform 0.2s ease;*/
/*}*/

/* Badge 1 - Gradient Orange */
/*.cab-badge-1 {*/
/*    background: linear-gradient(180deg, #ff9436 0%, #ff5e00 100%);*/
/*    color: #ffffff;*/
/*    box-shadow: 0 2px 6px rgba(255, 94, 0, 0.45);*/
/*    border: 1px solid rgba(255, 255, 255, 0.4);*/
/*}*/

/* Badge 2 - Gradient Gold / Yellow */
/*.cab-badge-2 {*/
/*    background: linear-gradient(180deg, #ffe175 0%, #f5a623 100%);*/
/*    color: #3b2600;*/
/*    font-weight: 800;*/
/*    box-shadow: 0 2px 6px rgba(245, 166, 35, 0.45);*/
/*    border: 1px solid rgba(255, 255, 255, 0.5);*/
/*    text-shadow: none;*/
/*}*/

/* Main Button Base */
/*.cab-btn {*/
/*    width: 100%;*/
/*    height: 38px;*/
/*    padding: 0 10px;*/
/*    border-radius: 999px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;*/
/*    font-size: 14px;*/
/*    font-weight: 800;*/
/*    letter-spacing: 0.3px;*/
/*    text-transform: uppercase;*/
/*    text-decoration: none !important;*/
/*    box-sizing: border-box;*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*    transition: all 0.25s ease;*/
/*}*/

/* Button 1 (ĐĂNG KÝ) - Fiery Gradient Orange/Red */
/*.cab-btn-1 {*/
/*    background: linear-gradient(180deg, #ff8c00 0%, #ff3b00 55%, #e62000 100%);*/
/*    color: #ffffff !important;*/
/*    border: 1.5px solid #ffaa44;*/
/*    box-shadow: 0 4px 14px rgba(255, 60, 0, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.45);*/
/*    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);*/
/*}*/

/*.cab-item:hover .cab-btn-1 {*/
/*    box-shadow: 0 6px 18px rgba(255, 60, 0, 0.75), inset 0 1px 3px rgba(255, 255, 255, 0.6);*/
/*}*/

/* Button 2 (ĐĂNG NHẬP) - Dark with Gold Border & Text */
/*.cab-btn-2 {*/
/*    background: radial-gradient(circle at center, #272a34 0%, #16171b 100%);*/
/*    color: #ffcc00 !important;*/
/*    border: 1.5px solid #e5a93b;*/
/*    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(229, 169, 59, 0.15);*/
/*    text-shadow: 0 0 6px rgba(255, 204, 0, 0.35);*/
/*}*/

/*.cab-item:hover .cab-btn-2 {*/
/*    border-color: #ffd700;*/
/*    color: #ffffff !important;*/
/*    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4), inset 0 0 12px rgba(255, 204, 0, 0.3);*/
/*    background: #1f2127;*/
/*}*/

/* Shimmer Light Sweep on Hover */
/*.cab-btn::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: -50%;*/
/*    left: -60%;*/
/*    width: 40%;*/
/*    height: 200%;*/
/*    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);*/
/*    transform: rotate(30deg);*/
/*    transition: all 0.6s ease;*/
/*    pointer-events: none;*/
/*}*/

/*.cab-item:hover .cab-btn::after {*/
/*    left: 140%;*/
/*}*/

/* Mobile (< 850px) */
/*@media (max-width: 849px) {*/
/*    .cab-container .cab-item {*/
/*        flex: 1;*/
/*        min-width: 120px;*/
/*        max-width: 180px;*/
/*    }*/

/*    .cab-btn {*/
/*        height: 40px;*/
/*        font-size: 14.5px;*/
/*    }*/

/*    .cab-badge {*/
/*        font-size: 10.5px;*/
/*        padding: 2px 11px;*/
/*        margin-bottom: 4px;*/
/*    }*/
/*}*/

/* Extra Small Mobile Devices (<= 360px) */
/*@media (max-width: 360px) {*/
/*    .cab-container {*/
/*        gap: 8px;*/
/*    }*/

/*    .cab-badge {*/
/*        font-size: 9.5px;*/
/*        padding: 1.5px 8px;*/
/*        margin-bottom: 2px;*/
/*    }*/

/*    .cab-btn {*/
/*        height: 36px;*/
/*        font-size: 13px;*/
/*        letter-spacing: 0.1px;*/
/*    }*/
/*}*/