@charset "utf-8";
@import url("mo.css");
@import url("ta.css");
@import url("de.css");

/* ===== Be Vietnam Pro (local, tải từ Google Fonts v12) ===== */
/* 300 */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-300-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 400 */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 500 */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-500-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 600 */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* 700 */
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/bevietnampro/bvp-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html {
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(169,169,169,0.4);
}
*{
    margin:0px;
    padding:0px;
}
body {
    font-family: Be Vietnam Pro, Verdana, Arial;
    font-size:11px;
    color:#000;
    background: #ECECEC url(../layout/bgbody.jpg) repeat-x 0% 0%;
}
table {
    min-width: 100%;
}
a, a:visited {
    color:#387A3A;
    text-decoration:none;
}
a:hover {
    color:#387A3A;
    text-decoration:underline;
}
a img {
    border: none;
}
label {
    cursor: pointer;
}
fieldset {
    padding: 6px;
    border: 1px solid #CCCCCC;
    margin-bottom: 10px;
}
legend {
    padding: 6px;
    font-size: 1.2em;
    font-weight: bold;
    color: #666666;

}
/*---------------------------------------------------------------------*/
#content-wrapper {
    width: 100%;
    overflow: hidden;
}
#content-wrapper .footer-content {
    width: 100%;
}
.content-wrapper:before {
    content: ' ';
    clear: both
}
.content-wrapper {
    padding: 10px
}
.content-wrapper:after {
    content: ' ';
    clear: both
}
#header {
    padding: 0.6em;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
#header .logoicon {
    float: left;
    padding-right: 15px;
}
#header .homelink {
    font-weight: bold;
    font-size: 24px;
}
#header .company-point {
    display: flex;
    flex-direction: column;
    gap:10px;
}
#header .company-kgi {
    font-size: 1.2em;
}
#header .kgi-rate {
    font-weight: bold;
    font-size: 24px;
    color: #AD180E;
}

#box-reward {
    overflow: hidden;
}
#menubar {
    width: 100%;
}
#menubar:after {
    content: '';
    clear: both;
    display: block;
}
ul.systemMenu, ul.systemMenu li {
    margin: 0;
    padding: 0;
    list-style: none;
    /*text-align: right;*/
    display: flex;
    align-items: baseline;
    flex-direction: row-reverse;
}

ul.systemMenu li {
    display: block;
    padding: 10px;
    color: #333;
    position: relative;
}
ul.systemMenu li.first {
    float: left;
}
ul.systemMenu li.last {
    float: right;
}
ul.systemMenu li a, ul.systemMenu li a:visited {
    text-decoration:none;
}
ul.systemMenu li a:hover {
    text-decoration: none;
}
ul.systemMenu li span {
    font-weight: bold;
    color: #930
}
ul.systemMenu li li {
    display: block;
    padding: 5px 0;
    text-align: right;
    border-bottom: 1px solid #CCCCCC;
    width: 100%;
}
ul.systemMenu li li:hover {
    background: #05386D
}
ul.systemMenu li li a {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
    color: #333333;
}
ul.systemMenu li li a:hover, ul.systemMenu li li:hover a {
    color: #FFFFFF;
    text-decoration: none;
}
ul.systemMenu li ul {
    border: 1px solid #CCCCCC;
    display: none;
    top: 33px;
    right: 0;
    position: absolute;
    z-index: 2;
    background: #f3f3f3;
    padding-top: 0px;
    min-width: 180px;
}
ul.systemMenu li:hover ul {
    display: block;
}
ul.systemMenu li ul#list_notice {
    border: none;
}
ul.systemMenu ul span {
    color: #666666;
}
ul.systemMenu li li a:hover span, ul.systemMenu li li:hover a span {
    color: white;
}
/*--------- Notification ------------*/
.notice-title {
    padding-top: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #0000FF;
}
.notice-content {
    padding: 15px 0;
    line-height: 180%;
}
.notice-confirm {
    color: #FF0000;
    padding: 15px 0;
}
.notice-author {
    font-style: italic;
    font-weight: bold;
    padding-top: 20px;
    text-align: right;
}

/*--------- Login ------------*/
.login-container {
    background: linear-gradient(349deg, #fde9d3 15.37%, #e9eeff 72.54%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Be Vietnam Pro, Geneva, Verdana, sans-serif;
    overflow: hidden;
}
.login-container-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("<?php echo WEB_ROOT; ?>public/images/backgroundlogin.jpg") center/cover;
    opacity: 0.1;
    z-index: 1;
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 2;
    animation: slideUp 0.6s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo img {
    width: 80px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.login-logo img:hover {
    transform: scale(1.05);
}

.login-title {
    font-size: 28px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.login-subtitle {
    color: #718096;
    font-size: 16px;
    margin: 0;
    font-weight: 400;
}

.form-group {
    margin-bottom: 20px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-icon {
    font-size: 24px;
    color: #a0aec0;
    z-index: 1;
    transition: color 0.3s ease;
}

.input-wrapper input {
    width: 100% !important;
    padding: 10px !important;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px !important;
    background: #ffffff;
    transition: all 0.3s ease;
    box-sizing: border-box;
    color: #2d3748;
}

.input-wrapper input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.input-wrapper input:focus + .input-icon,
.input-wrapper input:not(:placeholder-shown) + .input-icon {
    color: #667eea;
}

.captcha-group {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 10px;
}

.captcha-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7fafc;
    padding: 2px 6px;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    width: 50%;
    justify-content: space-between;
}

.captcha-image {
    border-radius: 8px;
}

.captcha-refresh {
    cursor: pointer;
    transition: all 0.3s ease;
}

.captcha-refresh:hover {
    transform: rotate(180deg);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.remember-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 10px;
}

.remember-checkbox input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark {
    background: #667eea;
    border-color: #667eea;
}

.remember-checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-text {
    color: #4a5568;
    font-size: 14px;
}

.login-button {
    width: 85%;
    padding: 15px;
    background: linear-gradient(135deg, #387A3A 0%, #47a54a 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 auto;
    display: block;
}

.login-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.login-button:active {
    transform: translateY(0);
}

.login-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.d-flex {
    display: flex;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.button-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

@keyframes spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

.login-button.loading .button-text {
    opacity: 0.7;
}

.login-button.loading .button-loader {
    display: block;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.login-footer p {
    color: #718096;
    font-size: 14px;
    margin: 0;
}

.reset-link {
    color: #ad180e !important;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.reset-link:hover {
    text-decoration: underline;
}

.error-message {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    border: 1px solid #fc8181;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error-icon {
    color: #e53e3e;
    font-size: 18px;
    font-weight: bold;
}

.error-message span {
    color: #742a2a;
    font-size: 14px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-card {
        margin: 20px;
        padding: 30px 25px;
        max-width: none;
    }
    
    .login-title {
        font-size: 24px;
    }
    
    .captcha-group {
        flex-direction: column;
    }
    
    .captcha-wrapper {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .login-card {
        margin: 15px;
        padding: 25px 20px;
    }
    
    .login-logo img {
        width: 60px;
        height: 69px;
    }
    
    .login-title {
        font-size: 22px;
    }
    
    .input-wrapper input {
        padding: 12px 12px 12px 45px;
        font-size: 15px;
    }
    
    .input-icon {
        left: 12px;
        font-size: 16px;
    }
}

/* Animation cho form elements */
.form-group {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-options { animation: fadeInUp 0.6s ease-out 0.4s both; }
.login-button { animation: fadeInUp 0.6s ease-out 0.5s both; }
.login-footer { animation: fadeInUp 0.6s ease-out 0.6s both; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legacy login styles for backward compatibility */
.login {
    padding: 20px 20px 20px;
    position: relative;
    margin: 0 auto;
    background: white;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.login h1 {
    font-size: 24px;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    color: #067231;
    text-shadow: none;
    text-transform: uppercase;
    text-align: center;
    margin-top: 10px;
}

.login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form-input {
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login .error-box {
    color: #ff0000;
}

.login input[type="text"],
.login input[type="password"] {
    width: 278px;
}

.login p.remember_me label {
    font-size: 12px;
    color: #666666;
    font-weight: 600;
}

.login p.remember_me input {
    position: relative;
    bottom: 1px;
    margin-right: 4px;
    vertical-align: middle;
}
.login p.submit {
    text-align: right;
}

.login-help {
    margin: 20px 0;
    font-size: 11px;
    color: #387A3A;
    text-align: center;
}

.login-help a {
    color: #666666;
    text-decoration: none;
}

.login-help a:hover {
    text-decoration: underline;
}

.login input {
    font-family: Be Vietnam Pro, Verdana, sans-serif;
    font-size: 14px;
}

.login input[type="text"],
.login input[type="password"] {
    margin: 5px;
    padding: 0 10px;
    height: 34px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #067231;
    outline: none;
    border-radius: 5px;
    color: #000;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    outline-offset: 0;
}

.login input[type="submit"] {
    padding: 0 18px;
    height: 29px;
    font-size: 12px;
    font-weight: bold;
    background: #067231;
    color: #ffffff;
    border-radius: 5px;
    border: none;
}

.login input[type="submit"]:active {
    background: #cde5ef;
    border-color: #9eb9c2 #b3c0c8 #b4ccce;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}
/*--------- MainMenu ------------*/
.jqueryslidemenu {
    background: none repeat scroll 0 0 #414141;
    width: 100%;
}
.jqueryslidemenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.jqueryslidemenu ul li {
    list-style-type: none;
    margin: 0 2px 0 0;
    padding: 0;
    position: relative;
    /*z-index: 5;*/
}
.jqueryslidemenu li a.TopMenuItem {
    height: 28px;
}
.jqueryslidemenu li a {
    color: #000000;
    display: block;
    font-weight: normal;
    outline: medium none;
    text-decoration: none;
}
.jqueryslidemenu li {
    background: url("../layout/menu_admin.gif") repeat-x scroll 0 -28px transparent;
}
.jqueryslidemenu li:hover {
    background-position: 0 -112px;
}
.jqueryslidemenu li a .CornerLeft {
    background: url("../layout/menu_admin.gif") no-repeat scroll 0 0 transparent;
    display: block;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 12px;
}
.jqueryslidemenu li:hover .CornerLeft {
    background-position: 0 -84px;
}
.jqueryslidemenu li a .MenuText {
    background-position: 0 8px;
    background-repeat: no-repeat;
    color: #333333;
    display: block;
    font-size: 11px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    margin-left: 12px;
    margin-right: 12px;
    padding-left: 22px;
    padding-right: 14px;
}
.jqueryslidemenu li:hover .MenuText {
    color: #FFFFFF;
}
.jqueryslidemenu li a .CornerRight {
    background: url("../layout/menu_admin.gif") no-repeat scroll 0 -56px transparent;
    display: block;
    height: 28px;
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
}
.jqueryslidemenu li:hover .CornerRight {
    background-position: 0 -140px;
}
.jqueryslidemenu li a .Arrow {
    background: url("../layout/down.gif") no-repeat scroll 0 0 transparent;
    height: 4px;
    position: absolute;
    right: 0;
    top: 13px;
    width: 20px;
}
.jqueryslidemenu li:hover .Arrow {
    background: url("../layout/on_down.gif") no-repeat scroll 0 0 transparent;
}
.jqueryslidemenu .MenuImageIcon {
    background-repeat: no-repeat;
    display: block;
    height: 16px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 16px;
}
* html .jqueryslidemenu ul li a {
    display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
    color: #464646;
}
.jqueryslidemenu ul li a:hover {
    color: #005FB1;
}
.jqueryslidemenu ul li ul {
    display: block;
    left: 0;
    position: absolute;
    visibility: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.jqueryslidemenu ul li ul li a {
    padding: 6px 10px;
}
.jqueryslidemenu ul li ul li {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 1px solid #C5C5BD;
    border-bottom: 1px solid #C5C5BD;
    border-left: 1px solid #C5C5BD;
    float: none;
    margin: 0;
}
.jqueryslidemenu ul li ul li:first-child {
    /*border-top: 1px solid #C5C5BD;*/
}
/*.jqueryslidemenu ul li ul li ul {
    top: 0;
    position: absolute
}*/
.jqueryslidemenu ul li ul li a {
    background-image: none;
    border-top-width: 0;
    font-weight: normal;
    margin: 0;
    /*width: 184px;*/
}
.jqueryslidemenu ul li ul li a span {
    text-decoration: none;
}
.jqueryslidemenu ul li ul li:hover {
    background: none repeat scroll 0 0 #05386D;
    border-right: 1px solid #05386D;
    border-bottom: 1px solid #05386D;
    border-left: 1px solid #05386D;
}
.jqueryslidemenu ul > li ul > li:hover > a,
.jqueryslidemenu ul li ul li a:hover {
    color: #FFFFFF;
}
.downarrowclass {
    position: absolute;
    right: 7px;
    top: 12px;
}
.rightarrowclass {
    position: absolute;
    right: 5px;
    top: 18px;
}
#myslidemenu li li strong {
}
#myslidemenu ul li ul li .SubMenuText {
}
#myslidemenu li li span {
    padding: 3px 0;
}
#myslidemenu li li strong, #myslidemenu li li span {
    display: block;
    line-height: 1.2;
}
.jqueryslidemenu ul ul ul {
    top: 0;
    left: 100%;
}
.jqueryslidemenu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
}
div.line-border-bottom {
    height: 5px;
    width: 100%;
    background-color: #387A3A;
    float:left
}

/*------- Layout ----------*/
#content, #center-content {
    width: 95%;
    margin:0 auto !important;
    clear:both;
    padding-top: 6px;
    /*border: #CCC solid 1px;
    border-radius: 3px; */
}
/*------- End Layout ----------*/

/*--------- User ------------*/
.user-wrapper {
    width: 100%;
    margin: 0 auto;
}
.userGroup {
    font-weight: bold;
    padding: 6px;
}
.userList {
    padding-bottom: 10px;
    display: block;
    overflow: hidden;
}
.user-account, .btn-more-less {
    padding: 5px;
}
.location-content {
    width: 24%;
    padding: 5px 0;
    float: left;
}
.user-avatar {
    margin-right: 15px;
}
.personal-avatar {
    width: 200px;
    float: left;
}
.avatar-suggestion {
    line-height: 20px;
    float: left;
}
.user-box-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.user-info {
    width: 100%;
    display: block;
}
.user-content {
    line-height: 25px;
    display: flex;
}
.field-name {
    width: 95px;
    font-weight: bold;
}
.field-value {
    margin-left: 10px;
}

/* ------- System Admin --------*/
input.txtOrder {
    width: 50px
}
input.txtUsername {
    width: 100px;
}
/*----- Current path --------*/
.path, .subMenuBox, .toolboxButton, .content-box, .content-wrapper {
    border: #DDDDDD solid 1px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin-bottom: 6px;
}
.path {
    height: 24px;
}
.path ul, .path ul li {
    margin: 0;
    padding: 0;
    list-style: none
}
.path ul li {
    display: inline;
    height: 24px;
    float: left;
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -35px #FFFFFF;
}
.path ul li.SecondLast {
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -4px transparent;
}
.path ul li.Last {
    background: url("../layout/breadcrumb_grid.png") no-repeat scroll right -35px #F4F5F7;
}
.path ul li a, .path ul li span {
    color: #387A3A;
    display: block;
    font-weight: normal;
    margin-right: 10px;
    padding: 5px 10px 6px;
    text-decoration: none;
}
.path ul li span {
    color: #333
}

/*----- Sub menu list --------*/
.subMenuBox {
    clear: both;
    min-height: 25px;
    overflow: hidden;
}

ul.submenu {
    padding: 0 5px;
    float: right
}
ul.submenu li {
    list-style: none;
    float: left;
    margin: 6px 0;
    padding: 0;
}

ul.submenu li a, ul.submenu li a:visited {
    border-right: 1px solid #CCCCCC;
    color: #387A3A;
    cursor: pointer;
    font-weight: bold;
    padding: 0 10px;
}
ul.submenu li a.active {
    color: #993300
}
/*--------- Toolbox -----------*/
.toolboxButton {
    padding: 5px;
}
.toolboxButton:after {
    content: '';
    display: block;
    clear: both;
}
.toolboxButton .header {
    float: left;
    color: #666666;
}
.toolboxButton .header img {
    vertical-align: middle
}
.toolboxButton .header span {
    color: #666666;
}
.toolboxButton .toolbar-table {
    float: right;
    overflow-x: scroll;
    scrollbar-width: none;
}
.toolboxButton .toolbar-table::-webkit-scrollbar {
    width: 0;
    height: 0;
}
table.toolbar {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
}
table.toolbar td {
    color: #666666;
    height: 48px;
    /*max-width: 55px;*/
    padding: 1px 1px 1px 4px;
    text-align: center;
    vertical-align: top;
}
table.toolbar a {
    border: 1px solid transparent;
    color: #387A3A;
    cursor: pointer;
    display: block;
    float: left;
    padding: 1px 5px;
    white-space: nowrap;
}
table.toolbar a:hover {
    background-image: url("../layout/icon_bg.gif");
    background-position: center bottom;
    background-repeat: repeat-x;
    border-color: #EEEEEE #CCCCCC #CCCCCC #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-style: solid;
    border-width: 1px;
    color: #387A3A;
    text-decoration: none;
}
table.toolbar span {
    display: block;
    float: none;
    height: 32px;
    margin: 0 auto;
    width: 32px;
}
/*-- Toolbox button --*/
.icon-button, .icon-button-16 {
    background-color: Transparent;
    background-position: left top;
    transition: all 0.8s ease 0s;
    border: 0 none;
    cursor: pointer;
    height: 32px;
    width: 32px;
    display: table;
}
a:hover .icon-button, .icon-button:hover {
    background-position: left top;
    transition: all 0.3s ease 0s;
}
.icon-disabled {
    background-position: left bottom;
}
.icon-button-16 {
    height: 16px;
    width: 16px;
}
.Icon-32-Add {
    background-image: url("../button/add-32.png");
}
.Icon-32-Apply {
    background-image: url("../button/apply-32.png");
}
.Icon-32-Approve {
    background-image: url("../button/approve-32.png");
}
.Icon-32-Archive {
    background-image: url("../button/archive-32.png");
}
.Icon-32-Back {
    background-image: url("../button/back-32.png");
}
.Icon-32-Cache {
    background-image: url("../button/cache-32.png");
}
.Icon-32-Calendar {
    background-image: url("../button/calendar-32.png");
}
.Icon-32-Cancel {
    background-image: url("../button/cancel-32.png");
}
.Icon-32-Copy {
    background-image: url("../button/copy-32.png");
}
.Icon-32-Config {
    background-image: url("../button/config-32.png");
}
.Icon-32-Confirm {
    background-image: url("../button/confirm-32.png");
}
.Icon-32-Csv {
    background-image: url("../button/csv-32.png");
}
.Icon-32-Custom {
    background-image: url("../button/custom-32.png");
}
.Icon-32-Delete {
    background-image: url("../button/delete-32.png");
}
.Icon-32-Deposit {
    background-image: url("../button/deposit-32.png");
}
.Icon-32-Dispute {
    background-image: url("../button/dispute-32.png");
}
.Icon-32-Edit {
    background-image: url("../button/edit-32.png");
}
.Icon-32-Excel {
    background-image: url("../button/excel-32.png");
}
.Icon-32-Finish {
    background-image: url("../button/finish-32.png");
}
.Icon-32-Forward {
    background-image: url("../button/forward-32.png");
}
.Icon-32-Invoice {
    background-image: url("../button/invoice-32.png");
}
.Icon-32-Help {
    background-image: url("../button/help-32.png");
}
.Icon-32-Headline {
    background-image: url("../button/default-32.png");
}
.Icon-32-List {
    background-image: url("../button/list-32.png");
}
.Icon-32-Lock {
    background-image: url("../button/lock-32.png");
}
.Icon-32-Merge {
    background-image: url("../button/merge-32.png");
}
.Icon-32-Move {
    background-image: url("../button/move-32.png");
}
.Icon-32-Truck {
    background-image: url("../button/truck-32.png");
}
.Icon-32-Optimize {
    background-image: url("../button/optimize-32.png");
}
.Icon-32-Paid {
    background-image: url("../button/paid-32.png");
}
.Icon-32-Pdf {
    background-image: url("../button/pdf-32.png");
}
.Icon-32-Pending {
    background-image: url("../button/pending-32.png");
}
.Icon-32-Read {
    background-image: url("../button/read-32.png");
}
.Icon-32-Restore {
    background-image: url("../button/restore-32.png");
}
.Icon-32-Print {
    background-image: url("../button/printer-32.png");
}
.Icon-32-Payment {
    background-image: url("../button/payment-32.png");
}
.Icon-32-Process {
    background-image: url("../button/process-32.png");
}
.Icon-32-Publish {
    background-image: url("../button/publish-32.png");
}
.Icon-32-QR {
    background-image: url("../button/qr-32.png");
}
.Icon-32-Racking {
    background-image: url("../button/racking-32.png");
}
.Icon-32-Return {
    background-image: url("../button/return-goods-32.png");
}
.Icon-32-Revert {
    background-image: url("../button/revert-32.png");
}
.Icon-32-Review {
    background-image: url("../button/copy-32.png");
}
.Icon-32-Save {
    background-image: url("../button/save-32.png");
}
.Icon-32-SaveAndAdd {
    background-image: url("../button/save-32.png");
}
.Icon-32-Search {
    background-image: url("../button/search-32.png");
}
.Icon-32-Send {
    background-image: url("../button/send-32.png");
}
.Icon-32-Statistic {
    background-image: url("../button/statistic-32.png");
}
.Icon-32-Transfer {
    background-image: url("../button/transfer-32.png");
}
.Icon-32-Unlock {
    background-image: url("../button/unlock-32.png");
}
.Icon-32-UnReview {
    background-image: url("../button/copy-32.png");
}
.Icon-32-UnArchive {
    background-image: url("../button/unarchive-32.png");
}
.Icon-32-UnPublish {
    background-image: url("../button/unpublish-32.png");
}
.icon-16-button {
    background-color: Transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 16px;
    width: 16px;
    display: table-cell;
    /*padding-left: 20px;*/
}
.Icon-16-Add {
    background-image: url("../button/add-16.png");
}
.Icon-16-Cancel {
    background-image: url("../button/cancel-16.png");
}
.Icon-16-Collapse {
    background-image: url("../button/collapse-16.png");
}
.Icon-16-Edit {
    background-image: url("../button/edit-16.png");
}
.Icon-16-View {
    background-image: url("../button/view-16.png");
}
.Icon-16-Expand {
    background-image: url("../button/expand-16.png");
}
.Icon-16-Delete {
    background-image: url("../button/delete-16.png");
}
.Icon-16-Calendar {
    background-image: url("../button/calendar-16.png");
}
.Icon-16-List {
    background-image: url("../button/list-16.png");
}
.Icon-16-Restore {
    background-image: url("../button/restore-16.png");
}
.Icon-16-Money {
    background-image: url("../icon/salary-16.png");
}
.Icon-32-Money {
    background-image: url("../icon/salary-32.png");
}

.icon-48-button {
    background-color: Transparent;
    background-position: left top;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    height: 48px;
    width: 48px;
    /*padding-left: 20px;*/
}
.icon-48-button span {
    display: block
}
.Icon-48-Payment {
    background-image: url("../icon/payment-48.png");
}
.Icon-48-ProductAdd {
    background-image: url("../icon/product-48.png");
}
.Icon-48-ProductList {
    background-image: url("../icon/product-list-48.png");
}
.Icon-48-Content {
    background-image: url("../icon/article-48.png");
}
.Icon-48-List {
    background-image: url("../icon/list-48.png");
}
.Icon-48-Category {
    background-image: url("../icon/tree-48.png");
}
.Icon-48-Config {
    background-image: url("../icon/config-48.png");
}
.Icon-48-Interface {
    background-image: url("../icon/themes-48.png");
}
.Icon-48-OrderList {
    background-image: url("../icon/info-48.png");
}
.Icon-48-StockIn {
    background-image: url("../icon/stock-in-48.png");
}
.Icon-48-StockOut {
    background-image: url("../icon/stock-out-48.png");
}
.Icon-48-Customer {
    background-image: url("../icon/customer-48.png");
}
.Icon-48-Calendar {
    background-image: url("../icon/calendar-48.png");
}
.Icon-48-Account {
    background-image: url("../icon/user-48.png");
}
.Icon-48-Grant {
    background-image: url("../icon/grant-48.png");
}
.Icon-48-User {
    background-image: url("../icon/user-48.png");
}
.Icon-48-Dispute {
    background-image: url("../icon/dispute-48.png");
}
.Icon-48-Feedback {
    background-image: url("../icon/feedback-48.png");
}
.Icon-64-Money {
    background-image: url("../icon/salary-64.png");
}

/*-- End Toolbox button --*/
/*----------------------------*/

/*---- Form search ----*/
.content-box {
    padding: 2px;
    margin: 5px 0px;
}
.content-box #advance-search,
.content-box #auto-fill-box,
.content-box #email-box {
    display: none
}
#email-box input.txtMail {
    width: 85%;
}
#email-box span#email_cc, #email-box span#email_bcc {
    margin-left: 5px;
    cursor: pointer;
}
#email-box span#ccbcc:hover {
    color: #005FB1
}
#email-box tr#email_cc, #email-box tr#email_bcc {
    display: none;
    margin: 3px 0
}

#advance-search {
    width: 80%;
    padding: 10px;
    margin: 0 auto;
}

#advance-search .advance-search-title {
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px #000000;
}
.proposer-wrapper {
    position: relative;
}
#proposer-box, #purchaser-box {
    position: relative;
}
.userlist-container {
    width: 180px;
    height: 160px;
    overflow-y: scroll;
    top: 3px;
    left: 0;
    position: absolute;
    background-color: #ffffff;
    border: #343434 solid 1px;
    z-index: 1;
}
.btnclose {
    border: #343434 solid 1px;
    width: 20px;
    border-radius: 15px;
    text-align: center;
    left: 164px;
    position: absolute;
    font-weight: bold;
    line-height: 20px;
    background-color: #fff;
    z-index: 2;
}
.ui-widget-overlay {
    background: #000;
    opacity: 0.5;
    filter: Alpha(Opacity=80);
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    border: 1px solid #afd1af!important;
    background: unset;
    background-color: #e6f5e6;
    border-radius: 4px;
}
/*---- End Form search ----*/

/*--- Content detail ---*/
table.admintable {
    /*background-color: #FFFFFF;*/
    border-spacing: 3px;
}
table.admintable td.key, table.admintable td.paramlist_key {
    background-color: #F6F6F6;
    border-bottom: 1px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    color: #666666;
    font-weight: bold;
    padding: 4px;
    text-align: right;
    vertical-align: top;
    width: 200px;
    white-space: nowrap;
}
table.admintable td.sub-head {
    background: none repeat scroll 0 0 #EFEFEF;
    border-bottom: 1px solid #777777;
    color: #444444;
    font-weight: bold;
    height: 25px;
    padding: 2px 5px;
    text-align: left;
}
table.admintable td {
    padding: 2px 5px;
}
table.admintable td div#other_image_list div {
    line-height:32px;
    height:32px;
}
table.admintable td select.cbList {
    width: 200px;
}
table.admintable td textarea {
    width: 90%;
    height: 150px;
    background: none;
}
.content-detail {
    padding: 5px;
    position: relative;
}
.diff-notice-box {
    font-weight: bold;
    color: #343434;
}
.diff-notice-box a:before {
    content: ' ';
    background: url("images/arrow-blink.gif") no-repeat 50% 50%;
    background-size: cover;
    padding-left: 20px;
}
.diff-notice-box a, .diff-notice-box a:visited {
    color: #FF0000;
}
.diff-notice-box a:hover {
    color: #0000FF;
    text-decoration: none;
    /*transition: ease-in all 0.3s;*/
    transition: all 0.8s ease 0s;
}
/*---- End content detail ----*/

/*--- Content list ---*/
.content-box .content-list {
    width: 100%;
    overflow: auto;
}
.content-box .content-block {
    background: #FFFFFF url("images/bg-block.png") no-repeat 50% 50%;
}
.content-box .content-normal {

}
.content-box .select-data-type {
    padding: 10px;
}
.content-box .select-data-type h2 {
    color: #444444;
    display: block
}
.content-box .select-data-type a {
    padding: 10px 0;
    margin: 0 15px;
    display: inline-block
}
.content-box .content-list-empty {
    padding: 25px 60px;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
}
.content-box .content-list img.imagethumb {
    width: 130px;
}
.content-box .content-list .otherImageList {
    padding: 10px;
    float: left;
    text-align: center
}
.content-box .content-list .otherImageList img {
    display: block
}

.sub-title {
    font-size: 90%;
    font-style: italic;
    font-weight: normal;
}
.content-box .chart-box {
    padding: 25px 50px 0;
}
.content-box .content-list .feedback-wrapper {
    padding: 10px;
    display: block;
}
.feedback-wrapper .thread-title {
    color: #666666;
    padding: 1em 0px;
    font-size: 20px;
    font-weight: bold;
}
.feedback-wrapper .thread-info {
    position: relative;
    padding-bottom: 15px;
    display: flex;
    justify-content: flex-start;
}

.feedback-wrapper .user-avatar {
    min-width: 40px;
    position: relative;
    width: 40px;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    margin-right: 15px;
    background-color: #e0e0e0;
    border: 2px solid #0d6cb6;
}
.feedback-wrapper .user-info {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: none;
}
.feedback-wrapper .user-name {
    font-size: 1rem;
    text-rendering: optimizelegibility;
    color: #0d6cb6;
    font-weight: 700;
    margin-bottom: 3px;
}
.feedback-wrapper .date-comment-view {
    color: #7a7a7a;
    font-size: 0.8rem;
    flex-flow: wrap;
    display: flex;
}
.feedback-wrapper .feedback-date {
    margin: 0;
    padding: 0;
}
.feedback-wrapper .feedback-comment:before {
    content: '•';
    margin-right: 5px;
    padding-left: 0px;
}
.feedback-wrapper .feedback-comment {
    margin: 0 5px;
}
.feedback-wrapper .feedback-view {
    margin: 0 5px;
}
.feedback-wrapper .feedback-content {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
}
.feedback-wrapper .feedback-file {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}
.feedback-wrapper .feedback-receiver {
    margin-top: 24px;
    position: relative;
    margin: 10px 0;
}
.feedback-wrapper .feddback-reply-list {
    position: relative;
    padding: 1rem 0 1rem 2rem;
    border-radius: 13px;
}
.feddback-reply-list .reply-container {
    position: relative;
    display: flex;
    padding-bottom: 1rem;
    border-bottom: aliceblue solid 1px;
    margin-bottom: 1rem;
}
.reply-container .reply-wrapper {
    padding: 5px 15px 0 0;
    overflow: hidden;
}
.reply-container .reply-button {
    display: flex;
    justify-content: space-between;
    width: 80px;
}
.reply-button .edit-reply, .reply-button .delete-reply, .reply-button .save-reply {
    padding: 4px 8px;
    border: #0d6cb6 solid 1px;
    border-radius: 5px;
}
.reply-button .edit-reply:hover, .reply-button .delete-reply:hover, .reply-button .save-reply:hover {
    background: #0d6cb6;
    text-decoration: none;
    color: #fff;
}
.reply-container .reply-control {
    display: flex;
}
.reply-container .reply-user {
    font-weight: 700;
    font-size: 13px;
    color: #0d6cb6;
}
.reply-container .reply-time {
    font-weight: normal;
    color: #ababab;
    font-size: 10px;
    padding: 0 20px;
}
.reply-container .reply-content {
    position: relative;
    margin-top: 1rem;
    font-size: 15px;
}
.feedback-wrapper .thread-action {
    padding: 1rem 0 1rem 2rem;
    margin: 10px 0;
    display: flex;
}
.feedback-wrapper .post-reply {
    width: 100%;
    border-radius: 8px;
    padding: 13px 15px;
    justify-content: center;
    position: relative;
    background-color: #eff1f3;
}
.feedback-wrapper .edit-reply-input {
    resize: none;
    width: 100%;
    font-size: 15px;
    display: block;
    line-height: 1.4;
    min-height: 100px;
}
.feedback-wrapper .post-reply-author, .feedback-wrapper .post-reply-content {
    resize: none;
    width: 100%;
    font-size: 15px;
    flex: 1;
    box-sizing: border-box;
    border-radius: 0;
    background: none;
    border: none;
    outline: none;
    outline-width: medium;
    box-shadow: none;
    display: block;
    line-height: 1.4;
    overflow: hidden;
}
.feedback-wrapper #add-recipients {
    padding: 10px 4px;
}
.feedback-wrapper .title-label {
    padding: 15px 4px 0;
}
.feedback-wrapper .post-reply-author {
    min-height: 30px;
    padding: 4px;
}
.feedback-wrapper .post-reply-content {
    min-height: 100px;
}
.feedback-wrapper .post-reply-button {
    display: flex;
    right: 30px;
    bottom: 25px;
    position: absolute;
    padding: 5px 20px;
    border-radius: 3px;
    background: #0d6cb6;
    color: #fff;
}
.content-box .content-list .show-less {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    max-width: 85%;
    display: inline-block;
}
/* Utility dung chung: cat ngan text dai, click de mo rong / thu gon (JS o comon.js).
   Dung: <div class="text-clamp-expand" title="Click de mo rong / thu gon">...</div>
   Tuy chinh chieu cao cat qua bien --clamp-max-height (mac dinh 60px). */
.text-clamp-expand {
    --clamp-max-height: 60px;
    max-height: var(--clamp-max-height);
    overflow: hidden;
    position: relative;
    transition: max-height .25s ease;
}
.text-clamp-expand.is-overflowing {
    cursor: pointer;
}
.text-clamp-expand.is-overflowing:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.96) 100%);
    pointer-events: none;
}
.text-clamp-expand.is-overflowing:not(.expanded):hover::before {
    content: '↓';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 10px;
    color: #555;
    background: #fff;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid #ccc;
}
.text-clamp-expand.expanded {
    max-height: none;
}
.content-box .content-list .list-user {
    margin-right: 5px;
}
.sub-header {
    color: #666666;
    padding: 15px 0;
    font-weight: bold;
    background-color: #f0f0f0;
    font-size: 15px;
}
table.adminlist {
    background-color: #E7E7E7;
    border-spacing: 1px;
    color: #666666;
    border-collapse: collapse;
}
table.table-fixed {
    table-layout: fixed !important; 
    width: 100%;
}
table.adminlist th {
    background: none repeat scroll 0 0 #F0F0F0;
    border-color: #E7E7E7 #E7E7E7 #999999;
    border-style: solid;
    border-width: 1px;
    color: #666666;
    text-align: center;
    font-weight: bold;
    padding: 4px;
}

/* floatThead size-row: giữ height do JS set, bỏ padding/border kế thừa từ th ở trên */
table.adminlist > thead > tr.size-row > th {
    padding: 0;
    border: none;
    background: transparent;
}

table.adminlist tr.single-row th {
    border-bottom: none
}
table.adminlist th.col_20 {
    width: 20px;
}
table.adminlist th.col_25 {
    width: 25px;
}
table.adminlist th.col_40 {
    width: 40px;
}
table.adminlist th.col_50 {
    width: 50px;
}
table.adminlist th.col_60 {
    width: 60px;
}
table.adminlist th.col_70 {
    width: 70px;
}
table.adminlist th.col_80 {
    width: 80px;
}
table.adminlist th.col_90 {
    width: 90px;
}
table.adminlist th.col_100 {
    width: 100px;
}
table.adminlist th.col_110 {
    width: 110px;
}
table.adminlist th.col_120 {
    width: 120px;
}
table.adminlist th.col_130 {
    width: 130px;
}
table.adminlist th.col_140 {
    width: 140px;
}
table.adminlist th.col_150 {
    width: 150px;
}
table.adminlist th.col_160 {
    width: 160px;
}
table.adminlist th.col_170 {
    width: 170px;
}
table.adminlist th.col_180 {
    width: 180px;
}
table.adminlist th.col_190 {
    width: 190px;
}
table.adminlist th.col_200 {
    width: 200px;
}
table.adminlist th.col_210 {
    width: 210px;
}
table.adminlist th.col_220 {
    width: 220px;
}
table.adminlist th.col_230 {
    width: 230px;
}
table.adminlist th.col_240 {
    width: 240px;
}
table.adminlist th.col_250 {
    width: 250px;
}
table.adminlist th.col_260 {
    width: 260px;
}
table.adminlist th.col_270 {
    width: 270px;
}
table.adminlist th.col_280 {
    width: 280px;
}
table.adminlist th.col_290 {
    width: 290px;
}
table.adminlist th.col_300 {
    width: 300px;
}
table.adminlist th.col_310 {
    width: 310px;
}
table.adminlist th.col_320 {
    width: 320px;
}
table.adminlist th.col_330 {
    width: 330px;
}
table.adminlist th.col_340 {
    width: 340px;
}
table.adminlist th.col_350 {
    width: 350px;
}
table.adminlist th.col_360 {
    width: 360px;
}
table.adminlist th.col_370 {
    width: 370px;
}
table.adminlist th.col_380 {
    width: 380px;
}
table.adminlist th.col_390 {
    width: 390px;
}
table.adminlist th.col_400 {
    width: 400px;
}
table.adminlist th.col_410 {
    width: 410px;
}
table.adminlist th.col_420 {
    width: 420px;
}
table.adminlist th.col_430 {
    width: 430px;
}
table.adminlist th.col_440 {
    width: 440px;
}
table.adminlist th.col_450 {
    width: 450px;
}
table.adminlist th.col_460 {
    width: 460px;
}
table.adminlist th.col_470 {
    width: 470px;
}
table.adminlist th.col_480 {
    width: 480px;
}
table.adminlist th.col_490 {
    width: 490px;
}
table.adminlist th.col_500 {
    width: 500px;
    min-width: 500px;
}
table.adminlist tbody tr.head td {
    background: #D8D8D8;
    font-weight: bold
}
table.adminlist tbody tr.head td a {
    color: inherit
}
table.adminlist tbody tr.head td a:hover {
    color: #387A3A;
}
table.adminlist tbody tr.empty td {
    text-align: center;
}
table.adminlist tbody tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 0 1px 1px;
    height: 25px;
}
table.adminlist tbody tr td ol, table.adminlist tbody tr td li {
    list-style-position: inside;
}
table.adminlist tbody tr.row0 td {
    background: none repeat scroll 0 0 #F9F9F9;
}
table.adminlist tbody tr.row1 td {
    background: none repeat scroll 0 0 #EAEAEA;
    border-top: 1px solid #FFFFFF;
}
table.adminlist tbody tr.m-row td {
    background: none repeat scroll 0 0 #f7971d;
}
table.adminlist tbody tr.row0 td a.list-button:before, table.adminlist tbody tr.row1 td a.list-button:before {
    content: ' - ';
}
table.adminlist tbody tr.row0 td a.list-button:first-child:before, table.adminlist tbody tr.row1 td a.list-button:first-child:before {
    content: '';
}
table.adminlist tbody tr:hover:not(.child-table) td,
table.adminlist tbody tr.row0:hover td, table.adminlist tbody tr.row1:hover td,
table.adminlist tbody tr.row0:hover td a, table.adminlist tbody tr.row1:hover td a {
    background-color: #FFFFDD;
    color: #666666
}
table.adminlist tbody tr td table tr:hover td, table.adminlist tbody tr td table tr:hover td {
    background-color: #FFF;
}
table.adminlist tbody tr.pending td {

}
table.adminlist tbody tr.cancel td,
table.adminlist tbody tr.canceling td,
table.adminlist tbody tr.block td,
table.adminlist tbody tr.locked td {
    background: gray;
    color: white;
}
table.adminlist tbody tr.reject td,
table.adminlist tbody tr.reject_interview td,
table.adminlist tbody tr.request td {
    background: yellowgreen;
    /*color: red;*/
}
table.adminlist tbody tr.approved td {
    background: #d9d100;
}
table.adminlist tbody tr.delete-pending td {
    background: #fff3cd;    /* dòng chờ duyệt xóa (hàng dự trù) — đặt sau row0/row1/approved để thắng */
}
table.adminlist tbody tr.confirmed td {
    background: #F0E68C;    /* màu vàng nhạt */
}
table.adminlist tbody tr.handed td {
    background: #C8A2C8;    /* màu tím nhạt */
}
table.adminlist tbody tr.quoted td {
    /*background: #BDB76B;    !* màu kaki đậm *!*/
    background: #FFB6C1;    /* màu hồng nhạt */
}
table.adminlist tbody tr.priced td {
    background: #00FFFF;    /* màu xanh nước biển */
}
table.adminlist tbody tr.coded td {
    background: #87CEEB;    /* màu xanh da trời */
}
table.adminlist tbody tr.requested td {
    background: #00FA9A;    /* màu xanh lục nhạt */
    /*background: #40E0D0;    !* màu xanh ngọc *!*/
}
table.adminlist tbody tr.printed td {
    background: #cc3300;
    color: #FFFFFF;
}
table.adminlist tbody tr.expire td,
table.adminlist tbody tr.processing td {
    background: #cc2200;
    color: #FFFFFF;
    /*color: navy;*/
}
table.adminlist tbody tr.holding td {
    background: #800080;
    color: #FFFFFF;
}
table.adminlist tbody tr.instock td,
table.adminlist tbody tr.interviewed td {
    background: #009600;
    color: #FFFFFF;
    /*color: navy;*/
}
table.adminlist tbody tr.instock_urgent td {
    color: #FFFFFF;
    font-weight: 900;
}
table.adminlist tbody tr.printed td a,
table.adminlist tbody tr.cancel td a,
table.adminlist tbody tr.canceling td a,
table.adminlist tbody tr.expire td a,
table.adminlist tbody tr.processing td a,
table.adminlist tbody tr.holding td a,
table.adminlist tbody tr.instock td a,
table.adminlist tbody tr.interviewed td a,
table.adminlist tbody tr.block td a {
    color: #FFFFFF;
}
table.adminlist tbody tr.cancel td,
table.adminlist tbody tr.reject td,
table.adminlist tbody tr.reject_interview td,
table.adminlist tbody tr.deleted td{
    text-decoration: line-through;
}
table.adminlist tbody tr.delivered td {
    background: #009700;
    color: black;
}
table.adminlist tbody tr.delivered.delivered-scan-ok td {
    background: #87CEEB;
    color: black;
}
table.adminlist tbody tr.delivered.delivered-receipt-ok td {
    background: #C8A2C8;
    color: black;
}
table.adminlist tbody tr.delivered.delivered-receipt-error td {
    background: #F0E68C;
    color: black;
}
table.adminlist tbody tr.delivered.delivered-receipt-error:hover td, table.adminlist tbody tr.delivered.delivered-receipt-ok:hover td, table.adminlist tbody tr.delivered.delivered-scan-ok:hover td {
    background: #FFFFDD;
    color: #666666;
}
table.adminlist tbody tr.finished td,
table.adminlist tbody tr.complete td,
table.adminlist tbody tr.imsyes td,
table.adminlist tbody tr.paid td {
    background: green;
    color: black;
}
table.adminlist tbody tr.delivered td a,
table.adminlist tbody tr.finished td a,
table.adminlist tbody tr.complete td a,
table.adminlist tbody tr.imsyes td a,
table.adminlist tbody tr.paid td a {
    color: black;
}
table.adminlist tbody tr.normal td {

}
table.adminlist tbody tr.hide td {
    color: #FF0000;
}
table.adminlist tbody tr.miss td,
table.adminlist tbody tr.miss td a,
table.adminlist tbody tr.supperurgent td,
table.adminlist tbody tr.row-empty td,
table.adminlist tbody tr.row-empty td a,
table.adminlist tbody tr.expired td,
table.adminlist tbody tr.expired td a {
    color: #FF0000;
}
table.adminlist tbody tr.replaced td,
table.adminlist tbody tr.replaced td a{
    color: grey;
}
table.adminlist tbody tr.row-miss td,
table.adminlist tbody tr.row-miss td a {
    color: #f7971d;
}
table.adminlist tbody tr.missorder td,
table.adminlist tbody tr.missorder td a {
    color: #FF0000;
    font-weight: bold;
}
table.adminlist tbody tr.ontime td,
table.adminlist tbody tr.row-complete td {
    color: #008000;
}
table.adminlist tbody tr.urgent td,
table.adminlist tbody tr.hightlight td,
table.adminlist tbody tr.online td,
table.adminlist tbody tr.online td a {
    color: #0000FF;
}
table.adminlist tbody tr.offline td,
table.adminlist tbody tr.offline td a {
    /*    color: #0000FF;*/
}

table.adminlist tbody tr.approved-review td {
    background: yellowgreen;
}
table.adminlist tbody tr.reject-review td {
    background: none repeat scroll 0 0 #f7971d;
}
table.adminlist tbody tr td span.qty-available {
    font-size: 10px;
}
table.adminlist tbody tr td span.ref {
    display: none;
}
table.adminlist tr td.col_left {
    text-align: left;
}
table.adminlist tr td.col_center {
    text-align: center;
}
table.adminlist tr td.col_right {
    text-align: right;
}
table.adminlist tr td.pro-price {
    text-align: right;
    color: #ff0000;
}
table.adminlist tr td.pro-qty {
    text-align: right;
    color: #ff0000;
}
table.adminlist td {
    padding: 6px 4px;
}
table.adminlist tr td textarea {
    height: 30px;
}
table.adminlist tr td.col_image {
    width: 100px;
}
table.adminlist tr td.col-finished {
    background: green !important;
    color: black;
}
table.adminlist tr td.col-processing {
    background: red !important;
    color: white;
}
table.adminlist tr td.col-instock {
    background: #009600 !important;
    color: white;
}
table.adminlist tr td.col-approved {
    background: #d9d100 !important;
    color: black;
}
table.adminlist tr td.col-finished a {
    color: black;
}
table.adminlist tr td.col-processing a {
    color: white;
}
table.adminlist tr:hover td.col-processing,
table.adminlist tr:hover td.col-finished {
    background: #FFFFDD !important;
    color: #666666;
}
table.adminlist td.amount, table.adminlist td.subtotal {
    font-weight: bold;
}
table.adminlist td img.thumblist {
    width: 30px;
}
table.adminlist td input[type="text"], table.adminlist td input[type="number"], table.adminlist td input[type="email"], table.adminlist td input[type="tel"] {
    min-width: 25px;
    width: 90%;
}
table.adminlist td input.TextInputSmall {
    width: 50%;
}
table.adminlist td input.TinyText {
    width: 50%;
}
table.adminlist td select {
    width: 100%;
}
table.adminlist td .current-price {
    text-decoration: line-through
}
table.adminlist tr.rowhide, table.adminlist tr.add-item td {
    display: none
}
table.adminlist tfoot tr td {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.07);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    height: 25px;
}
table.adminlist tfoot tr td#subtotal_billing, table.adminlist tfoot tr td#subtotal_real, table.adminlist tfoot tr td#subtotal_invoice {
    font-size: 120%;
    font-weight: bold
}
table.adminlist tfoot tr td#total_payment_billing, table.adminlist tfoot tr td#total_payment_real {
    font-size: 130%;
    font-weight: bold;
    color: #FF0000;
}
table.product-list .procat {
    position: relative;
}
table.product-list .popcat {
    top: 20px;
    position: absolute;
    z-index: 10;
    display: block;
}
table.product-list ul {
    background: #ffffff;
    list-style: none;
    width: 250px;
    text-align: left;
}
table.product-list li {
    padding: 5px 0;
    cursor: default;
}
table.product-list li:hover {
    background: #3399ff;
    color: #ffffff;
}
table.sub-table {
    border: none;
}
table.sub-table tr td {
    border-style: none !important;
    border-width: 0;
}
.headertext, .headertext:link, .headertext:hover, .headertext:visited {
    font-weight: bold;
}
.ordered-bound {
    position: relative;
}
.ordered-bound .ordered-list {
    top: 20px;
    box-shadow: 3px 3px 5px #888888;
    left: 269px;
    position: absolute;
    border: 1px solid #CCC;
    cursor: move;
}
.ordered-bound .ordered-list .close {
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 22px;
    height: 16px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 16px;
}
.ordered-bound .ordered-list .close a {
    display: block;
    text-decoration: none;
    line-height: 16px;
}
.ordered-bound .ordered-list .close a img {
    display: block;
    width: 16px;
    height: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-16 {
    font-size: 16px;
}

.stockout-content {
    display: block;
    padding: 10px 0;
}
.txtDateTime, .local-supplier {
    display: block;
    padding-top: 5px;
}
.report-content {
    line-height: 20px;
}
.survey-content {
    line-height: 25px;
    font-size: 15px;
    padding-bottom: 10px !important;
}
/*---- End content list -----*/

/*--- Form Element style ---*/
input[type="submit"] {
    cursor: pointer;
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
}
input:not([type]), input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"] {
    border: 1px solid #C0C0C0;
    color: #333333;
    font-size: 11px;
    padding: 4px 3px;
    border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: #15803d; /* medium green */
}

input[type="Checkbox"], input[type="radio"] {
    margin-left: 5px;
    margin-right: 5px;
}
.FormButton, input[type="submit"], input[type="button"], input[type="reset"], button {
    background: url("../layout/button-background-gray.gif") repeat-x scroll 0 0 #E3E3E3;
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    color: #333333;
    font-family: helvetica;
    font-size: 12px;
    line-height: 16px;
    padding: 3px 5px;
    margin-right: 2px;
}
.FormButton:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, button:disabled {
    color: #AAAAAA;
    cursor: not-allowed;
}
textarea {
    border: 1px solid #C0C0C0;
    padding: 4px;
    resize: none;
    font-family: inherit;
    font-size: inherit;
    border-radius: 4px;
}

select {
    border: 1px solid #C0C0C0;
    font-family: 'Be Vietnam Pro';
    font-size: 11px;
    padding: 2px;
    border-radius: 4px;
}
select.cbStatYear {
    position: absolute;
    top: 5px;
    right: 35px;
}
textarea#introtext {
    width: 50%;
    height: 150px;
    padding: 5px;
}
.TextInput {
    width: 250px;
}
.SelectInput {
    width: 356px;
}
.dateTime {
    width: 68px;
}
input.highlight, select.highlight, textarea.highlight {
    border-color: #ef0fff;
}
/*--- End Form Element style ---*/

#footer {
    text-align: right;
    padding: 0;
    color: #666666;
    clear:both;
}

/*------- JQuery-UI Edit -----------*/
.ui-widget{
    font-family: Be Vietnam Pro,Verdana,Arial,sans-serif;
    font-size:1em
}
#ui-datepicker-div {
    border: 1px solid #ddd;
}
.ui-datepicker select.ui-datepicker-month {
    margin-right: 2px;
}
.ui-datepicker-today a {
    border: 1px solid #008b00!important;
    background: #bdffbd !important;
}
.ui-datepicker td span, .ui-datepicker td a {
    text-align: center;
    border-radius: 4px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #F0F3F0
}
#tabs.ui-tabs .ui-tabs-nav li {
    border-bottom: 1px solid #d3d3d3;
}
.ui-state-highlight{
    background: #fcefa1 !important;
}
.ui-state-active {
    border: 1px solid #993300 !important;
}
.ui-widget-header {
    background: none;
    border-color: #DDDDDD;
    border-width:0 0 1px 0;
    border-radius: 0
}
.ui-dialog  {
    box-shadow: 3px 3px 5px #888888;
}
.ui-autocomplete {
    z-index: 1004;
}

.ui-widget-content {
    border: none;
}

.ui-dialog {
    border: 1px solid #CCC;
    z-index: 1003 !important;
}
/*------- End JQuery-UI Edit --------*/

/*------- Admin home --------*/
.home-admin-wrapper {
    border: 5px solid #ECECEC;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 15px;
}
.home-admin-container {
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    padding: 15px 13px;
    position: relative;
    overflow: hidden
}
.home-admin-container h2 {
    font-size: 20px;
    padding-bottom: 20px;
    color: #AD180E;
}
.quick-menu .quick-button {
    border: 1px solid #CCCCCC;
    border-radius: 3px;
}
table.home-admin-toolbar {
    margin: 0 auto
}
table.home-admin-toolbar a, table.home-admin-toolbar a:visited {
    color: #333333;
    font-weight: bold
}
table.home-admin-toolbar a:hover {
    color: #993300;
    text-decoration: none
}
table.home-admin-toolbar span {
    width: 48px;
    height: 48px;
    display: block;
    background-size: contain;
}

.home-admin-container .content-counter {
    color: #0B55C4
}
.home-admin-container .content-counter span {
    padding: 1px 5px;
    color: #FFF;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 3px;
}
.home-admin-container .content-counter a {
    color: #333333;
}
/*------- End Admin home --------*/

/*------- Change password --------*/
.change-pass-success {
    color: red;
    font-size: 30px;
    padding: 20px;
    text-align: center;
}
.change-pass-redirect {
    font-size: 16px;
    padding-bottom: 20px;
    text-align: center;
}
/*------- End change password --------*/
/*------- Reset Password --------*/
.reset-wrapper {
    display: block;
    font-size: 1.2em;
    padding: 0.5em;
}
.reset-content {
    border: #DDDDDD solid 1px;
    background-color: #FFFFFF;
    border-radius: 3px;
    margin: 30px auto;
}
.reset-content .reset-title {
    font-size: 1.5em;
}
.reset-content p {
    line-height: 1.4em;
}
.reset-content .reset-button {
    padding-top: 1.5em;
    text-align: center
}
.reset-content .reset-button input {
    margin-right: 1.5em;
}
/*------- End Reset password --------*/

/*------- Customer's Products --------*/
.search-customer {
    text-align: center;
    display: block;
    padding: 10px;
    font-size: 16px;
    /*font-weight: bold*/
}
.search-customer input {
    font-size: 16px;
    width: 60%;
}
/*------- End Customer's Products --------*/
/*------- Sales Amount --------*/
.sub-total {
    font-weight: bold;
}
.redcolor {
    color: #FF0000;
}
table.adminlist tr.company-info td {
    font-weight: bold;
    background-color: #B7B7B7;
}
/*------- End Sales Amount --------*/
/*------- Sales Target --------*/
table.sales-target {
    width: 2000px;
}
table.sales-target th.stc1 {
    width: 100px;
}
table.sales-target th.stc2,
table.sales-target th.stc3,
table.sales-target th.stc14,
table.sales-target th.stc15,
table.sales-target th.stc17 {
    width: 80px;
}
table.sales-target th.stc4,
table.sales-target th.stc5,
table.sales-target th.stc7,
table.sales-target th.stc9,
table.sales-target th.stc10 {
    width: 50px;
}
table.sales-target th.stc6,
table.sales-target th.stc8,
table.sales-target th.stc11,
table.sales-target th.stc12 {
    width: 160px;
}
table.sales-target th.stc13,
table.sales-target th.stc16,
table.sales-target th.stc18,
table.sales-target th.stc19,
table.sales-target th.stc20,
table.sales-target th.stc21,
table.sales-target th.stc22,
table.sales-target th.stc23 {
    width: 45px;
}
.cus-list .cusname {
    position: relative;
}
.cus-list a.rmc:before {
    animation: circle 1.3s ease-out infinite;
    background: rgba(247,151,29,0.5);
    border: 1px solid #f7971d;
    border-radius: 50%;
    content: "x";
    font-size: 10px;
    height: 10px;
    line-height: 7px;
    position: absolute;
    text-align: center;
    bottom: 0px;
    width: 10px;
}
.cus-list a.rmc {
    transition: all 0.8s ease 0s;
    display: inline-block;
    background: #f7971d;
    border-radius: 50%;
    z-index: 10;
    margin-left: 4px;
    color: #333333;
}
.cus-list a.nm {
    /*display: inline-block;*/
    display: none;
}

/*------- End Sales Target --------*/
/*------- Customer product --------*/
.update-price {
    padding: 20px;
    font-size: 12px;
    display: none;
}
.update-price img {
    width: 100px;
    height: 100px;
}
table.statistic {
}
table.statistic td {
    padding: 3px;
    font-size: 12px;
}
/*------- End Customer product --------*/

/*------- Error --------*/
.error-box {
    padding: 10px;
    color: #ff0000;
}
.error-box ul li {
    list-style: disc inside;
    padding: 2px 0;
}
.error-box ul li, .error-box ul li a {
    color: #FF0000;
}
.error {
    background: #e5a1a1 !important;
    border: 1px solid #ff0000 !important;
}
.error-body {
    padding: 30px;
    font-size: 16px;
}
.error-body .main-title {
    font-weight: normal;
    font-size: 2.5em;
    font-weight: 300;
}
.error-body p {
    padding: 30px 0;
}
.error-body ul li {
    list-style: circle;
    margin: 0 0 1em 1em;
    padding: 0 0 0 0.5em;
}
/*------- End Error --------*/


/*--------- Paging --------*/
div#paging {
    display: flex;
    align-items: center;
    gap: 5px;
}
div#paging span.paging-name {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
}
div#paging span {
    border: 1px solid #a52a31;
    color: #000000;
    padding: 3px 7px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 4px;
}
div#paging a, div#paging a:visited {
    background: none repeat scroll 0 0 #E5ECF4;
    border: 1px solid #bbbbbb;
    color: #333333;
    font-weight: 700;
    padding: 3px 6px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 4px;
}
div#paging a:hover {
    border: 1px solid #a52a31;
    color: #a52a31;
    text-decoration: none;
}
div#paging a.prev-page, div#paging a.next-page {
    margin: 0;
    padding: 0;
}
div#paging a.prev-page img, div#paging a.next-page img {
    width: 24px;
    height: 21px;
    background-image: url('images/arrow.png');
    vertical-align: middle;
}
div#paging a.prev-page img {
    background-position: 0 0;
}
div#paging a.next-page img {
    background-position: 24px 0px;
}
div#paging a.prev-page:hover img, div#paging a.prev-page img:hover {
    background-position: 0 21px;
}
div#paging a.next-page:hover img, div#paging a.next-page img:hover {
    background-position: 24px 21px;
}

/*---------- End paging ---------*/
.hideitem {
    display: none !important;
}
.fl {
    float: left !important;
}
.fr {
    float: right !important;
}
.clf {
    clear: both !important;
}
.clfl {
    clear: left !important;
}
.clfr {
    clear: right !important;
}

/*---------- Download File ---------*/
#loadingWrap.show {
    display: block !important;
}
#loadingWrap{
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    text-align: center;
    z-index: 2000;
}
#loadingIcon {
    display: inline-block;
    position: absolute;
    top: 45%;
}
.position-relative {
    position: relative !important
}
.position-absolute {
    position: absolute !important
}
.notification {
    color: #387A3A;
}
.notification i.fa.fa-bell{
    font-size: 17px;
}
.ring-bell {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }
    1% {
        -webkit-transform: rotateZ(30deg);
    }
    3% {
        -webkit-transform: rotateZ(-28deg);
    }
    5% {
        -webkit-transform: rotateZ(34deg);
    }
    7% {
        -webkit-transform: rotateZ(-32deg);
    }
    9% {
        -webkit-transform: rotateZ(30deg);
    }
    11% {
        -webkit-transform: rotateZ(-28deg);
    }
    13% {
        -webkit-transform: rotateZ(26deg);
    }
    15% {
        -webkit-transform: rotateZ(-24deg);
    }
    17% {
        -webkit-transform: rotateZ(22deg);
    }
    19% {
        -webkit-transform: rotateZ(-20deg);
    }
    21% {
        -webkit-transform: rotateZ(18deg);
    }
    23% {
        -webkit-transform: rotateZ(-16deg);
    }
    25% {
        -webkit-transform: rotateZ(14deg);
    }
    27% {
        -webkit-transform: rotateZ(-12deg);
    }
    29% {
        -webkit-transform: rotateZ(10deg);
    }
    31% {
        -webkit-transform: rotateZ(-8deg);
    }
    33% {
        -webkit-transform: rotateZ(6deg);
    }
    35% {
        -webkit-transform: rotateZ(-4deg);
    }
    37% {
        -webkit-transform: rotateZ(2deg);
    }
    39% {
        -webkit-transform: rotateZ(-1deg);
    }
    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }
    100% {
        -webkit-transform: rotateZ(0);
    }
}
@-moz-keyframes ring {
    0% {
        -moz-transform: rotate(0);
    }
    1% {
        -moz-transform: rotate(30deg);
    }
    3% {
        -moz-transform: rotate(-28deg);
    }
    5% {
        -moz-transform: rotate(34deg);
    }
    7% {
        -moz-transform: rotate(-32deg);
    }
    9% {
        -moz-transform: rotate(30deg);
    }
    11% {
        -moz-transform: rotate(-28deg);
    }
    13% {
        -moz-transform: rotate(26deg);
    }
    15% {
        -moz-transform: rotate(-24deg);
    }
    17% {
        -moz-transform: rotate(22deg);
    }
    19% {
        -moz-transform: rotate(-20deg);
    }
    21% {
        -moz-transform: rotate(18deg);
    }
    23% {
        -moz-transform: rotate(-16deg);
    }
    25% {
        -moz-transform: rotate(14deg);
    }
    27% {
        -moz-transform: rotate(-12deg);
    }
    29% {
        -moz-transform: rotate(10deg);
    }
    31% {
        -moz-transform: rotate(-8deg);
    }
    33% {
        -moz-transform: rotate(6deg);
    }
    35% {
        -moz-transform: rotate(-4deg);
    }
    37% {
        -moz-transform: rotate(2deg);
    }
    39% {
        -moz-transform: rotate(-1deg);
    }
    41% {
        -moz-transform: rotate(1deg);
    }

    43% {
        -moz-transform: rotate(0);
    }
    100% {
        -moz-transform: rotate(0);
    }
}
@keyframes ring {
    0% {
        transform: rotate(0);
    }
    1% {
        transform: rotate(30deg);
    }
    3% {
        transform: rotate(-28deg);
    }
    5% {
        transform: rotate(34deg);
    }
    7% {
        transform: rotate(-32deg);
    }
    9% {
        transform: rotate(30deg);
    }
    11% {
        transform: rotate(-28deg);
    }
    13% {
        transform: rotate(26deg);
    }
    15% {
        transform: rotate(-24deg);
    }
    17% {
        transform: rotate(22deg);
    }
    19% {
        transform: rotate(-20deg);
    }
    21% {
        transform: rotate(18deg);
    }
    23% {
        transform: rotate(-16deg);
    }
    25% {
        transform: rotate(14deg);
    }
    27% {
        transform: rotate(-12deg);
    }
    29% {
        transform: rotate(10deg);
    }
    31% {
        transform: rotate(-8deg);
    }
    33% {
        transform: rotate(6deg);
    }
    35% {
        transform: rotate(-4deg);
    }
    37% {
        transform: rotate(2deg);
    }
    39% {
        transform: rotate(-1deg);
    }
    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(0);
    }
}
.num-feedback {
    top: -13px;
    left: 9px;
    z-index: 1;
}
.num-notice {
    color: white !important;
    background: #930;
    padding: 1px 3px;
    border-radius: 5px;
    display: inline-flex; /* Giữ vị trí nguyên vẹn khi có <sup> */
}
.d-inline-block {
    display: inline-block;
}
.border {
    border: 1px solid #CCCCCC;
}
a.btn {
    border: 1px solid;
    padding: 4px;
    background: #0f75bc;
    color: #fff !important;
    white-space: nowrap;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin: 1px;
}
table.adminlist tbody tr:hover td a.btn {
    color: black !important;
}
a.btn-primary, .btn-primary {
    background: #0f75bc;
    color: #fff;
}
a.btn-secondary, .btn-secondary {
    background: #006666;
    color: #fff;
}
a.btn-green, .btn-green {
    background: #009600;
    color: #fff;
}
a.btn-grey, .btn-grey {
    background: #808080;
    color: #fff;
}
a.btn-red, .btn-red {
    background: #cc2200;
    color: #fff;
}   
a.btn-purple, .btn-purple {
    background: #800080;
    color: #fff;
}
.select_file{
    border: 1px solid #ccc;
    background: #ddd;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    color: #333;
    margin: 5px 2px;
    display: inline-block;
}
.select_file_2{
    border: 1px solid #ccc;
    background: #ddd;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    color: #333;
    margin: 5px 2px;
    display: inline-block;
}
.select_file_2::before {
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    content:"\f0ee";
    margin-right: 3px;
}
.select_file::before {
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    content:"\f0ee";
    margin-right: 3px;
}
.text-left {
    text-align: left!important;
}
.text-right {
    text-align: right!important;
}
.text-center {
    text-align: center!important;
}
.text-justify {
    text-align: justify!important;
}
.text-nowrap {
    white-space: nowrap!important;
}
.small {
    font-size: 0.9em!important;
}
.font-weight-normal {
    font-weight: normal!important;
}
.font-weight-bold {
    font-weight: bold!important;
}
.text-white {
    color: white!important;
}
.text-red {
    color: #cc2200!important;
}
.text-green {
    color: green!important;
}
.text-green-light {
    color: lightgreen!important;
}
.text-yellow {
    color: yellow!important;
}
.text-blue {
    color: #005FA3!important;
}
.text-gray {
    color: #808080!important;
}
.text-lightgray {
    color: #d3d3d3!important;
}
.d-none {
    display: none !important;
}
.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.text-decoration-none {
    text-decoration: none !important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.text-lowercase {
    text-transform: lowercase!important;
}
.text-uccase::first-letter {
    text-transform: uppercase;
}
.text-uccase {
    text-transform: lowercase;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.bg-none {
    background: transparent;
}
.border-none {
    border: none;
}
.shadow-none {
    box-shadow: none;
}
#popup-birthday {
    padding: 0;
    overflow: hidden;
}
#img-birthday-cake {
    position: relative;
    /* Thiết kế gốc 600px: mọi kích thước avatar/tên tính theo cqw để co giãn theo bề rộng khung (mobile) */
    container-type: inline-size;
}
#avartar-wrap {
    top: 0;
    right: 0;
    width: 100%;
    text-align: center;
    position: absolute;
}
#avartar-wrap img {
    /* z-index:-1: avatar nằm dưới khung ảnh, lộ ra qua lỗ trong suốt đã đục sẵn trên ảnh khung */
    box-sizing: border-box;
    float: right;
    z-index: -1;
    position: inherit;
    top: 8.333cqw;
    right: 8.5cqw;
    width: 33.833cqw;
    height: 45.667cqw;
    object-fit: cover;
}
img.avartar-circle {
    border-radius: 50%;
    border: 2px solid red;
}
/* Pháo hoa + badge sinh nhật (playBirthdayCelebration ở index_v2.php); z-index trên cả SweetAlert2 */
.bday-fx-dim {
    /* Nền tối mờ để hạt cộng màu (lighter) nổi bật — trên nền trắng sẽ bị bợt màu như confetti */
    position: fixed; inset: 0; z-index: 99996; pointer-events: none;
    background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(8,15,12,.5), rgba(8,15,12,.16) 55%, transparent 78%);
    opacity: 0; transition: opacity .7s ease;
}
.bday-fx-dim.show { opacity: 1; }
.bday-fx-canvas {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    z-index: 99998; pointer-events: none;
}
/* Lớp glow: blur bằng CSS (GPU) — thay ctx.shadowBlur per-particle cũ (nguyên nhân giật lag) */
.bday-fx-canvas-glow { z-index: 99997; filter: blur(7px); opacity: .95; }
.bday-fx-badge {
    position: fixed; left: 50%; bottom: -160px; z-index: 99999; pointer-events: none;
    opacity: 0; transform: translateX(-50%) scale(.85);
    transition: bottom 1.1s cubic-bezier(.17,.89,.32,1.49), opacity .4s ease, transform 1.1s cubic-bezier(.17,.89,.32,1.49);
}
.bday-fx-badge.show { bottom: 40px; opacity: 1; transform: translateX(-50%) scale(1); }
/* opacity:linear (mờ đều) + bottom:ease-out (bay chậm dần) — tránh cảm giác "đứng yên rồi mới mờ vụt" của ease-in cũ */
.bday-fx-badge.leave {
    bottom: 68vh; opacity: 0; transform: translateX(-50%) scale(.95);
    transition: bottom 1.7s ease-out, opacity 1.7s linear, transform 1.7s ease-out;
}
/* Tông trắng/xanh lá primary hệ thống — bỏ gradient đỏ-vàng động cũ (bị chê màu mè) */
.bday-fx-badge-inner {
    display: flex; align-items: center; gap: 12px;
    background: var(--wh); border: 1px solid var(--gr2);
    border-radius: 999px; padding: 9px 24px 9px 9px;
    box-shadow: var(--sh-lg);
    position: relative; overflow: hidden;
}
.bday-fx-badge-inner::after {
    /* Ánh sáng lướt qua card 1 lần lúc xuất hiện — hiệu ứng "reveal", không lặp lại nên không rối mắt */
    content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.65), transparent);
    transform: skewX(-18deg);
    animation: bdayFxShine 1.3s ease-out .35s 1;
}
@keyframes bdayFxShine { from { left: -60%; } to { left: 130%; } }
.bday-fx-badge-emoji {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; position: relative;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
    background: linear-gradient(135deg, var(--g-lt), var(--g-mn));
    box-shadow: 0 3px 8px rgba(35,122,62,.35);
}
.bday-fx-badge-emoji::before {
    /* Quầng sáng lặp lại quanh icon — điểm nhấn "đang diễn ra", màu xanh lá primary nên không lệch tông */
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1.5px solid rgba(35,122,62,.45);
    animation: bdayFxHalo 1.8s ease-out infinite;
}
@keyframes bdayFxHalo { from { transform: scale(.8); opacity: .8; } to { transform: scale(1.55); opacity: 0; } }
.bday-fx-badge-text { font-size: 13px; font-weight: 600; color: var(--t2); line-height: 1.35; }
.bday-fx-badge-text b { display: block; font-size: 14.5px; font-weight: 700; color: var(--g-mn); }

.hb-swal-popup.swal2-popup {
    background: #fff !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.15) !important;
    padding: 6px !important;
}
.hb-swal-popup .swal2-html-container {
    margin: 0 !important;
    border-radius: 13px; /* nhỏ hơn bo ngoài 5px để 2 lớp bo đồng tâm */
    overflow: hidden;
}
.hb-swal-close.swal2-close {
    position: absolute !important; top: 10px !important; right: 10px !important;
    width: 32px !important; height: 32px !important; margin: 0 !important;
    background: rgba(255,255,255,.92) !important; border-radius: 50% !important;
    color: #444 !important; font-size: 20px !important; box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: transform .15s ease, background .15s ease;
}
.hb-swal-close.swal2-close:hover { background: #fff !important; color: #111 !important; transform: scale(1.08); }
/* Tên ngay dưới avatar (top 332px = 50+274+8); #img-birthday-cake có padding-bottom chừa chỗ tên 2 dòng */
.hb-name-row {
    position: absolute;
    top: 55.333cqw;
    right: 8.5cqw;
    width: 33.833cqw;
    text-align: center;
}
/* Nhãn nền trắng để tên đọc được trên mọi tông màu ảnh khung */
.hb-name-tag {
    display: inline-block;
    background: rgba(255,255,255,.94); color: #9a3412;
    font-weight: 700; font-size: clamp(9px, 2cqw, 12px);
    padding: 1cqw 3cqw; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    text-wrap: nowrap;
    margin-top: 7px;
}
.list-scroll {
    max-height: 75px;
    overflow-y: scroll;
}
.txt-name {
    position: inherit;
    top: 344px;
    left: 50%;
}
.txt-name p {
    font-family: inherit;
    font-size: 1.2em;
}
.px-0, .pl-0 {
    padding-left: 0!important;
}
.px-0, .pr-0 {
    padding-right: 0!important;
}
.py-0, .pt-0 {
    padding-top: 0!important;
}
.py-0, .pb-0 {
    padding-bottom: 0!important;
}
.pb-1, .py-1, .p-1 {
    padding-bottom: 0.25rem!important;
}
.pt-1, .py-1, .p-1 {
    padding-top: 0.25rem!important;
}
.pl-1, .px-1, .p-1 {
    padding-left: 0.25rem!important;
}
.pr-1, .px-1, .p-1 {
    padding-right: 0.25rem!important;
}
.pb-2, .py-2, .p-2 {
    padding-bottom: 0.5rem!important;
}
.pt-2, .py-2, .p-2 {
    padding-top: 0.5rem!important;
}
.pl-2, .px-2, .p-2 {
    padding-left: 0.5rem!important;
}
.pr-2, .px-2, .p-2 {
    padding-right: 0.5rem!important;
}
.pb-3, .py-3, .p-3 {
    padding-bottom: 1rem!important;
}
.pt-3, .py-3, .p-3 {
    padding-top: 1rem!important;
}
.pl-3, .px-3, .p-3 {
    padding-left: 1rem!important;
}
.pr-3, .px-3, .p-3 {
    padding-right: 1rem!important;
}
.ui-autocomplete-loading {
    background: white url("../images/images/ui-anim_basic_16x16.gif") left center no-repeat;
}

@font-face{
    font-family:'UTM_Aristote';
    src:url('../fonts/UTM Aristote Regular.eot');
    src:url('../fonts/UTM Aristote Regular.eot') format('embedded-opentype'),url('../fonts/UTM Aristote Regular.woff2') format('woff2'),url('../fonts/UTM Aristote Regular.woff') format('woff'),url('../fonts/UTM Aristote Regular.ttf') format('truetype'),url('../fonts/UTM Aristote Regular.svg#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
}
.font-utm-aristote {
    font-family: 'UTM_Aristote'!important;
    font-size: 18px!important;
}
#reward-wrap {
    top: 50%;
    bottom: 24%;
    right: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    overflow: hidden;
}

#reward-wrap .reward-content .txt-content {
    width: 60%;
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
}
#reward-wrap .department{
    font-size: 13px;
}
#img-reward .number-reward {
    bottom: 7%;
    position: absolute;
    left: 30%;
    font-size: 10px;
}
#owl-side-reward .owl-stage-outer{
    align-items: center;
    display: inline-flex;
}
#owl-side-reward .owl-stage-outer a:hover {
    text-decoration: none;
}
#owl-side-reward .owl-stage {
    display: flex;
}
.txt-place{
    bottom: 20%;
    position: absolute;
    right: 22%;
    font-size: 12px;
}
.vat_processing {
    background-color: #cc2200!important;
}
.vat_instock {
    background-color: #009600!important;
}
.vat_approved {
    background: #d9d100!important;
}
.vat_finished {
    background: green!important;
}
.vat_request, .vat_reject {
    background-color: yellowgreen!important;
}
.bg-red {
    background-color: #AD180E;
}
.bg-green {
    background-color: #387A3A;
}
.border-4x-red {
    border: 4px solid #AD180E!important;
}
.border-4x-green {
    border: 4px solid #387A3A!important;
}

.column-controls {
     display: grid;
     grid-template-columns: repeat(6, 1fr); /* Six columns */
     gap: 15px; /* Space between items */
     padding: 20px;
     background-color: #f9f9f9;
     border: 1px solid #ccc;
     border-radius: 8px;
     margin-bottom: 1rem;
 }

.column-controls label {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.column-controls label:hover {
    background-color: #f0f0f0;
}

.column-controls input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Make checkboxes slightly larger */
}

.column-controls label[data-parent="true"] {
    font-weight: bold;
    color: #007bff;
}

.line-clamp-toggle, .line-clamp-toggle2 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.line-clamp-toggle.show, .line-clamp-toggle2.show{
    display: block;
}

#box-reward .owl-item img {
    width: 75px!important;
    height: 100px;
    object-fit: contain;
    margin: 5px auto;
    border-radius: 4px;
    overflow: hidden;
}
select.form-control {
    padding: 4.5px 4px!important;
}
input.form-control {
    line-height: 1.93;
    border-radius: .25rem;
    padding: 2px 4px!important;
}
textarea.form-control {
    border-radius: .25rem;
    padding: 2px 4px!important;
    height: auto!important;
    resize: auto;
}

.wrap-log-error-form input, 
.wrap-log-error-form select,
.wrap-log-error-form .select2,
.wrap-log-error-form textarea {
    margin: 5px 0 10px 0;
}
/* best price  */
input[type="radio"][name="data[best_price_type]"] {
    display: none;
}

label[for="best_price_type"],
label[for="best_price_type1"] {
    display: inline-block;
    padding: 8px 16px;
    margin-right: 5px;
    border: 1px solid #387A3A;
    border-radius: 4px;
    background-color: #fff;
    color: #387A3A;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

input[type="radio"][id="best_price_type"]:checked + label[for="best_price_type"],
input[type="radio"][id="best_price_type1"]:checked + label[for="best_price_type1"] {
    background-color: #387A3A;
    color: white;
}
/* end best price */

.fast-spin {
    animation: fa-spin 0.8s infinite linear;
    -webkit-animation: fa-spin 0.8s infinite linear;
}

/* ============================================================
   V2 TOPBAR (banneradmin/index_v2.php)
============================================================ */
#header-content .classFillAvailable { width:-moz-available; width:-webkit-fill-available; width:fill-available; }
#header-content #qr-code-full-region video { height:100%; width:100% !important; }
#header-content #result-panel-container { font-size:10pt; height:100%; flex-direction:column; margin:0; display:flex; justify-content:space-between; font-weight:400; background:white; text-align:center; overflow-x:hidden; overflow-y:scroll; }
#header-content .badge { display:inline-block; color:#f4f4f4; border-radius:5px; overflow:hidden; border:1px solid silver; }
#header-content .badge-icon { background:silver; max-width:calc(150px / 4); color:black; }
#header-content .badge-text { color:#1d1f20; background-color:#f4f4f4; }
#header-content .badge-icon,#header-content .badge-text { padding:5px; float:left; flex:1; text-align:left; font:normal small-caps normal 10px/1.5 Arial,Helvetica,sans-serif; text-transform:uppercase; }
#header-content div#scan-result-parsed { margin-top:1rem; background:#dadada54; color:black; border:1px solid #b3b3b333; padding:5px; font-family:consolas; word-break:break-word; margin-bottom:10px; max-height:200px; overflow:auto; }
#header-content .mobile-popup-banner .footer { width:100%; text-align:center; padding:20px 0; margin-top:20px; border-top:silver solid 1px; }
#header-content #scan-quick-action { margin:10px; width:calc(100% - 40px); background:#DBF0FF; border-radius:12px; border:1px solid #476E8B; text-align:left; padding:10px; cursor:pointer; margin-bottom:20px; margin-top:5px; display:none; }
#header-content div#scan-quick-action-header { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; line-height:1.2rem; max-height:2.4rem; }

/* ── TOPBAR V2 (MATCHING V3) ── */
#header-content .tb {
    height:52px; display:flex; align-items:center; padding:0 18px; background:var(--wh);
    border-bottom:1px solid var(--gr2); gap:14px; position:sticky; top:0; z-index:1000;
}
#header-content .logo-block { display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none!important; }
#header-content .logo-mark {
    width:36px; height:36px; border-radius:50%;
    background:linear-gradient(135deg,var(--g-mn),var(--g-dk));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:12px; font-weight:700;
}
#header-content .logo-name-v2 { font-size:13px; font-weight:700; color:var(--g-dk); line-height:1.2; }
#header-content .logo-name-v2 small { font-size:10px; font-weight:400; color:var(--t3); display:block;  max-width: 187px; }

#header-content .kpi-row { display:flex; gap:4px; align-items:center; border-left:1px solid var(--gr2); padding-left:8px; flex:0 1 auto; flex-wrap:nowrap; }
#header-content .kpi-p {
    display:flex; align-items:center; gap:8px; background:var(--gr1); border:1px solid var(--gr2);
    border-radius:20px; padding:3px 12px 3px 8px; cursor:default; transition:all .2s; flex-shrink:0; white-space:nowrap;
}
#header-content .kpi-p:hover { background:var(--wh); box-shadow:0 2px 6px rgba(0,0,0,0.05); }
#header-content .kpi-p .dot { width:6px; height:6px; border-radius:50%; background:var(--red); }
#header-content .kpi-p .lbl { font-size:10px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:0.3px; }
#header-content .kpi-p .val { font-size:11.5px; font-weight:700; color:var(--t1); }
#header-content .kpi-p.ok .dot { background:var(--g-mn); }
#header-content .kpi-p.wa .dot { background:var(--amb); }

#header-content .h-social { display:flex; align-items:center; gap:10px; min-width:0; margin-left:auto; }

#header-content .h-members {
    display:flex; align-items:center; gap:8px; height:34px;
    width:auto; max-width:504px; overflow:hidden; position:relative;
    mask-image: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
    margin-left: 8px;
}
#header-content .hm-track {
    display:flex; align-items:center; gap:8px; position:relative;
    height:100%; width: max-content;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#header-content .hm-track:hover { animation-play-state: paused !important; }

@keyframes marquee-v2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
#header-content .hm-capsule-v2 {
    display:flex; align-items:center; gap:8px; background:var(--wh); border:1px solid var(--gr2);
    border-radius:20px; padding:4px 12px 4px 3px; min-width:160px; height:34px; flex-shrink:0;
    box-shadow:0 1px 2px rgba(0,0,0,0.05); cursor:pointer;
}
#header-content .hm-av {
    width:30px; height:30px; border-radius:50%; background:var(--g-mn);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; flex-shrink:0;
}
#header-content .hm-av img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
#header-content .hm-info { line-height:1.2; padding-top:1px; }
#header-content .hm-name { font-size:11.5px; font-weight:700; color:var(--t1); white-space:nowrap; }
#header-content .hm-text { font-size:9.5px; color:var(--t2); white-space:nowrap; opacity:0.8; }

#header-content .tr-v2 { display:flex; align-items:center; gap:9px; padding-left:14px; border-left: 1px solid var(--gr2); }
#header-content .ibtn-wrap { position:relative; }
#header-content .ibtn {
    width:32px; height:32px; border-radius:50%; background:var(--gr1); border:1px solid var(--gr2);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--t2);
    cursor:pointer; position:relative; text-decoration:none!important; transition:all 0.2s;
}
#header-content .ibtn:hover { background:var(--gr2); transform:scale(1.05); }
/* Icon sinh nhật: dùng chung style .ibtn/.ibtn-wrap với chuông/loa thông báo */
#header-content .hb-trigger { background:#fff5f5; border-color:#fed7d7; }
#header-content .hb-trigger:hover { background:#fed7d7; }
#header-content .hb-trigger .hb-emoji { font-size:13px; line-height:1; } /* thu nhỏ để emoji không đè lên huy hiệu số */
#header-content #num_birthday {
    /* nhỏ và lệch góc hơn .bdot mặc định vì pill chật hơn icon tròn 32px */
    top:-7px; right:-9px; min-width:14px; height:14px; font-size:8.5px; padding:0 3px;
}
/* Pill hiện tên sinh nhật hôm nay; .hb-pill-wrap không set display:flex vì làm lệch translateY của ticker */
#header-content .hb-pill {
    display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; max-width:260px;
    background:#fff5f5; border:1px solid #fed7d7; border-radius:18px; flex-shrink:0;
}
/* overflow:hidden chỉ đặt ở .hb-pill-wrap; đặt ở .hb-pill sẽ cắt mất huy hiệu số tràn ra ngoài viền */
#header-content .hb-emoji-btn {
    /* box cố định để huy hiệu số nằm đúng góc, không đè lên emoji */
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; font-size:14px; line-height:1;
    flex-shrink:0; cursor:pointer; color:inherit; text-decoration:none!important;
    border-radius: 12px;
}
#header-content .hb-emoji-btn:hover { transform:scale(1.15); }
#header-content .hb-pill-item:hover { text-decoration:underline!important; }
#header-content .hb-pill-wrap { position:relative; height:100%; overflow:hidden; flex:1; min-width:0; }
#header-content .hb-pill-list { display:block; position:relative; width:100%; transition:transform .5s ease; } /* ép block vì transform không tác dụng lên span inline */
#header-content .hb-pill-item {
    height:32px; display:flex; align-items:center; font-size:11.5px; font-weight:600; color:#c53030;
    text-decoration:none!important; cursor:pointer;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#header-content #birthday-drop { width:min(345px, calc(100vw - 32px)); }
#header-content #birthday-drop #hb-list-v2 { max-height:440px; overflow-y:auto; } /* danh sách dài thì cuộn, không kéo dài khung */
#header-content #birthday-drop .hb-title { padding:14px 16px 6px; font-size:14px; font-weight:700; color:var(--t1); }
#header-content #birthday-drop .hb-title { display:flex; align-items:baseline; gap:6px; }
#header-content #birthday-drop .hb-title-range { font-size:12px; font-weight:400; color:var(--t3); }
#header-content #birthday-drop .hb-title-count {
    margin-left:auto; font-size:11px; font-weight:700; color:#b45309;
    background:#fef3c7; border:1px solid #fde68a; border-radius:999px; padding:2px 10px;
}
#header-content #birthday-drop .hb-week-empty { padding:6px 16px 10px; font-size:12.5px; color:var(--t3); }
#header-content #birthday-drop .hb-row {
    display:flex; align-items:center; gap:10px; padding:8px 16px;
    text-decoration:none!important; color:inherit; transition:background .15s;
    border-left:3px solid transparent; /* giữ chỗ cho viền nổi bật .hb-row-soon, tránh giật layout */
}
#header-content #birthday-drop .hb-row:last-child {
    margin-bottom: 10px;
}
#header-content #birthday-drop .hb-row:hover { background:var(--gr1); }
/* Nổi bật người còn 1-2 ngày nữa, khớp ngưỡng huy hiệu số $birthdaySoon */
#header-content #birthday-drop .hb-row-soon {
    background:linear-gradient(to right, #fffbeb, #fffbeb 60%, transparent);
    border-left-color:#f59e0b;
}
#header-content #birthday-drop .hb-row-soon:hover { background:linear-gradient(to right, #fef3c7, #fef3c7 60%, var(--gr1)); }
#header-content #birthday-drop .hb-row-soon .hb-name { color:#92400e; }
#header-content #birthday-drop .hb-emoji-lg { font-size:22px; flex-shrink:0; line-height:1; }
#header-content #birthday-drop .hb-info { flex:1; min-width:0; }
#header-content #birthday-drop .hb-name { display:block; font-size:14px; font-weight:500; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#header-content #birthday-drop .hb-sub { display:block; font-size:12px; color:var(--t3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#header-content #birthday-drop .hb-age-plus { font-size:8px; vertical-align:super; }
#header-content #birthday-drop .hb-tag-today {
    flex-shrink:0; font-size:11px; font-weight:700; color:#c53030;
    background:#fff5f5; border:1px solid #fed7d7; border-radius:999px; padding:3px 10px;
}
#header-content #birthday-drop .hb-tag-soon {
    display:inline-block; margin-top:2px; font-size:10.5px; font-weight:700; color:#b45309;
    background:#fef3c7; border:1px solid #fde68a; border-radius:999px; padding:2px 8px;
}
#header-content #birthday-drop .hb-date { flex-shrink:0; text-align:right; }
#header-content #birthday-drop .hb-date-d { display:block; font-size:12.5px; color:var(--t1); }
#header-content #birthday-drop .hb-date-r { display:block; font-size:11px; color:var(--t3); margin-top:1px; }
#header-content #birthday-drop .hb-empty { padding:32px 16px; text-align:center; color:var(--t3); font-size:12.5px; }
#header-content #birthday-drop .hb-empty i { display:block; font-size:30px; color:#e2e2e2; margin-bottom:8px; }
#header-content .bdot {
    min-width:16px; height:16px; border-radius:8px; background:#e53e3e; position:absolute;
    top:-4px; right:-4px; border:2px solid var(--wh); display:none;
    font-size:9.5px; font-weight:700; color:#fff; line-height:1;
    align-items:center; justify-content:center; padding:0 4px;
    box-shadow:0 1px 3px rgba(229,62,62,.5);
}
#header-content .bdot[data-show="1"] { display:flex; }
#header-content .bdot::before { content: attr(data-count); }

#header-content .upill {
    min-width:140px;
    display:flex; align-items:center; gap:8px; background:var(--gr1); border:1px solid var(--gr2);
    border-radius:24px; padding:4px 12px 4px 5px; cursor:pointer; position:relative; transition:all 0.2s;
}
#header-content .upill:hover { background:var(--gr2); border-color:var(--gr3); }
#header-content .uav-pic {
    width:26px; min-width: 26px; height:26px; border-radius:50%; background:var(--g-mn);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700;
}
#header-content .uav-pic img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
#header-content .uname { font-size:9.5px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.3px; }
#header-content .urole { font-size:11px; font-weight:600; color:var(--t1); margin-top:-2px; }

#header-content .noti-drop {
    position:absolute; top:calc(100%x); right:0;
    background:var(--wh); border:1px solid var(--gr2); border-radius:10px;
    box-shadow:var(--sh-lg); z-index:1000; min-width:240px;
    display:none; overflow:hidden; animation: menuFade .2s ease;
}
#header-content .noti-drop.show { display:block; }
#header-content #btn-notice-bell:hover > .noti-drop,
#header-content #btn-business-notice:hover > .noti-drop { display:block; }
@keyframes menuFade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

#header-content #v2-list-notice,
#header-content #list_business_notice { max-height:650px; overflow-y:auto; }
#header-content #v2-list-notice .noti-footer,
#header-content #list_business_notice .noti-footer { position:sticky; bottom:0; z-index:1; }

#header-content .noti-row { border-bottom:1px solid var(--gr2); }
#header-content .noti-row:last-of-type { border-bottom:none; }
#header-content .noti-row a {
    display:block; padding:12px 16px; text-decoration:none; color:var(--t2);
    font-size:12.5px; transition:all 0.2s;
}
#header-content .noti-row a:hover { background:var(--gr1); color:var(--g-dk); padding-left:20px; }
#header-content .noti-row a p { margin:0; font-weight:700; font-size:12.5px; color:var(--t1); margin-bottom:2px; }
#header-content .noti-row a span { font-size:11.5px; opacity:0.8; display:block; }

#header-content .noti-footer { background:var(--gr0); padding:8px; border-top:1px solid var(--gr1); }
#header-content .noti-footer a {
    display:block; text-align:center; font-size:11.5px; font-weight:700;
    color:var(--g-mn); text-decoration:none; padding:6px; border-radius:6px;
}
#header-content .noti-footer a:hover { background:var(--g-mu); }

/* ── RESPONSIVE TOPBAR ── */
@media (max-width: 1536px) {
    #header-content .tb { gap: 10px; padding: 0 14px; }
    #header-content .h-social { gap: 8px; }
    #header-content .h-members { max-width: 350px; }
    #header-content .has-birthday .kpi-row .kpi-p .lbl { display: none; }
}
@media (max-width: 1440px) {
    #header-content .upill .uname { display: none; }
    #header-content .upill { min-width: unset; padding: 4px 10px; }
    #header-content .h-members { max-width: 280px; }
    #header-content .kpi-row { flex: 0 1 auto; min-width: 200px; max-width: 350px; flex-wrap: wrap; overflow: visible; row-gap: 4px; }
    #header-content .kpi-row .kpi-p { min-width: 0; overflow: hidden; }
    #header-content .kpi-row .kpi-p .lbl { display: none; }
    #header-content .kpi-row .kpi-p .val { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

@media (max-width: 1280px) {
    #header-content .kpi-p .lbl { display: none; }
    #header-content .kpi-p { padding: 2px 8px 2px 6px; }
    #header-content .h-members { max-width: 240px; }
    #header-content .kpi-row { gap: 6px; padding-left: 10px; }
}
@media (max-width: 1100px) {
    #header-content .h-members { display: none !important; }
}
@media (max-width: 1024px) {
    #header-content .tb { padding: 0 12px; gap: 8px; }
    #header-content .h-social { gap: 6px; }
}
@media (max-width: 900px) {
    #header-content .kpi-p .lbl { display: none; }
    #header-content .kpi-p { gap: 5px; padding: 2px 8px 2px 5px; }
}
@media (max-width: 768px) {
    #header-content:has(.mnav.mnav-open) + #center-content #frmAdminItemsList .floatThead-wrapper,
    #header-content:has(.mnav.mnav-open) ~ #center-content #frmAdminItemsList .floatThead-wrapper {
        display: none;
    }
    #header-content .tb {
        height: auto;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        padding: 0 12px;
        gap: 0;
        overflow: visible !important;
    }
    #header-content .tb::after {
        content: '';
        display: block;
        flex: 0 0 100%;
        order: 3;
        height: 0;
    }
    #header-content .logo-block {
        order: 1;
        flex: 1 1 0;
        height: 44px;
        display: flex; align-items: center;
    }
    #header-content .logo-mark { width: 32px; height: 32px; font-size: 11px; }
    #header-content .logo-name-v2 { font-size: 12px; }
    #header-content .logo-name-v2 small { font-size: 9.5px; display: block; }
    #header-content .tr-v2 {
        order: 2;
        position: static;
        flex: 0 0 auto;
        height: 44px;
        display: flex; align-items: center;
        gap: 8px; padding: 0;
        background: transparent;
        border-left: none;
    }
    #header-content .ibtn {
        background: var(--gr1); border: 1px solid var(--gr2);
        color: var(--t2); width: 30px; height: 30px; font-size: 14px;
    }
    #header-content .ibtn:hover { background: var(--gr2); transform: scale(1.05); }
    #header-content .bdot { top: -3px; right: -3px; border-color: var(--wh); }
    #header-content .upill {
        background: var(--gr1); border: 1px solid var(--gr2);
        padding: 2px; border-radius: 50%; gap: 0;
        min-width: unset;
    }
    #header-content .upill:hover { background: var(--gr2); border-color: var(--gr3); }
    #header-content .uav-pic { width: 28px; height: 28px; font-size: 10px; }
    #header-content .hidden-md { display: none !important; }
    #header-content .kpi-row {
        order: 10;
        flex: 0 1 auto;
        min-width: 80px;
        height: 42px; box-sizing: border-box;
        border-top: 1px solid var(--gr1);
        padding: 0; gap: 5px;
        overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
        display: flex; align-items: center;
        border-left: unset;
    }
    #header-content .kpi-row::-webkit-scrollbar { display: none; }
    #header-content .kpi-p { flex-shrink: 0; padding: 2px 7px 2px 5px; gap: 3px; }
    #header-content .kpi-p .lbl { display: none; }
    #header-content .h-social {
        order: 11;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        height: 42px; box-sizing: border-box;
        border-top: 1px solid var(--gr1);
        padding: 0 0 0 8px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        margin-left: 0;
        overflow: visible;
    }
    #header-content .h-social:empty { display: none !important; }
    #header-content .h-members {
        order: 20;
        flex: 0 0 100%;
        width: 100%; box-sizing: border-box;
        max-width: none !important;
        height: 42px;
        margin-left: 0;
        border-top: 1px solid var(--gr1);
        padding: 0;
        overflow-x: auto; scrollbar-width: none;
        mask-image: none; -webkit-mask-image: none;
        display: flex !important; align-items: center;
    }
    #header-content .h-members::-webkit-scrollbar { display: none; }
    #header-content .hm-track {
        position: static;
        height: auto; width: max-content;
        transition: none;
        display: flex; flex-wrap: nowrap;
        gap: 8px; align-items: center;
    }
    #header-content .hm-capsule-v2 { min-width: 108px; height: 28px; padding: 2px 8px 2px 3px; gap: 5px; flex-shrink: 0; }
    #header-content .hm-av { width: 20px; height: 20px; font-size: 8px; flex-shrink: 0; }
    #header-content .hm-name { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #header-content .hm-text { font-size: 8.5px; }
    /* Nút sinh nhật nằm mép trái ở mobile: neo khung theo trái để không tràn ra ngoài màn hình */
    #header-content #birthday-drop { left: 0; right: auto; }
}
@media (max-width: 480px) {
    #header-content .tb { padding: 0 10px; }
    #header-content .logo-mark { width: 28px; height: 28px; font-size: 10px; }
    #header-content .logo-name-v2 { font-size: 11px; }
    #header-content .kpi-p { padding: 1px 5px; }
    #header-content .h-members { width: 100px; }
    #header-content .hm-capsule-v2 { min-width: 94px; padding: 2px 6px 2px 3px; }
    #header-content .tr-v2 { gap: 5px; }
    #header-content .ibtn { width: 28px; height: 28px; font-size: 13px; }
    #header-content .uav-pic { width: 24px; height: 24px; font-size: 9px; }
}
@media (max-width: 375px) {
    #header-content .logo-name-v2 { font-size: 10.5px; }
    #header-content .h-members { width: 100px; }
    #header-content .hm-capsule-v2 { min-width: 94px; }
    #header-content .tr-v2 { gap: 4px; }
    #header-content #btn-business-notice { display: none; }
}

#header-content .hidden-v2 { display: none !important; }
#header-content #header-compat { display: none; }

/* ── Topbar shrink: ẩn KPI/birthday/members và thu gọn logo + nút phải ── */
#header-content .tb.tb-shrink .h-social,
#header-content .tb.tb-shrink .kpi-row,
#header-content .tb.tb-shrink .h-members { display: none !important; }
#header-content .tb.tb-shrink .kpi-row { flex: 0 1 auto; flex-wrap: nowrap; max-height: none; padding-left: 8px; }
#header-content .tb.tb-shrink .kpi-p { padding: 1px 7px 1px 5px; }
#header-content .tb.tb-shrink .kpi-p .lbl { display: none; }
#header-content .tb.tb-shrink .kpi-p .val { font-size: 10.5px; }
#header-content .tb.tb-shrink {
    height: 38px; gap: 8px; padding: 0 12px;
    flex-wrap: nowrap !important; align-items: center !important;
}
#header-content .tb.tb-shrink::after { display: none !important; }
#header-content .tb.tb-shrink .logo-block { flex: 0 0 auto; gap: 6px; }
#header-content .tb.tb-shrink .logo-mark { width: 24px; height: 24px; font-size: 10px; }
#header-content .tb.tb-shrink .logo-mark img { width: 24px !important; height: 24px; }
#header-content .tb.tb-shrink .logo-name-v2 { font-size: 11px; }
#header-content .tb.tb-shrink .logo-name-v2 small { display: none; }
#header-content .tb.tb-shrink .tr-v2 {
    margin-left: auto; padding-left: 8px; gap: 6px;
    order: 99; height: 38px;
    border-left: 1px solid var(--gr2);
}
#header-content .tb.tb-shrink .ibtn { width: 26px; height: 26px; font-size: 12px; }
#header-content .tb.tb-shrink .uav-pic { width: 24px; height: 24px; font-size: 9px; }
#header-content .tb.tb-shrink .upill { padding: 2px 8px; min-width: unset; gap: 5px; }
#header-content .tb.tb-shrink .uname { font-size: 8.5px; }
#header-content .tb.tb-shrink .urole { font-size: 10px; }
#header-content .tb.tb-shrink .bdot { min-width: 14px; height: 14px; font-size: 8.5px; }

/* ============================================================
   V2 MEGA MENU (menubaradmin/index_v2.php)
   ============================================================ */
#header-content .mnav-bar {
  background: var(--g-dk);
  height: 42px; display: flex; align-items: center; padding: 0 8px;
  position: sticky; top: 52px; z-index: 400; overflow: visible !important;
}
#header-content .mnav {
  list-style: none; margin: 0; padding: 0 0 0 0;
  display: flex; align-items: center; height: 42px;
  flex: 1; min-width: max-content;
}
#header-content .mnav > li {
  position: relative; list-style: none;
  display: flex; align-items: center; height: 100%;
}
#header-content .mnav > li > a {
  display: flex; align-items: center; gap: 6px; padding: 0 5px; height: 32px;
  color: rgba(255,255,255,.9); font-size: 12px; font-weight: 500;
  white-space: nowrap; text-decoration: none; user-select: none;
  border-radius: 6px; margin: 0 2px;
  transition: all .15s ease;
}
#header-content .mnav > li > a:hover { color: #fff; background: rgba(255,255,255,.1); }
#header-content .mnav > li.act > a  { background: var(--gr1); color: var(--g-dk); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

#header-content .mnav-drop {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--wh);
    border: 1px solid var(--gr2);
    border-top: 3px solid var(--g-mn);
    border-radius: 0 var(--r8,8px) var(--r8,8px) var(--r8,8px);
    box-shadow: 0 14px 30px rgba(15,23,42,.18);
    z-index: 9999;
    padding: 6px 0;
    min-width: 240px;
    list-style: none;
    max-height: 70vh;
    overflow-y: auto;
    margin-top: -1px;
    /* Hiệu ứng */
    transform-origin: top left;
    transform: translateY(10px) scale(.96);
    transition:
      opacity   .18s ease-out,
      transform .24s cubic-bezier(.16,1,.3,1),
      filter    .22s ease-out;
    will-change: opacity, transform, filter;
  }
#header-content .mnav-drop::before {
  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px;
}
#header-content .mnav > li:focus-within > .mnav-drop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    filter: blur(0);
}
#header-content .mnav-drop.mega {
  display: flex; gap: 0; padding: 0;
  width: max-content;
  max-height: 80vh;
  overflow: visible;
  align-items: flex-start;
}
#header-content .dd-col {
  overflow-y: auto;
  max-height: 80vh;
}
#header-content .mnav > li.mega-right > .mnav-drop,
#header-content .mnav > li:last-child > .mnav-drop,
#header-content .mnav > li:nth-last-child(2) > .mnav-drop {
  left: auto; right: 0;
  border-radius: var(--r8,8px) 0 var(--r8,8px) var(--r8,8px);
  transform-origin: top right;
}
#header-content .dd-col {
  padding: 8px 0; border-right: 1px solid var(--gr2);
  min-width: 260px; flex: 1; display: flex; flex-direction: column;
}
#header-content .dd-col:last-child { border-right: none; }
#header-content .ddt {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--t3,#8a8a84);
  padding: 8px 14px 3px; display: block;
}
#header-content .ddt + .ddt { margin-top: 4px; }
#header-content a.mnav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; color: var(--t2); font-size: 12px;
  text-decoration: none; line-height: 1.4;
  border-left: 3px solid transparent;
  transition: all .15s;
}
#header-content a.mnav-item:hover,
#header-content a.mnav-item.act {
  background: var(--gr1); color: var(--g-dk);
  border-left-color: var(--g-mn); padding-left: 17px;
}
#header-content a.mnav-item.act { font-weight: 700; }
#header-content a.mnav-item .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gr3); flex-shrink: 0; transition: background .1s;
}
#header-content a.mnav-item:hover .dot,
#header-content a.mnav-item.act .dot { background: var(--g-mn); transform: scale(1.2); }
#header-content .ddhr { border: none; border-top: 1px solid var(--gr2); margin: 4px 0; pointer-events: none; }
#header-content .pc-search-wrap { margin-left: auto; position: relative; }
#header-content .admin-menu-search {
  width: 90px; height: 28px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 8px; padding: 0 12px !important;
  color: #fff!important; font-size: 11.5px;
  transition: all .2s;
}
#header-content .admin-menu-search::placeholder { color: rgba(255,255,255,.5); }
#header-content .admin-menu-search:focus {
  width: 130px; background: rgba(255,255,255,.2);
  outline: none; border-color: rgba(255,255,255,.25) !important;
}
#header-content .admin-menu-search-results {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 320px!important; background: var(--wh); border: 1px solid var(--gr2);
  border-radius: 10px; box-shadow: var(--sh-lg); overflow: hidden; z-index: 9999;
}
#header-content .admin-menu-search-list { max-height: 350px; overflow-y: auto; }
#header-content .admin-menu-search-item { border-radius: 6px; overflow: hidden; }
#header-content .admin-menu-search-item a {
  display: block; padding: 8px 12px; text-decoration: none;
  color: var(--t1); font-size: 11px;
}
#header-content .admin-menu-search-item:hover,
#header-content .admin-menu-search-item.active { background: var(--gr1); }

@media (max-width: 1200px) {
  #header-content .mnav > li > a { padding: 0 10px; font-size: 11.5px; }
}
@media (max-width: 992px) {
  #header-content .mnav > li > a span { display: none; }
  #header-content .mnav > li > a { padding: 0 8px; font-size: 14px; }
  #header-content .admin-menu-search { width: 160px; }
  #header-content .admin-menu-search:focus { width: 200px; }
}
@media (max-width: 768px) {
  #header-content .mnav-bar {
    top: var(--tb-h, 82px);
    padding: 0 12px;
    flex-wrap: nowrap;
    overflow: visible;
    transition: top .2s ease;
  }
  #header-content .mnav-hamburger {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; cursor: pointer;
    color: #fff; font-size: 14px;
    flex-shrink: 0;
    transition: background .15s;
    order: -1;
  }
  #header-content .mnav-hamburger:hover { background: rgba(255,255,255,.2); }
  #header-content .mnav-hamburger.open { background: rgba(255,255,255,.25); }
  #header-content .mnav {
    display: none;
    position: fixed;
    top: calc(var(--tb-h, 82px) + 42px);
    left: 0; right: 0; bottom: 0;
    background: var(--g-dk);
    flex-direction: column;
    height: auto; max-height: calc(100vh - var(--tb-h, 82px) - 42px);
    overflow-y: auto; overflow-x: hidden;
    align-items: stretch;
    z-index: 9998;
    padding: 8px 0 20px;
    min-width: unset;
  }
  #header-content .mnav.mnav-open { padding-top: 0; display: flex !important; }
  #header-content .mnav > li {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  #header-content .mnav > li > a {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 12px 16px; height: auto;
    font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,.85);
    border-radius: 0; margin: 0; gap: 6px;
  }
  #header-content .mnav > li > a span { display: inline !important; }
  #header-content .mnav > li > a:hover { background: rgba(255,255,255,.08); color: #fff; }
  #header-content .mnav > li.act > a { background: rgba(255,255,255,.12); color: #fff; border-left: 3px solid var(--g-mn); }
  #header-content .mnav > li.has-child > a::after {
    content: '›';
    font-size: 16px; font-weight: 300;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
    margin-left: auto;
    flex-shrink: 0;
  }
  #header-content .mnav > li.has-child.dd-open > a::after { transform: rotate(90deg); }
  #header-content .mnav-drop,
  #header-content .mnav-drop.mega {
    visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
    position: static !important;
    display: none !important;
    transform: none !important;
    box-shadow: none; border: none;
    border-radius: 0;
    background: rgba(0,0,0,.25);
    max-height: none;
    margin: 0; padding: 0;
    width: 100% !important;
  }
  #header-content .mnav > li.dd-open > .mnav-drop { display: block !important; }
  #header-content .mnav > li.dd-open > .mnav-drop.mega {
    display: flex !important;
    flex-direction: column;
    overflow: visible;
  }
  #header-content .dd-col {
    min-width: 100%; width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 6px 0;
  }
  #header-content .dd-col:last-child { border-bottom: none; }
  #header-content .ddt {
    color: rgba(255,255,255,.4);
    padding: 8px 20px 3px;
    font-size: 9.5px;
  }
  #header-content a.mnav-item {
    color: rgba(255,255,255,.72);
    padding: 9px 20px;
    border-left: 3px solid transparent;
    font-size: 12.5px;
  }
  #header-content a.mnav-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: var(--g-mn);
    padding-left: 22px;
  }
  #header-content a.mnav-item .dot { background: rgba(255,255,255,.3); }
  #header-content a.mnav-item:hover .dot { background: var(--g-mn); }
  #header-content .ddhr { border-color: rgba(255,255,255,.07); }
  #header-content .pc-search-wrap {
    margin-left: auto;
    padding-right: 0;
  }
  #header-content .admin-menu-search {
    width: 120px; height: 26px;
    font-size: 11px;
  }
  #header-content .admin-menu-search:focus { width: 140px; }
}
@media (max-width: 480px) {
  #header-content .mnav-bar { padding: 0 10px; }
}
@media (max-width: 375px) {
  #header-content .mnav-hamburger { width: 30px; height: 30px; font-size: 13px; }
}

#header-content .mnav-more { display: none !important; position: relative; }
#header-content .mnav-more.pnav-visible { display: flex !important; }
#header-content .mnav-more > a { gap: 4px; white-space: nowrap; letter-spacing: .5px; }
#header-content .mnav-more > a .pnav-lbl { font-size: 11px; }
#header-content .mnav-more > .mnav-drop.mnav-more-drop {
  left: auto; right: 0;
  min-width: 180px; max-height: none;
  overflow: visible;
  border-radius: var(--r8,8px) 0 var(--r8,8px) var(--r8,8px);
  transform-origin: top right;
}
#header-content .mnav-more-drop > li { position: relative; }
#header-content .mnav-more-drop > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 32px 9px 14px;
  color: var(--t2); font-size: 12.5px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border-left: 3px solid transparent;
  transition: all .12s;
}
#header-content .mnav-more-drop > li.has-child > a::after {
  content: '‹'; position: absolute; right: 10px;
  font-size: 15px; color: var(--t3); line-height: 1;
}
#header-content .mnav-more-drop > li > a:hover {
  background: var(--gr1); color: var(--g-dk);
  border-left-color: var(--g-mn); padding-left: 17px;
}
#header-content .mnav-more-drop > li > .mnav-drop {
  position: absolute !important;
  top: -4px !important;
  left: auto !important;
  right: calc(100% + 2px) !important;
  width: max-content !important;
  max-width: 92vw !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
  border-radius: var(--r8,8px) !important;
  transform-origin: top right !important;
  transform: translateX(8px) scale(0.98) !important;
  transition: all .15s cubic-bezier(0,0,0.2,1) !important;
}
#header-content .mnav-more-drop > li:hover > .mnav-drop {
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
  transform: translateX(0) scale(1) !important;
}
#header-content .mnav-more-drop > li > .mnav-drop.mega {
  display: flex !important;
  overflow: visible !important;
  max-height: none !important;
}
@media (max-width: 768px) {
  #header-content .mnav-more { display: none !important; }
}
.mw-100 {
    min-width: 100px;
}
.mw-150 {
    min-width: 150px;
}
/* Select2 an the select goc va render .select2-container ke sau, nen phai noi rong ca container. */
.mw-100 + .select2-container {
    min-width: 100px;
}
.mw-150 + .select2-container {
    min-width: 150px;
}
.mutation_type_1 {
    background-color: yellow!important;
    color: gray!important;
}

.mutation_type_2 {
    background-color: red!important;
    color: white!important;
}

.mutation_type_3 {
    background-color: orange!important;
    color: gray!important;
}

.m-tip-trigger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    margin-left:6px;
    border-radius:999px;
    border:none;
    background:transparent;
    color:#858585;
    font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    vertical-align:middle;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent
}
.m-tip-wrap{display:inline-flex;vertical-align:middle}
.m-tip-trigger i{color:currentColor}
.m-tip-trigger:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.m-tip-trigger{display:none}}

td.js-tip, th.js-tip{white-space:nowrap}
.m-tooltip{
    position:fixed;
    z-index:99999;
    max-width:min(320px,calc(100vw - 24px));
    background:#fff;
    color:#111;
    padding:10px 12px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0;
    transform:translateY(4px);
    transition:opacity .12s ease,transform .12s ease;
    pointer-events:none
}
.m-tooltip.is-open{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto
}
.m-tooltip__content{
    font:400 13px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    word-break:break-word;
    max-height:min(50vh,260px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    white-space:pre-line
}
.m-tooltip__arrow{
    position:absolute;
    width:10px;
    height:10px;
    background:#fff;
    transform:rotate(45deg)
}
.m-tooltip[data-arrow="top"] .m-tooltip__arrow{top:-5px}
.m-tooltip[data-arrow="bottom"] .m-tooltip__arrow{bottom:-5px}