/* ===== 00-core.css ===== */
/* MAXYTB.VN · theme Picasso cho Perfect Panel (Bootstrap 3)
   00-core: màu, chữ, thanh điều hướng, thẻ, form, nút, bảng, thông báo… dùng chung mọi trang. */
:root{
  --mx-cream:#fbf5ea;
  --mx-paper:#fffdf8;
  --mx-blue:#1f4be0;
  --mx-blue-d:#1535a8;
  --mx-navy:#0a1a44;
  --mx-ink:#0f1b3d;
  --mx-muted:#4a5474;
  --mx-line:rgba(10,26,68,.14);
  --mx-sun:#ffc83d;
  --mx-coral:#ff6b4a;
  --mx-green:#12a36b;
  --mx-sky:#e7edff;
  --mx-on-blue:#dfe6ff;
  --mx-display:"Fraunces",Georgia,"Times New Roman",serif;
  --mx-sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mx-r:26px;
  --mx-shadow:0 7px 0 var(--mx-navy);
}

/* ---------- nền & chữ ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.mx{background:var(--mx-cream);color:var(--mx-ink);font:400 16px/1.6 var(--mx-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;min-height:100vh;padding-bottom:0}
body.mx .mx-main{flex:1 0 auto;padding-bottom:24px}
body.mx a{color:var(--mx-blue)}
body.mx a:hover,body.mx a:focus{color:var(--mx-navy)}
body.mx :focus-visible{outline:3px solid var(--mx-blue);outline-offset:3px}
body.mx ::selection{background:var(--mx-sun);color:var(--mx-navy)}
body.mx h1,body.mx h2,body.mx h3,body.mx .h1,body.mx .h2,body.mx .h3{font-family:var(--mx-display);font-variation-settings:"SOFT" 100;font-optical-sizing:auto;font-weight:800;color:var(--mx-navy);letter-spacing:-.01em;line-height:1.15}
body.mx h4,body.mx h5,body.mx h6,body.mx .h4{font-family:var(--mx-sans);font-weight:700;color:var(--mx-navy)}
body.mx hr{border-top:2px dashed var(--mx-line)}
body.mx .text-muted,body.mx .help-block{color:var(--mx-muted)}
body.mx code{background:var(--mx-sky);color:var(--mx-blue-d);border-radius:6px;padding:2px 6px}
body.mx pre{background:var(--mx-navy);color:#e8ecfa;border:0;border-radius:16px;padding:16px}

/* ---------- thanh điều hướng ---------- */
body.mx .navbar-default{background:var(--mx-cream);border:0;border-bottom:2px solid var(--mx-navy);border-radius:0;margin-bottom:36px;min-height:70px}
body.mx .navbar-default .navbar-brand{display:flex;align-items:center;gap:10px;height:70px;padding:15px;font:800 17px/1 var(--mx-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--mx-navy)}
body.mx .navbar-default .navbar-brand:hover{color:var(--mx-blue)}
body.mx .navbar-brand img{max-height:42px;width:auto}
body.mx .mx-mark{display:block;width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden}
body.mx .mx-mark svg{display:block;width:100%;height:100%}
body.mx .navbar-default .navbar-nav>li>a{color:var(--mx-navy);font-weight:600;font-size:15px}
body.mx .navbar-default .navbar-nav>li>a:hover,body.mx .navbar-default .navbar-nav>li>a:focus{color:var(--mx-blue);background:transparent}
body.mx .navbar-default .navbar-nav>.active>a,body.mx .navbar-default .navbar-nav>.active>a:hover,body.mx .navbar-default .navbar-nav>.active>a:focus{color:#fff;background:var(--mx-navy)}
body.mx .navbar-default .navbar-nav>.open>a,body.mx .navbar-default .navbar-nav>.open>a:hover,body.mx .navbar-default .navbar-nav>.open>a:focus{color:var(--mx-navy);background:var(--mx-sky)}
body.mx .navbar-icon{margin:0 6px 0 0;opacity:.85}
body.mx .navbar-default .navbar-toggle{margin-top:17px;margin-bottom:17px;border:2px solid var(--mx-navy);border-radius:12px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);padding:8px 10px}
body.mx .navbar-default .navbar-toggle:hover,body.mx .navbar-default .navbar-toggle:focus{background:var(--mx-sky)}
body.mx .navbar-default .navbar-toggle .icon-bar{background:var(--mx-navy);height:2.5px;border-radius:2px}
body.mx .navbar-default .navbar-collapse{border-color:var(--mx-line);box-shadow:none}
body.mx .navbar .badge{background:var(--mx-sun);color:var(--mx-navy);border:2px solid var(--mx-navy);font:800 13.5px/1 var(--mx-sans);padding:6px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
body.mx .navbar-default .navbar-nav>li>a .caret{margin-left:4px}

@media (min-width:768px){
  body.mx .navbar-default .navbar-nav>li>a{padding:10px 14px;margin:15px 1px;border-radius:999px;line-height:20px}
  /* khách: menu gom thành một viên thuốc có viền */
  body.mx.mx-guest .navbar-nav.navbar-right{margin:13px -15px 0 0;padding:2px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy)}
  body.mx.mx-guest .navbar-nav.navbar-right>li>a{margin:0}
  body.mx.mx-guest .navbar-left-block>li>a{border:2px solid var(--mx-navy);background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);padding:8px 14px;margin:13px 0 0 12px}
  /* đã đăng nhập: menu nhiều mục, chữ nhỏ hơn */
  body.mx.mx-auth .navbar-default .navbar-nav>li>a{padding:9px 12px;font-size:14px;margin:15px 0}
  body.mx.mx-auth .navbar-right-block>li>a{padding:7px 10px}
}
@media (max-width:767px){
  body.mx .navbar-default{margin-bottom:24px}
  body.mx .navbar-default .navbar-collapse{margin-top:4px;padding-bottom:12px;border-top:2px dashed var(--mx-line)}
  body.mx .navbar-default .navbar-nav{margin:6px -15px}
  body.mx .navbar-default .navbar-nav>li>a{padding:12px 18px;margin:2px 8px;border-radius:14px}
  body.mx .navbar-default .navbar-nav .open .dropdown-menu>li>a{color:var(--mx-navy);padding:10px 18px 10px 30px}
}
/* panel tự thu gọn menu khi quá nhiều mục (script.js thêm .navbar-collapsed) */
body.mx .navbar-collapsed .navbar-nav>li>a{border-radius:14px}

/* ---------- thẻ nội dung (.well) ---------- */
body.mx .well{background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:var(--mx-r);box-shadow:var(--mx-shadow);padding:26px 22px;margin-bottom:34px;color:var(--mx-ink)}
@media (min-width:768px){body.mx .well{padding:32px 34px}}
body.mx .well>h3:first-child,body.mx .well form>h3:first-child{margin-top:0;margin-bottom:18px;font-size:28px}
body.mx .panel{background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:20px;box-shadow:0 5px 0 var(--mx-navy);overflow:hidden}
body.mx .panel-default>.panel-heading{background:var(--mx-sky);color:var(--mx-navy);border-bottom:2px solid var(--mx-navy);font-weight:700}
body.mx .panel-body.border-solid,body.mx .border-solid{border:2px solid var(--mx-line)}
body.mx .border-rounded{border-radius:14px;background:#fff}
/* panel cho .well-float nở theo bảng ở màn ≤991px, làm cả trang cuộn ngang */
@media (max-width:991px){body.mx .well-float{float:none;width:auto;min-width:0}}

/* ---------- form ---------- */
body.mx label,body.mx .control-label{font-weight:600;font-size:14.5px;color:var(--mx-navy);margin-bottom:6px}
body.mx .form-group{margin-bottom:18px}
body.mx .form-control{height:50px;padding:10px 16px;border:2px solid rgba(10,26,68,.22);border-radius:14px;background:#fff;box-shadow:none;font:500 15.5px/1.4 var(--mx-sans);color:var(--mx-ink);transition:border-color .15s,box-shadow .15s}
body.mx .form-control::placeholder{color:#8a90a6}
body.mx .form-control:focus{border-color:var(--mx-blue);box-shadow:0 0 0 4px rgba(31,75,224,.16);outline:0}
body.mx textarea.form-control{height:auto;min-height:120px;line-height:1.55}
body.mx .form-control[readonly],body.mx .form-control[disabled]{background:var(--mx-sky);border-color:rgba(10,26,68,.14);color:var(--mx-navy);font-weight:700;opacity:1}
body.mx select.form-control:not([multiple]){-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230a1a44' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
body.mx .input-group .form-control{border-radius:14px}
body.mx .input-group .form-control:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
body.mx .input-group-btn:last-child>.btn{height:50px;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:none;margin-left:-2px}
body.mx .input-group-btn:last-child>.btn:hover,body.mx .input-group-btn:last-child>.btn:active{transform:none;box-shadow:none}
body.mx .input-group-addon{border:2px solid rgba(10,26,68,.22);background:var(--mx-sky);color:var(--mx-navy);font-weight:700;border-radius:14px}
body.mx .checkbox label,body.mx .radio label,body.mx label.terms{font-weight:500;color:var(--mx-ink)}
body.mx input[type=checkbox],body.mx input[type=radio]{accent-color:var(--mx-blue);width:17px;height:17px;vertical-align:-3px}
body.mx .has-error .form-control{border-color:var(--mx-coral)}
body.mx .has-error .help-block,body.mx .has-error .control-label{color:#c2401f}
body.mx .forgot-password{font-size:13.5px;font-weight:600}

/* ---------- nút ---------- */
body.mx .btn{border:2px solid var(--mx-navy);border-radius:999px;font:700 15px/1.2 var(--mx-sans);padding:12px 22px;box-shadow:0 4px 0 var(--mx-navy);transition:transform .15s ease,box-shadow .15s ease,background-color .15s;white-space:normal}
body.mx .btn:hover,body.mx .btn:focus{transform:translateY(-2px);box-shadow:0 6px 0 var(--mx-navy);outline:0}
body.mx .btn:active,body.mx .btn.active{transform:translateY(3px);box-shadow:0 1px 0 var(--mx-navy)}
body.mx .btn-primary,body.mx .btn-primary:hover,body.mx .btn-primary:focus,body.mx .btn-primary:active{background:var(--mx-blue);border-color:var(--mx-navy);color:#fff}
body.mx .btn-default,body.mx .btn-default:hover,body.mx .btn-default:focus,body.mx .btn-default:active{background:var(--mx-paper);border-color:var(--mx-navy);color:var(--mx-navy)}
body.mx .btn-default:hover{background:var(--mx-sky)}
body.mx .btn-success,body.mx .btn-success:hover,body.mx .btn-success:focus,body.mx .btn-success:active{background:var(--mx-green);border-color:var(--mx-navy);color:#fff}
body.mx .btn-info,body.mx .btn-info:hover,body.mx .btn-info:focus,body.mx .btn-info:active{background:var(--mx-sky);border-color:var(--mx-navy);color:var(--mx-navy)}
body.mx .btn-warning,body.mx .btn-warning:hover,body.mx .btn-warning:focus,body.mx .btn-warning:active{background:var(--mx-sun);border-color:var(--mx-navy);color:var(--mx-navy)}
body.mx .btn-danger,body.mx .btn-danger:hover,body.mx .btn-danger:focus,body.mx .btn-danger:active{background:var(--mx-coral);border-color:var(--mx-navy);color:#fff}
body.mx .btn-link{border-color:transparent;box-shadow:none;color:var(--mx-blue);text-decoration:underline;text-underline-offset:4px}
body.mx .btn-link:hover{box-shadow:none;transform:none}
body.mx .btn-sm,body.mx .btn-group-sm>.btn{padding:7px 14px;font-size:13.5px;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .btn-xs,body.mx .btn-group-xs>.btn{padding:3px 10px;font-size:12.5px;border-width:2px;box-shadow:0 2px 0 var(--mx-navy)}
body.mx .btn-lg{padding:15px 28px;font-size:17px}
body.mx .btn[disabled],body.mx .btn.disabled{opacity:.55;transform:none;box-shadow:0 2px 0 var(--mx-navy)}
body.mx .btn-group>.btn{box-shadow:none}
body.mx .btn-group>.btn:hover{transform:none}

/* ---------- thông báo ---------- */
body.mx .alert{border:2px solid var(--mx-navy);border-radius:18px;box-shadow:0 4px 0 var(--mx-navy);padding:14px 18px;color:var(--mx-navy);font-weight:500}
body.mx .alert-dismissible{padding-right:44px}
body.mx .alert-dismissible .close{top:-2px;right:-26px}
body.mx .alert h4{font:800 19px/1.2 var(--mx-display);margin-bottom:8px}
body.mx .alert a:not(.btn){color:var(--mx-blue-d);font-weight:700;text-decoration:underline}
body.mx .alert-success{background:#e3f6ec}
body.mx .alert-info{background:var(--mx-sky)}
body.mx .alert-warning{background:#fff3cf}
body.mx .alert-danger{background:#ffe7df}
body.mx .alert .close{opacity:.6;color:var(--mx-navy);text-shadow:none;font-size:24px}
body.mx #notify-wrapper{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:2000;min-width:280px;max-width:92vw}

/* ---------- bảng ---------- */
/* bo góc bằng ô góc thay vì overflow:hidden, để tooltip trong bảng không bị cắt */
body.mx .table{background:var(--mx-paper);border-collapse:separate;border-spacing:0;border:2px solid var(--mx-navy);border-radius:20px;box-shadow:0 6px 0 var(--mx-navy);margin-bottom:28px}
body.mx .table>thead>tr>th{background:var(--mx-navy);color:#fff;border:0;padding:14px 14px;font:700 12.5px/1.3 var(--mx-sans);text-transform:uppercase;letter-spacing:.06em;vertical-align:middle;white-space:nowrap}
body.mx .table>thead:first-child>tr:first-child>th:first-child{border-top-left-radius:18px}
body.mx .table>thead:first-child>tr:first-child>th:last-child{border-top-right-radius:18px}
body.mx .table>tbody:last-child>tr:last-child>td:first-child{border-bottom-left-radius:18px}
body.mx .table>tbody:last-child>tr:last-child>td:last-child{border-bottom-right-radius:18px}
body.mx .table .btn{white-space:nowrap}
body.mx .table>tbody>tr>td,body.mx .table>tbody>tr>th{border-top:1px solid var(--mx-line);padding:12px 14px;vertical-align:middle;font-size:14.5px}
body.mx .table>tbody>tr:first-child>td{border-top:0}
body.mx .table-striped>tbody>tr:nth-of-type(odd){background:rgba(231,237,255,.5)}
body.mx .table-hover>tbody>tr:hover{background:#fff6dc}
body.mx .table-bordered>tbody>tr>td,body.mx .table-bordered>thead>tr>th{border-color:var(--mx-line)}
body.mx .table.table-bordered{border-color:var(--mx-navy)}
body.mx .table-responsive{border:0;margin-bottom:28px;padding-bottom:8px}
body.mx .table-responsive>.table{margin-bottom:0}

/* ---------- tab lọc, phân trang, nhãn ---------- */
body.mx .nav-pills>li>a{border:2px solid transparent;border-radius:999px;font-weight:600;color:var(--mx-navy);padding:8px 16px}
body.mx .nav-pills>li>a:hover,body.mx .nav-pills>li>a:focus{background:var(--mx-sky);border-color:var(--mx-navy)}
body.mx .nav-pills>li.active>a,body.mx .nav-pills>li.active>a:hover,body.mx .nav-pills>li.active>a:focus{background:var(--mx-navy);border-color:var(--mx-navy);color:#fff}
body.mx .nav-tabs{border-bottom:2px solid var(--mx-navy)}
body.mx .nav-tabs>li>a{border:2px solid transparent;border-radius:14px 14px 0 0;font-weight:600;color:var(--mx-navy)}
body.mx .nav-tabs>li.active>a,body.mx .nav-tabs>li.active>a:hover,body.mx .nav-tabs>li.active>a:focus{border:2px solid var(--mx-navy);border-bottom-color:var(--mx-cream);background:var(--mx-cream);color:var(--mx-navy)}
body.mx .pagination>li>a,body.mx .pagination>li>span{border:2px solid var(--mx-navy);margin-left:-2px;background:var(--mx-paper);color:var(--mx-navy);font-weight:700;padding:8px 14px}
body.mx .pagination>li:first-child>a,body.mx .pagination>li:first-child>span{border-radius:999px 0 0 999px}
body.mx .pagination>li:last-child>a,body.mx .pagination>li:last-child>span{border-radius:0 999px 999px 0}
body.mx .pagination>li>a:hover{background:var(--mx-sky);color:var(--mx-navy)}
body.mx .pagination>.active>a,body.mx .pagination>.active>a:hover,body.mx .pagination>.active>span{background:var(--mx-blue);border-color:var(--mx-navy);color:#fff}
body.mx .badge{background:var(--mx-navy);color:#fff;border-radius:999px;font-weight:700}
body.mx .label{border-radius:999px;padding:.3em .8em;font-weight:700;font-size:12px;letter-spacing:.02em}
body.mx .label-default{background:#c9cfe0;color:var(--mx-navy)}
body.mx .label-primary{background:var(--mx-blue)}
body.mx .label-success{background:var(--mx-green)}
body.mx .label-info{background:var(--mx-sky);color:var(--mx-navy)}
body.mx .label-warning{background:var(--mx-sun);color:var(--mx-navy)}
body.mx .label-danger{background:var(--mx-coral)}

/* ---------- menu thả xuống, hộp thoại, gợi ý ---------- */
body.mx .dropdown-menu{border:2px solid var(--mx-navy);border-radius:16px;box-shadow:0 6px 0 var(--mx-navy);padding:6px;background:var(--mx-paper);margin-top:6px}
body.mx .dropdown-menu>li>a{border-radius:10px;padding:8px 12px;font-weight:600;color:var(--mx-navy)}
body.mx .dropdown-menu>li>a:hover,body.mx .dropdown-menu>li>a:focus{background:var(--mx-sky);color:var(--mx-navy)}
body.mx .dropdown-menu>.active>a,body.mx .dropdown-menu>.active>a:hover,body.mx .dropdown-menu>.active>a:focus{background:var(--mx-blue);color:#fff}
body.mx .modal-content{border:2px solid var(--mx-navy);border-radius:24px;box-shadow:0 8px 0 var(--mx-navy);background:var(--mx-paper)}
body.mx .modal-header{border-bottom:2px dashed var(--mx-line)}
body.mx .modal-footer{border-top:2px dashed var(--mx-line)}
body.mx .modal-title{font:800 22px/1.2 var(--mx-display);color:var(--mx-navy)}
body.mx .modal-backdrop.in{opacity:.55;background:var(--mx-navy)}
body.mx .tooltip-inner{background:var(--mx-navy);border-radius:10px;padding:6px 10px;font-weight:600}
body.mx .tooltip.top .tooltip-arrow{border-top-color:var(--mx-navy)}

/* ---------- ô chọn có tìm kiếm (select2 của panel) ---------- */
body.mx .select2-container .select2-selection--single{height:50px;border:2px solid rgba(10,26,68,.22);border-radius:14px;background:#fff}
body.mx .select2-container--focus .select2-selection--single,body.mx .select2-container--open .select2-selection--single{border-color:var(--mx-blue);box-shadow:0 0 0 4px rgba(31,75,224,.16)}
body.mx .select2-container .select2-selection--single .select2-selection__rendered{line-height:46px;padding-left:16px;padding-right:40px;color:var(--mx-ink);font-weight:500}
body.mx .select2-container .select2-selection--single .select2-selection__arrow{height:46px;right:10px}
body.mx .select2-dropdown{border:2px solid var(--mx-navy);border-radius:16px;box-shadow:0 6px 0 var(--mx-navy);overflow:hidden;background:var(--mx-paper)}
body.mx .select2-search--dropdown{padding:8px}
body.mx .select2-search--dropdown .select2-search__field{height:40px;border:2px solid rgba(10,26,68,.22);border-radius:10px;padding:6px 12px;font:500 15px var(--mx-sans);color:var(--mx-ink)}
body.mx .select2-search--dropdown .select2-search__field:focus,body.mx .select2-search--dropdown .select2-search__field:focus-visible{outline:0;border-color:var(--mx-blue);box-shadow:0 0 0 3px rgba(31,75,224,.14)}
body.mx .select2-results__option{padding:9px 14px}
body.mx .select2-container--default .select2-results__option--highlighted[aria-selected],body.mx .select2-results__option--highlighted{background:var(--mx-blue);color:#fff}
body.mx .select2-container--default .select2-results__option[aria-selected=true]{background:var(--mx-sky);color:var(--mx-navy)}

/* ---------- chân trang ---------- */
body.mx .mx-foot{flex:none;background:var(--mx-navy);color:#e8ecfa;font-size:14.5px}
body.mx .mx-foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-top:16px;padding-bottom:16px}
body.mx .mx-foot__row:before,body.mx .mx-foot__row:after{display:none}
body.mx .mx-foot a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--mx-sun);font-weight:700;text-decoration:none}
body.mx .mx-foot a:hover{color:#fff}
body.mx .mx-foot__brand{color:#e8ecfa!important;text-transform:uppercase;letter-spacing:.05em}
body.mx .mx-foot .mx-mark{width:30px;height:30px;border-radius:9px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}

@media (prefers-reduced-motion:reduce){
  body.mx *,body.mx *:before,body.mx *:after{transition:none!important;animation:none!important}
  body.mx .btn:hover,body.mx .btn:active{transform:none}
}

/* ===== 05-member.css ===== */
/* 05-member: thanh thông tin khách sau khi đăng nhập (layout.twig .mx-me) + chấm báo ticket mới trên menu */
body.mx .mx-me{margin:-14px 0 28px}
body.mx .mx-me ~ .mxa{margin-top:0}
body.mx .mx-me__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 12px 10px 10px;border:2px solid var(--mx-navy);border-radius:22px;background:var(--mx-paper);box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mx-me__hi{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
body.mx .mx-me__face{display:block;width:40px;height:40px;flex:none}
body.mx .mx-me__face svg{display:block;width:100%;height:100%}
body.mx .mx-me__name{display:flex;flex-direction:column;min-width:0;line-height:1.15}
body.mx .mx-me__name small{font-size:12.5px;font-weight:600;color:var(--mx-muted)}
body.mx .mx-me__name b{font:800 17px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
body.mx .mx-me__level{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 11px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-sun);font:800 13px/1 var(--mx-sans);color:var(--mx-navy);white-space:nowrap}
body.mx .mx-me__level i{font-size:12px}
body.mx .mx-me__level em{font-style:normal;padding:4px 8px;border-radius:999px;background:var(--mx-navy);color:#fff;font-size:12px}
body.mx .mx-me__stats{display:flex;align-items:stretch;margin:0}
body.mx .mx-me__stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:0 16px;border-left:2px dashed var(--mx-line);min-width:0}
body.mx .mx-me__stats dt{font:600 12px/1.3 var(--mx-sans);color:var(--mx-muted);white-space:nowrap}
body.mx .mx-me__stats dd{margin:0;font:800 16px/1.2 var(--mx-sans);color:var(--mx-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mx-me__stats dd a{color:var(--mx-blue);text-decoration:none}
body.mx .mx-me__stats dd a:hover{text-decoration:underline}
body.mx .mx-me__stats .is-new dd a{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--mx-coral);color:#fff}
body.mx .mx-me__cta{flex:none}
body.mx .mx-me__cta i{margin-right:4px}
@media (max-width:767px){
  body.mx .mx-me{margin:-8px 0 20px}
  body.mx .mx-me__row{padding:10px}
  body.mx .mx-me__hi{flex:1 1 0}
  body.mx .mx-me__name b{max-width:34vw}
  body.mx .mx-me__stats{order:3;flex:1 0 100%;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mx-me__stats>div{flex:1 1 0;padding:0 10px}
  body.mx .mx-me__stats>div:first-child{border-left:0;padding-left:4px}
  body.mx .mx-me__cta{order:2}
}
@media (max-width:420px){
  body.mx .mx-me__level{order:4}
  body.mx .mx-me__hi{flex-wrap:wrap}
}

/* tiến độ lên cấp VIP trong thanh thông tin (JS trong layout.twig điền nội dung) */
body.mx .mx-vip-next{display:flex;flex-direction:column;gap:4px;min-width:170px;max-width:260px}
body.mx .mx-vip-next[hidden]{display:none}
body.mx .mx-vip-next__bar{display:block;height:8px;border:2px solid var(--mx-navy);border-radius:999px;background:#fff;overflow:hidden}
body.mx .mx-vip-next__bar i{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--mx-blue) 0 6px,#3f67ee 6px 12px);border-radius:999px}
body.mx .mx-vip-next__text{font-size:12px;line-height:1.3;color:var(--mx-muted)}
body.mx .mx-vip-next__text b{color:var(--mx-navy)}
@media (max-width:991px){
  body.mx .mx-me__hi{flex-wrap:wrap}
  body.mx .mx-vip-next{order:5;flex:1 0 100%;max-width:none}
}

/* bảng cấp độ VIP: <div data-mx-vip="ladder"> (trang Dịch vụ, Đăng ký, Tài khoản) */
body.mx .mx-vip{margin:0 0 26px;padding:18px 18px 20px;border:2px solid var(--mx-navy);border-radius:24px;background:var(--mx-paper);box-shadow:0 6px 0 var(--mx-navy)}
body.mx .mx-vip[hidden]{display:none}
body.mx .mx-vip__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
body.mx .mx-vip__head b{display:block;font:800 19px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mx-vip__head span{display:block;font-size:13.5px;line-height:1.45;color:var(--mx-muted)}
body.mx .mx-vip__crown{flex:none;display:grid;place-items:center;width:44px;height:44px;border:2px solid var(--mx-navy);border-radius:14px;background:linear-gradient(135deg,var(--mx-sun) 50%,#ffe39a 50%);color:var(--mx-navy);font-size:18px;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .mx-vip__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:0;padding:0;list-style:none;counter-reset:none}
body.mx .mx-vip__steps li{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:2px solid var(--mx-line);border-radius:16px;background:#fff}
body.mx .mx-vip__steps b{font:800 15px/1.2 var(--mx-sans);color:var(--mx-navy)}
body.mx .mx-vip__steps em{font:800 24px/1.1 var(--mx-display);font-style:normal;font-variation-settings:"SOFT" 100;color:var(--mx-blue)}
body.mx .mx-vip__steps small{font-size:12px;color:var(--mx-muted)}
body.mx .mx-vip__steps li:last-child{background:linear-gradient(135deg,#fff 55%,#fff3cf 55%)}
body.mx .mx-vip__steps .is-done{border-color:rgba(18,163,107,.35);background:#f1fbf6}
body.mx .mx-vip__steps .is-current{border-color:var(--mx-navy);background:var(--mx-sun);box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mx-vip__steps .is-current em{color:var(--mx-navy)}
body.mx .mx-vip__steps .is-current:after{content:"✓";position:absolute;top:-10px;right:-8px;display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-navy);color:#fff;font:800 12px/1 var(--mx-sans)}
@media (max-width:480px){body.mx .mx-vip__steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* chấm đỏ số ticket có trả lời mới, cạnh mục Hỗ trợ trên menu */
body.mx .mx-navdot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:999px;background:var(--mx-coral);color:#fff;font:800 11px/1 var(--mx-sans);vertical-align:1px;box-shadow:0 0 0 2px var(--mx-paper)}

/* ===== 10-auth.css ===== */
/* 10-auth: đăng nhập (trang chủ của khách), đăng ký, quên mật khẩu, đặt mật khẩu mới, 2FA, xác nhận email.
   Mọi quy tắc nằm dưới .mxa (khung ngoài cùng của các trang này) nên không ảnh hưởng trang khác.
   Lưu ý: Bootstrap 3 đặt html{font-size:10px} nên ở đây chỉ dùng px/em, không dùng rem. */

/* ---------- khung chung ---------- */
body.mx .mxa{position:relative;isolation:isolate;overflow:hidden;margin-top:-24px;padding:22px 0 56px}
@supports (overflow:clip){body.mx .mxa{overflow:clip}}
@media (min-width:768px){body.mx .mxa{margin-top:-36px;padding:40px 0 84px}}

/* thẻ form */
body.mx .mxa .mxa-card{position:relative;z-index:2;margin:0;padding:24px 20px 22px;border-radius:28px;box-shadow:0 8px 0 var(--mx-navy)}
@media (min-width:480px){body.mx .mxa .mxa-card{padding:30px 30px 26px}}
body.mx .mxa .mxa-card__head{margin:0 0 18px}
body.mx .mxa .mxa-card__head h2{margin:0;font-size:30px;line-height:1.1}
body.mx .mxa .mxa-card__head p{margin:5px 0 0;font-size:15px;line-height:1.45;color:var(--mx-muted)}
body.mx .mxa .mxa-card .form-group{margin-bottom:16px}
body.mx .mxa .mxa-card .control-label{display:block;line-height:22px}
body.mx .mxa .mxa-card .alert{margin-bottom:18px;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .mxa .mxa-card .alert-danger{border-left-width:8px;border-left-color:var(--mx-coral)}
body.mx .mxa .mxa-card .alert-success{border-left-width:8px;border-left-color:var(--mx-green)}
body.mx .mxa .alert-dismissible{padding-right:44px}
body.mx .mxa .alert-dismissible .close{top:-4px;right:-26px}
body.mx .mxa .rtl-alert.alert-dismissible,body.mx .mxa .rtl-form .alert-dismissible{padding-right:18px;padding-left:44px}

/* "Quên mật khẩu?" lên cùng hàng với nhãn Mật khẩu (panel mặc định đặt đè trong ô nhập) */
body.mx .mxa .form-group__password{position:relative}
body.mx .mxa .form-group__password .control-label{padding-right:130px}
body.mx .mxa .forgot-password{position:absolute;top:0;right:0;bottom:auto;left:auto;line-height:22px;font-size:13.5px;font-weight:600;color:var(--mx-blue);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:rgba(31,75,224,.35);text-underline-offset:4px}
body.mx .mxa .forgot-password:hover{color:var(--mx-navy);text-decoration-color:var(--mx-sun)}
body.mx .mxa .rtl-form .form-group__password .control-label{padding-right:0;padding-left:130px}
body.mx .mxa .rtl-form .forgot-password{right:auto;left:0}

/* hàng nút: bỏ lưới 2 cột của bản gốc, xếp dọc trong thẻ */
body.mx .mxa .mxa-actions{margin:6px 0 0}
body.mx .mxa .mxa-actions>[class*="col-"]{float:none;width:auto;padding:0}
body.mx .mxa .mxa-actions .form-inline .form-group{display:block;margin:0}
body.mx .mxa .mxa-submit .btn{display:block;width:100%;min-height:54px;padding:14px 24px;font-size:16.5px;box-shadow:0 5px 0 var(--mx-navy)}
body.mx .mxa .mxa-submit .btn:hover,body.mx .mxa .mxa-submit .btn:focus{box-shadow:0 7px 0 var(--mx-navy)}
body.mx .mxa .mxa-submit .btn:active{box-shadow:0 2px 0 var(--mx-navy)}
body.mx .mxa .mxa-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-size:13.5px;font-weight:600;color:var(--mx-muted)}
body.mx .mxa .mxa-or:before,body.mx .mxa .mxa-or:after{content:"";flex:1;height:2px;border-radius:2px;background:var(--mx-line)}
body.mx .mxa .g_id_signin{display:flex;justify-content:center;min-height:44px;max-width:100%}
body.mx .mxa .mxa-switch{margin-top:20px;padding-top:16px;border-top:2px dashed var(--mx-line);text-align:center}
body.mx .mxa .mxa-switch .pull-right-middle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;line-height:1.4;font-size:15px;color:var(--mx-muted)}
body.mx .mxa .mxa-switch a{display:inline-flex;align-items:center;min-height:42px;padding:0 20px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-sun);box-shadow:0 3px 0 var(--mx-navy);font-weight:700;color:var(--mx-navy);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
body.mx .mxa .mxa-switch a:hover,body.mx .mxa .mxa-switch a:focus{transform:translateY(-2px);box-shadow:0 5px 0 var(--mx-navy);color:var(--mx-navy)}
body.mx .mxa .mxa-terms .checkbox{margin:0}
body.mx .mxa .mxa-terms label{line-height:1.5}
/* reCAPTCHA rộng cố định 304px: thu nhỏ trên màn rất hẹp để không tràn thẻ */
@media (max-width:379px){body.mx .mxa .g-recaptcha{transform:scale(.88);transform-origin:0 0;margin-bottom:-8px}}

/* ---------- trang chủ khách / đăng ký: khối hero ---------- */
body.mx .mxa-hero{--mxa-art:clamp(92px,26vw,150px)}
body.mx .mxa-grid{position:relative;display:flex;flex-direction:column;gap:26px}
body.mx .mxa-head{order:1;min-width:0}
body.mx .mxa-cardcol{order:2;position:relative;min-width:0}
body.mx .mxa-notice{order:3}
body.mx .mxa-more{order:4;min-width:0}
body.mx .mxa-stats{order:5}

/* hình mặt Picasso trên chiếc đĩa + mảng xanh phía sau */
body.mx .mxa-art{position:absolute;z-index:1;top:-2px;right:-6px;width:var(--mxa-art)}
body.mx .mxa-art:before{content:"";position:absolute;z-index:-1;left:32%;top:-100vh;bottom:-6px;width:100vw;background:var(--mx-blue);border-bottom-left-radius:44px}
body.mx .mxa-plate{display:block;width:100%;height:auto;overflow:visible}
body.mx .mxa-head:before{content:"";float:right;width:calc(var(--mxa-art) - 4px);height:calc(var(--mxa-art) + 4px);margin-left:12px}

/* chữ giới thiệu */
body.mx .mxa-note{margin:2px 0 10px;font:600 14px/1.4 var(--mx-sans);color:var(--mx-navy);text-wrap:balance}
body.mx .mxa-note:before{content:"";display:inline-block;width:9px;height:9px;margin:0 9px 0 2px;border-radius:50%;background:var(--mx-sun);box-shadow:0 0 0 2px var(--mx-navy);vertical-align:.08em}
body.mx .mxa-title{margin:0;color:var(--mx-navy);font-variant-numeric:lining-nums}
body.mx .mxa-h1a{display:block;text-wrap:balance;font-weight:650;font-size:clamp(21px,15px + 1.6vw,34px);line-height:1.22;letter-spacing:-.01em}
body.mx .mxa-h1b{display:block;clear:right;margin-top:.06em;font-weight:800;font-size:min(13.4vw,96px);line-height:1;letter-spacing:-.025em;color:var(--mx-blue);white-space:nowrap}
body.mx .mxa-lead{margin:0;max-width:30em;font-size:clamp(16px,15px + .4vw,19px);line-height:1.55;color:var(--mx-muted)}
body.mx .mxa-old{margin:14px 0 0;font:500 14.5px/1.5 var(--mx-sans);color:var(--mx-muted)}
body.mx .mxa-strike{position:relative;display:inline-block;font-weight:700;color:var(--mx-navy)}
body.mx .mxa-strike:after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:3px;border-radius:3px;background:var(--mx-coral);transform:rotate(-4deg)}
body.mx .mxa a.mxa-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:6px;font-weight:700;color:var(--mx-navy);text-decoration:none}
body.mx .mxa .mxa-link span{text-decoration:underline;text-decoration-color:var(--mx-sun);text-decoration-thickness:4px;text-underline-offset:6px}
body.mx .mxa .mxa-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
body.mx .mxa a.mxa-link:hover{color:var(--mx-blue)}
body.mx .mxa .mxa-link:hover svg{transform:translateX(3px)}

/* các bước (trang đăng ký) */
body.mx .mxa-steps{margin:0 0 22px;padding:0;list-style:none;counter-reset:mxa}
body.mx .mxa-steps li{position:relative;min-height:44px;padding:2px 0 0 60px;counter-increment:mxa}
body.mx .mxa-steps li+li{margin-top:16px}
body.mx .mxa-steps li:before{content:counter(mxa);position:absolute;left:3px;top:0;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--mx-blue);color:#fff;font:800 19px/1 var(--mx-display);font-variation-settings:"SOFT" 100;box-shadow:0 0 0 3px var(--mx-cream),0 0 0 5px var(--mx-navy)}
body.mx .mxa-steps li:nth-child(2):before{background:var(--mx-sun);color:var(--mx-navy)}
body.mx .mxa-steps li:nth-child(3):before{background:var(--mx-coral)}
body.mx .mxa-steps li:not(:last-child):after{content:"";position:absolute;left:22px;top:48px;bottom:-14px;border-left:2px dashed rgba(10,26,68,.3)}
body.mx .mxa-steps b{display:block;font-weight:700;font-size:16.5px;line-height:1.35;color:var(--mx-navy)}
body.mx .mxa-steps span{display:block;font-size:14.5px;line-height:1.45;color:var(--mx-muted)}

/* thông báo của quản trị (authText) */
body.mx .mxa-notice{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:2px solid var(--mx-navy);border-radius:22px;background:#fff3cf;box-shadow:0 5px 0 var(--mx-navy);color:var(--mx-navy)}
body.mx .mxa-notice__pin{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid var(--mx-navy);border-radius:14px;background:var(--mx-paper);transform:rotate(-6deg)}
body.mx .mxa-notice__pin svg{display:block;width:32px;height:32px}
body.mx .mxa-notice__body{flex:1 1 auto;min-width:0;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
body.mx .mxa-notice__body .row{margin:0}
body.mx .mxa-notice__body [class*="col-"]{float:none;width:auto;margin:0;padding:0}
body.mx .mxa-notice__body .alert{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;text-align:left}
body.mx .mxa-notice__body p:last-child,body.mx .mxa-notice__body .alert:last-child{margin-bottom:0}
body.mx .mxa-notice__body strong{font-weight:700}
body.mx .mxa-notice__body a{font-weight:700;color:var(--mx-blue-d);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
body.mx .mxa-notice__body img{max-width:100%;height:auto}

/* số liệu */
body.mx .mxa-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding-top:18px;border-top:2px solid var(--mx-line)}
body.mx .mxa-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;min-width:0;padding-left:12px;border-left:3px solid var(--mx-sun)}
body.mx .mxa-stats div+div{margin-left:10px}
body.mx .mxa-stats dd{margin:0;font:800 clamp(20px,12px + 2.6vw,34px)/1.05 var(--mx-display);font-variation-settings:"SOFT" 100;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;color:var(--mx-blue);white-space:nowrap}
body.mx .mxa-stats dt{margin:3px 0 0;font:500 13.5px/1.3 var(--mx-sans);color:var(--mx-muted)}

@media (max-width:359px){
  body.mx .mxa-stats div{padding-left:8px}
  body.mx .mxa-stats div+div{margin-left:6px}
}
@media (min-width:560px){
  /* điện thoại ngang: chữ MAXYTB.VN đứng cạnh chiếc đĩa, không xuống dòng dưới đĩa */
  body.mx .mxa-hero{--mxa-art:25vw}
  body.mx .mxa-h1b{clear:none;font-size:calc(12.5vw - 7px)}
}
@media (min-width:768px) and (max-width:991px){
  /* máy tính bảng: thẻ bên trái, thông báo + giới thiệu bên phải */
  body.mx .mxa-hero{--mxa-art:180px}
  body.mx .mxa-h1b{font-size:86px}
  body.mx .mxa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,250px);grid-template-areas:"head head" "card notice" "card more" "card ." "stats stats";grid-template-rows:auto auto auto 1fr auto;column-gap:32px;row-gap:0}
  body.mx .mxa-head{grid-area:head;margin-bottom:28px}
  body.mx .mxa-cardcol{grid-area:card;max-width:none}
  body.mx .mxa-notice{grid-area:notice;flex-direction:column;margin-bottom:24px}
  body.mx .mxa-more{grid-area:more}
  body.mx .mxa-stats{grid-area:stats;margin-top:36px}
  body.mx .mxa-lead{font-size:16px}
}
@media (min-width:992px){
  body.mx .mxa-hero{padding:44px 0 116px}
  body.mx .mxa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:". card" "head card" "more card" "notice card" "stats card" ". card";grid-template-rows:minmax(40px,1fr) auto auto auto auto minmax(0,2fr);column-gap:clamp(40px,5vw,88px);row-gap:0}
  body.mx .mxa-head{grid-area:head}
  body.mx .mxa-head:before{display:none}
  body.mx .mxa-more{grid-area:more;margin-top:18px}
  body.mx .mxa-notice{grid-area:notice;margin-top:28px}
  body.mx .mxa-stats{grid-area:stats;margin-top:34px}
  body.mx .mxa-cardcol{grid-area:card;max-width:none;padding-top:150px}
  body.mx .mxa-cardcol:before{content:"";position:absolute;z-index:-1;left:34%;top:-100vh;bottom:-64px;width:100vw;background:var(--mx-blue);border-bottom-left-radius:72px}
  body.mx .mxa-h1b{font-size:clamp(62px,6.4vw,90px)}
  body.mx .mxa-art{top:-8px;right:-10px;width:260px}
  body.mx .mxa-stats dd{font-size:clamp(26px,2.5vw,34px)}
  body.mx .mxa-art:before{display:none}
  body.mx .mxa-hero .mxa-card{padding:28px 32px 24px}
}
@media (min-width:1200px){
  body.mx .mxa-art{right:-40px;width:290px}
  body.mx .mxa-cardcol{padding-top:160px}
}

/* ---------- các trang một thẻ (quên / đặt mật khẩu, 2FA, xác nhận email) ---------- */
body.mx .mxa-box:before{content:"";position:absolute;z-index:-1;top:0;right:0;width:44%;height:170px;background:var(--mx-blue);border-bottom-left-radius:44px}
body.mx .mxa-box:after{content:"";position:absolute;z-index:-1;top:26px;left:-34px;width:84px;height:84px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-sun) 50%,var(--mx-coral) 50%)}
body.mx .mxa-box__wrap{position:relative;max-width:540px;margin:0 auto;padding-top:36px}
body.mx .mxa-box .mxa-card{padding-top:32px}
body.mx .mxa-badge{position:absolute;z-index:3;top:-42px;right:18px;display:block;width:66px;height:66px}
body.mx .mxa-badge svg{display:block;width:100%;height:100%;overflow:visible}
body.mx .mxa .mxa-card__title{margin:0 0 8px;padding-right:0;font:800 28px/1.12 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--mx-navy)}
body.mx .mxa .mxa-card__sub{margin:0 0 20px;padding-bottom:18px;border-bottom:2px dashed var(--mx-line);font-size:15px;line-height:1.5;color:var(--mx-muted)}
body.mx .mxa-box form>.btn-primary{display:block;width:100%;min-height:54px;margin-top:4px;padding:14px 24px;font-size:16.5px;box-shadow:0 5px 0 var(--mx-navy)}
body.mx .mxa-box form>.btn-primary:hover,body.mx .mxa-box form>.btn-primary:focus{box-shadow:0 7px 0 var(--mx-navy)}
body.mx .mxa-box form>.btn-primary:active{box-shadow:0 2px 0 var(--mx-navy)}
body.mx .mxa .mxa-back{margin:18px 0 0;padding-top:14px;border-top:2px dashed var(--mx-line);text-align:center}
body.mx .mxa .mxa-back a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--mx-navy);text-decoration:none}
body.mx .mxa .mxa-back a span{text-decoration:underline;text-decoration-color:var(--mx-sun);text-decoration-thickness:3px;text-underline-offset:5px}
body.mx .mxa .mxa-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.mx .mxa .mxa-back a:hover{color:var(--mx-blue)}

/* 2FA: ô mã to, chữ giãn cách */
body.mx .mx-p-2fa #code{height:62px;font:700 26px/1 var(--mx-sans);letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

/* xác nhận email: căn giữa */
body.mx .mx-p-confirmemail .mxa-card{margin-top:0;padding-top:48px;text-align:center}
body.mx .mx-p-confirmemail .mxa-badge{left:50%;right:auto;top:-36px;margin-left:-38px;width:76px;height:76px}
body.mx .mx-p-confirmemail .mxa-card .row{margin:0}
body.mx .mx-p-confirmemail .mxa-card [class*="col-"]{float:none;width:auto;padding:0}
body.mx .mx-p-confirmemail .mxa-card__title{padding:0;margin:0 0 10px;font-size:28px}
body.mx .mx-p-confirmemail .confirm-email__description{margin:0 auto 22px;max-width:30em;padding-bottom:20px;border-bottom:2px dashed var(--mx-line);font-size:15.5px;line-height:1.55;color:var(--mx-muted)}
body.mx .mx-p-confirmemail .mxa-mail{margin-bottom:6px;color:var(--mx-ink)}
body.mx .mx-p-confirmemail .mxa-mail b{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--mx-sky);color:var(--mx-navy);font-weight:700;overflow-wrap:anywhere}
body.mx .mx-p-confirmemail .confirm-email__action{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 16px}
body.mx .mx-p-confirmemail .confirm-email__action .btn-primary{min-height:52px;padding:13px 28px}
body.mx .mx-p-confirmemail .confirm-email__action .btn-link{min-height:44px;padding:10px 12px;font-weight:700}
body.mx .mxa-modal .form-control[disabled]{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:768px){
  body.mx .mxa-box{padding:48px 0 96px}
  body.mx .mxa-box:before{width:calc(50% - 90px);height:62%;min-height:300px;border-bottom-left-radius:72px}
  body.mx .mxa-box:after{top:96px;left:calc(50% - 360px);width:118px;height:118px}
  body.mx .mxa-box__wrap{padding-top:34px}
  body.mx .mxa-box .mxa-card{padding:40px 40px 32px}
  body.mx .mxa .mxa-card__title{padding-right:72px;font-size:32px}
  body.mx .mxa-badge{top:-36px;right:30px;width:84px;height:84px}
  body.mx .mx-p-confirmemail .mxa-card{padding-top:58px}
  body.mx .mx-p-confirmemail .mxa-badge{top:-44px;margin-left:-44px;width:88px;height:88px}
}
/* chấm tròn vàng trang trí trên mảng xanh (máy tính) */
@media (min-width:992px){
  body.mx .mxa-box__wrap:after{content:"";position:absolute;z-index:-1;top:70px;right:-150px;width:96px;height:52px;background:radial-gradient(circle,var(--mx-sun) 5px,transparent 6px) 0 0/24px 26px}
}

/* ---------- chuyển động nhẹ ---------- */
@media (prefers-reduced-motion:no-preference){
  body.mx .mxa-plate{transform-origin:50% 50%;animation:mxa-wheel 1.2s cubic-bezier(.2,.8,.2,1) both}
  body.mx .mxa-strike:after{transform-origin:0 50%;animation:mxa-strike .5s .6s cubic-bezier(.7,0,.3,1) both}
}
@keyframes mxa-wheel{from{opacity:0;transform:rotate(-32deg) scale(.86)}to{opacity:1;transform:none}}
@keyframes mxa-strike{from{transform:rotate(-4deg) scaleX(0)}to{transform:rotate(-4deg) scaleX(1)}}

/* ===== 20-orders.css ===== */
/* MAXYTB.VN · theme Picasso
   20-orders: thanh điều hướng khi đã đăng nhập + nhóm trang đơn hàng
   (đặt hàng mới, đặt hàng loạt, đơn hàng, nhỏ giọt, gói đăng ký, refill, hoàn tiền, cập nhật dịch vụ).
   Mọi lớp riêng bắt đầu bằng .mxo- ; thanh điều hướng chỉ nhắm body.mx.mx-auth. */

/* =====================================================================
   1. THANH ĐIỀU HƯỚNG (ĐÃ ĐĂNG NHẬP)
   script.js của panel cộng bề rộng logo + 2 khối menu; nếu lớn hơn màn hình thì
   thêm .navbar-collapsed (#navbar) + .navbar-collapsed-before (nav) → hiện nút ☰.
   Vì vậy ở 1200–1759px menu dùng dạng "khay" gọn: biểu tượng trên, chữ dưới,
   đủ hẹp để không bị thu gọn ở 1280/1366/1440. Từ 1760px: biểu tượng + chữ nằm ngang.
   ===================================================================== */
@media (min-width:768px){
  body.mx.mx-auth .navbar-default{min-height:80px}
  body.mx.mx-auth .navbar-default .navbar-brand{height:80px}
  /* menu mở rộng (chưa bị thu gọn) → xếp hàng ngang bằng flex, không bao giờ rớt dòng */
  body.mx.mx-auth #navbar.navbar-collapse.collapse{display:flex!important;align-items:center;min-height:80px}
  body.mx.mx-auth #navbar.navbar-collapse::before,body.mx.mx-auth #navbar.navbar-collapse::after{display:none}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-nav{float:none;flex:none}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-nav>li{float:none}
  /* khay menu chính */
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block{display:flex;align-items:stretch;gap:2px;margin:0 0 0 6px;padding:3px;background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:18px;box-shadow:0 3px 0 var(--mx-navy)}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:100%;margin:0;padding:7px 8px 6px;border-radius:13px;font-size:12.5px;font-weight:700;line-height:1.15;letter-spacing:0;text-align:center;white-space:nowrap}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block .navbar-icon{margin:0;font-size:15px;line-height:1;opacity:.8}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li>a:hover,body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li>a:focus{background:var(--mx-sky);color:var(--mx-navy)}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li.active>a{background:var(--mx-navy);color:#fff}
  body.mx.mx-auth #navbar .navbar-left-block>li.active>a .navbar-icon{color:var(--mx-sun);opacity:1}
  /* khối tài khoản bên phải */
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block{display:flex;align-items:center;gap:2px;margin:0 -15px 0 auto;padding-left:12px}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>li>a{margin:0;padding:8px 10px;font-size:13.5px;font-weight:700;border-radius:999px;white-space:nowrap}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>li:last-child>a{color:var(--mx-muted)}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>li:last-child>a:hover{color:#b3321a}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>.dropdown-currencies>a{padding:6px 6px 6px 4px}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>.dropdown-currencies>a:hover .badge{box-shadow:0 3px 0 var(--mx-navy);transform:translateY(-1px)}
  body.mx.mx-auth .navbar .badge{box-shadow:0 2px 0 var(--mx-navy);transition:transform .15s,box-shadow .15s}
  body.mx.mx-auth #navbar .dropdown-currencies .dropdown-menu{min-width:130px;right:0;left:auto}
}
/* 768–1365px: chữ nhỏ hơn một chút để khay vừa màn 1280px mà không bị thu gọn */
@media (min-width:768px) and (max-width:1365px){
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li>a{padding:7px 6px 6px;font-size:11.5px}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-right-block>li>a{padding:8px 8px;font-size:13px}
}
@media (min-width:1760px){
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block{border-radius:999px;margin-left:14px}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block>li>a{flex-direction:row;gap:7px;padding:9px 13px;border-radius:999px;font-size:14px}
  body.mx.mx-auth #navbar.navbar-collapse .navbar-left-block .navbar-icon{font-size:14px}
}

/* lớp clearfix (::before/::after) của .nav sẽ thành ô trống trong lưới/flex → tắt đi */
body.mx.mx-auth #navbar .navbar-nav::before,body.mx.mx-auth #navbar .navbar-nav::after{display:none}

/* menu bị panel thu gọn (màn 768px trở lên nhưng không đủ chỗ) → bấm ☰ mở ra lưới ô */
@media (min-width:768px){
  body.mx.mx-auth nav.navbar-collapsed-before .navbar-header{float:none}
  body.mx.mx-auth nav.navbar-collapsed-before .navbar-brand{margin-left:-15px}
  body.mx.mx-auth #navbar.navbar-collapsed{clear:both;margin:0 -15px;padding:16px 15px 22px;border-top:2px dashed var(--mx-line)}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px;float:none;width:auto;margin:0 0 14px}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-nav>li{float:none;width:auto}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block>li>a{display:flex;align-items:center;gap:10px;height:100%;margin:0;padding:9px 12px;border:2px solid var(--mx-navy);border-radius:14px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);font-size:14.5px;line-height:1.25;transition:transform .15s,box-shadow .15s}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block>li>a:hover{background:var(--mx-sky);transform:translateY(-1px);box-shadow:0 4px 0 var(--mx-navy)}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block>li.active>a{background:var(--mx-navy);color:#fff}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block .navbar-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;margin:0;border-radius:9px;background:var(--mx-sky);color:var(--mx-blue-d);font-size:14px;opacity:1}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-left-block>li.active>a .navbar-icon{background:var(--mx-blue);color:var(--mx-sun)}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block{display:flex;flex-wrap:wrap;align-items:center;gap:8px;float:none!important;width:auto;margin:0;padding-top:14px;border-top:2px dashed var(--mx-line)}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>li{width:auto}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>li>a{margin:0;padding:8px 16px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);font-size:14px}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>.dropdown-currencies>a{padding:4px 12px 4px 4px;background:var(--mx-sun)}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>.dropdown-currencies .badge{border:0;box-shadow:none;padding:6px 8px}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>li:last-child{margin-left:auto}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>li:last-child>a{border-color:transparent;background:transparent;color:var(--mx-muted)}
  body.mx.mx-auth #navbar.navbar-collapsed .dropdown-currencies.open{flex-basis:100%}
  body.mx.mx-auth #navbar.navbar-collapsed .navbar-right-block>.dropdown-currencies>a{display:inline-flex;align-items:center;gap:4px}
  body.mx.mx-auth #navbar.navbar-collapsed .dropdown-currencies.open .dropdown-menu{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0}
  body.mx.mx-auth #navbar.navbar-collapsed .dropdown-currencies.open .dropdown-menu>li>a{padding:6px 14px;border:2px solid var(--mx-navy);border-radius:999px;color:var(--mx-navy)}
  body.mx.mx-auth #navbar.navbar-collapsed .dropdown-currencies.open .dropdown-menu>.active>a{background:var(--mx-navy);color:#fff}
}

/* điện thoại: menu mở ra thành lưới 2 cột */
@media (max-width:767px){
  body.mx.mx-auth #navbar .navbar-left-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 12px}
  body.mx.mx-auth #navbar .navbar-left-block>li>a{display:flex;align-items:center;gap:9px;height:100%;margin:0;padding:8px 10px;border:2px solid var(--mx-navy);border-radius:14px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);font-size:14px;line-height:1.25}
  body.mx.mx-auth #navbar .navbar-left-block>li.active>a{background:var(--mx-navy);color:#fff}
  body.mx.mx-auth #navbar .navbar-left-block .navbar-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0;border-radius:8px;background:var(--mx-sky);color:var(--mx-blue-d);font-size:13px;opacity:1}
  body.mx.mx-auth #navbar .navbar-left-block>li.active>a .navbar-icon{background:var(--mx-blue);color:var(--mx-sun)}
  body.mx.mx-auth #navbar .navbar-right-block{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:12px 0 4px;border-top:2px dashed var(--mx-line)}
  body.mx.mx-auth #navbar .navbar-right-block>li>a{margin:0;padding:8px 14px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);font-size:14px}
  body.mx.mx-auth #navbar .navbar-right-block>.dropdown-currencies>a{padding:3px 12px 3px 3px;background:var(--mx-sun)}
  body.mx.mx-auth #navbar .navbar-right-block>.dropdown-currencies .badge{border:0;padding:6px 8px}
  body.mx.mx-auth #navbar .navbar-right-block>li:last-child{margin-left:auto}
  body.mx.mx-auth #navbar .navbar-right-block>li:last-child>a{border-color:transparent;background:transparent;color:var(--mx-muted)}
  body.mx.mx-auth #navbar .dropdown-currencies.open{flex-basis:100%}
  body.mx.mx-auth #navbar .dropdown-currencies.open .dropdown-menu{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 0}
  body.mx.mx-auth #navbar .dropdown-currencies.open .dropdown-menu>li>a{padding:6px 14px;border:2px solid var(--mx-navy);border-radius:999px;color:var(--mx-navy);background:var(--mx-paper)}
  body.mx.mx-auth #navbar .dropdown-currencies.open .dropdown-menu>.active>a{background:var(--mx-navy);color:#fff}
  body.mx.mx-auth #navbar .navbar-right-block>.dropdown-currencies>a{display:inline-flex;align-items:center;gap:4px}
}

/* =====================================================================
   2. KHUNG CHUNG CỦA NHÓM TRANG
   ===================================================================== */
body.mx .mxo-page{padding-bottom:12px}
body.mx .mxo-hist.container-fluid{max-width:1480px}
body.mx .mxo-kicker{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 12.5px/1.3 var(--mx-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mxo-kicker::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--mx-sun);box-shadow:0 0 0 2px var(--mx-navy)}
body.mx .mxo-tag{display:inline-block;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:var(--mx-navy);color:var(--mx-paper);font:800 11.5px/1.35 var(--mx-sans);letter-spacing:.1em;text-transform:uppercase}

/* đầu trang: tiêu đề + nút + hình lập thể */
body.mx .mxo-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:0 0 22px}
body.mx .mxo-head__txt{flex:1 1 300px;min-width:0}
body.mx .mxo-head__title{margin:0;text-wrap:balance;font-size:clamp(28px,1.6vw + 20px,42px)}
body.mx .mxo-head__sub{margin:8px 0 0;max-width:42em;color:var(--mx-muted);font-size:15px;line-height:1.5}
body.mx .mxo-head__cta{flex:none}
body.mx .mxo-head__art{display:none;flex:none;width:150px;height:auto}
@media (min-width:768px){
  body.mx .mxo-head{margin-bottom:26px}
  body.mx .mxo-head__art{display:block}
}
@media (max-width:767px){
  body.mx .mxo-head__cta{padding:10px 18px;font-size:14.5px}
}

/* tab lọc trạng thái + ô tìm kiếm */
body.mx .mxo-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:0}
body.mx .mxo-tabs::before,body.mx .mxo-tabs::after{display:none}
body.mx .mxo-tabs>li{float:none;margin:0}
body.mx .mxo-tabs>li>a{padding:8px 16px;border:2px solid var(--mx-navy);background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);font-size:14px;line-height:1.3;transition:transform .15s,box-shadow .15s,background-color .15s}
body.mx .mxo-tabs>li>a:hover,body.mx .mxo-tabs>li>a:focus{background:var(--mx-sky);transform:translateY(-1px);box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mxo-tabs>li.active>a,body.mx .mxo-tabs>li.active>a:hover,body.mx .mxo-tabs>li.active>a:focus{background:var(--mx-navy);color:#fff;transform:none;box-shadow:0 3px 0 var(--mx-blue)}
body.mx .mxo-tabs>li.mxo-search{float:none!important;width:300px;max-width:100%;margin-left:auto}
body.mx .mxo-search .form-control{height:46px;background:var(--mx-paper);border-color:var(--mx-navy);border-width:2px}
body.mx .mxo-search .input-group-btn:last-child>.btn{height:46px;padding:0 16px;background:var(--mx-sun)}
body.mx .mxo-search .input-group-btn:last-child>.btn:hover{background:#ffd666}
@media (max-width:767px){
  body.mx .mxo-tabs{margin-bottom:18px}
  body.mx .mxo-tabs>li{flex:1 1 auto}
  body.mx .mxo-tabs>li>a{display:flex;align-items:center;justify-content:center;height:100%;padding:8px 10px;font-size:13.5px;text-align:center}
  body.mx .mxo-tabs>li.mxo-search{order:-1;flex:1 0 100%;width:auto;margin:0 0 4px}
}

/* thẻ bảng: cuộn ngang bên trong thẻ, không bao giờ làm cả trang cuộn ngang */
body.mx .well-float.mxo-card{float:none;width:auto;min-width:0;padding:0;margin-bottom:26px}
body.mx .mxo-scroll{overflow-x:auto;border-radius:calc(var(--mx-r) - 2px);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  /* bóng mờ ở mép khi bảng còn cột bị che (chỉ hiện khi cuộn được) */
  background:linear-gradient(to right,var(--mx-paper) 30%,rgba(255,253,248,0)) left top/36px 100% no-repeat local,linear-gradient(to left,var(--mx-paper) 30%,rgba(255,253,248,0)) right top/36px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(10,26,68,.22),rgba(10,26,68,0)) left top/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(10,26,68,.22),rgba(10,26,68,0)) right top/14px 100% no-repeat scroll}
body.mx .mxo-table{min-width:100%;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none}
body.mx .mxo-table>thead>tr>th{padding:14px 12px;font-size:12px}
/* bảng 11–12 cột: cho tiêu đề cột xuống dòng để vừa màn 1366px */
body.mx .mxo-table--drip>thead>tr>th,body.mx .mxo-table--subs>thead>tr>th{white-space:normal}
body.mx .mxo-table--subs .mxo-c-svc{min-width:180px}
body.mx .mxo-table--subs .link{min-width:130px}
body.mx .mxo-table>thead>tr>th:first-child,body.mx .mxo-table>tbody>tr>td:first-child{padding-left:20px}
body.mx .mxo-table>tbody>tr>td{padding:14px 12px;border-top:1px solid var(--mx-line);font-size:14.5px;line-height:1.45}
body.mx .mxo-table>tbody>tr:first-child>td{border-top:0}
/* góc bo do .mxo-scroll cắt theo khung thẻ, không cần bo từng ô góc */
body.mx .mxo-table>thead>tr>th,body.mx .mxo-table>tbody>tr>td{border-radius:0!important}
body.mx .mxo-table>tbody>tr.mxo-row:hover{background:#fff8e4}
body.mx .mxo-table>tbody>tr.mxo-row>td:first-child{box-shadow:inset 5px 0 0 var(--st,transparent)}
body.mx .mxo-table td:empty::after{content:"—";color:#a3a9bd}
body.mx .mxo-table .width-40{width:19%!important;min-width:170px}
body.mx .mxo-table .link{min-width:160px}
body.mx .mxo-c-id{font-weight:800;color:var(--mx-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mxo-c-id::after{content:none}
body.mx .mxo-c-date,body.mx .mxo-c-cr,body.mx .mxo-c-up,body.mx .mxo-c-exp{min-width:124px;color:var(--mx-muted);font-size:13px!important;font-variant-numeric:tabular-nums}
body.mx .mxo-c-cr .nowrap,body.mx .mxo-c-up .nowrap,body.mx .mxo-c-exp .nowrap{white-space:normal}
body.mx .mxo-c-link{color:#34406a;font-size:13.5px!important;word-break:break-all}
body.mx .mxo-c-chg,body.mx .mxo-c-amt{font-weight:700;color:var(--mx-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mxo-c-svc{min-width:210px;font-weight:600;color:var(--mx-navy)}
body.mx .mxo-c-start,body.mx .mxo-c-qty,body.mx .mxo-c-rem,body.mx .mxo-c-runs,body.mx .mxo-c-int,body.mx .mxo-c-tot,body.mx .mxo-c-new,body.mx .mxo-c-old,body.mx .mxo-c-delay{white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mxo-c-runs a,body.mx .mxo-c-new a,body.mx .mxo-c-old a,body.mx .mxo-c-ord a,body.mx .mxo-p-refunds .mxo-c-id a{font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--mx-sun)}
body.mx .mxo-c-st .fas,body.mx .mxo-c-st [data-toggle="tooltip"]{margin-left:4px;color:var(--mx-muted);cursor:help}
body.mx .mxo-detail{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:4px;border-radius:8px;background:var(--mx-sky);color:var(--mx-blue-d);vertical-align:middle;text-decoration:none}
body.mx .mxo-detail:hover{background:var(--mx-sun);color:var(--mx-navy)}
body.mx .mxo-table .order-actions{width:auto;min-width:92px}
body.mx .mxo-c-act .btn{margin:2px 0}
body.mx .mxo-c-act .btn+.btn{margin-left:4px}
body.mx .mxo-note-inline{display:inline-block;font-size:12.5px;font-weight:700;color:var(--mx-muted);line-height:1.3}

/* viên trạng thái */
body.mx .mxo-st{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 8px;border-radius:999px;background:#eceff6;color:var(--mx-navy);font:700 12.5px/1.3 var(--mx-sans);white-space:nowrap}
body.mx .mxo-st::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--dot,currentColor)}
body.mx .mxo-st--pending{background:#fff1c9;color:#6e4a00;--dot:#f0a800}
body.mx .mxo-st--inprogress{background:var(--mx-sky);color:var(--mx-blue-d);--dot:var(--mx-blue)}
body.mx .mxo-st--processing{background:#fff;color:var(--mx-blue-d);box-shadow:inset 0 0 0 2px rgba(31,75,224,.45);--dot:conic-gradient(var(--mx-blue) 0 75%,transparent 0)}
body.mx .mxo-st--completed{background:#dcf3e8;color:#0b5e3f;--dot:var(--mx-green)}
body.mx .mxo-st--partial{background:#ffe8d9;color:#8f3510;--dot:linear-gradient(90deg,var(--mx-green) 50%,var(--mx-coral) 50%)}
body.mx .mxo-st--canceled{background:#ffe1d9;color:#a82e17;--dot:var(--mx-coral)}
body.mx .mxo-st--error{background:#ffe1d9;color:#a82e17;box-shadow:inset 0 0 0 2px rgba(255,107,74,.6);--dot:var(--mx-navy)}
body.mx .mxo-st--paused{background:#eceff6;color:var(--mx-navy);--dot:linear-gradient(90deg,var(--mx-navy) 0 35%,transparent 35% 65%,var(--mx-navy) 65%)}
body.mx .mxo-st--paused::before{border-radius:2px}
body.mx .mxo-st--expired{background:#eceff6;color:var(--mx-muted);--dot:transparent}
body.mx .mxo-st--expired::before{box-shadow:inset 0 0 0 2px var(--mx-muted)}
body.mx .mxo-row--pending{--st:var(--mx-sun)}
body.mx .mxo-row--inprogress{--st:var(--mx-blue)}
body.mx .mxo-row--processing{--st:#7fa2ff}
body.mx .mxo-row--completed{--st:var(--mx-green)}
body.mx .mxo-row--partial{--st:#ff9a3d}
body.mx .mxo-row--canceled,body.mx .mxo-row--error{--st:var(--mx-coral)}
body.mx .mxo-row--paused,body.mx .mxo-row--expired{--st:#b9bfd1}

/* dòng trống */
body.mx .mxo-table>tbody>tr.mxo-empty>td{padding:44px 20px;text-align:center;background:var(--mx-paper)}
body.mx .mxo-empty__art{display:block;width:96px;height:auto;margin:0 auto 12px}
body.mx .mxo-empty__title{margin:0 0 14px;font:800 20px/1.3 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mxo-empty__title:last-child{margin-bottom:0}

/* phân trang */
body.mx .mxo-pager{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0}
body.mx .mxo-pager>li{display:block}
body.mx .mxo-pager>li>a,body.mx .mxo-pager>li>span,body.mx .mxo-pager>li:first-child>a,body.mx .mxo-pager>li:last-child>a{float:none;display:grid;place-items:center;min-width:44px;height:44px;margin:0;padding:0 12px;border-radius:999px;box-shadow:0 3px 0 var(--mx-navy);font-variant-numeric:tabular-nums;transition:transform .15s,box-shadow .15s}
body.mx .mxo-pager>li>a:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mxo-pager>.active>a,body.mx .mxo-pager>.active>a:hover{transform:none}

/* dưới 1280px: mỗi dòng bảng thành một thẻ (1 cột trên điện thoại, 2 cột trên máy tính bảng/laptop nhỏ) */
@media (max-width:1279px){
  body.mx .mxo-hist .well-float.mxo-card{overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;margin-bottom:18px}
  body.mx .mxo-hist .mxo-scroll{overflow:visible;background:none;border-radius:0}
  body.mx .mxo-hist .mxo-table,body.mx .mxo-hist .mxo-table>tbody{display:block;width:100%;min-width:0}
  body.mx .mxo-hist .mxo-table>thead{display:none}
  body.mx .mxo-hist .mxo-table>tbody>tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-content:start;gap:10px 12px;margin:0 0 16px;padding:14px 16px 16px 20px;background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:20px;box-shadow:inset 6px 0 0 var(--st,var(--mx-sky)),0 5px 0 var(--mx-navy)}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-row:hover{background:var(--mx-paper)}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-row>td:first-child{box-shadow:none}
  body.mx .mxo-hist .mxo-table>tbody>tr>td{display:block;grid-column:span 6;min-width:0;padding:0;border:0;white-space:normal;box-shadow:none}
  body.mx .mxo-hist .mxo-table>tbody>tr>td[data-label]::before{content:attr(data-label);display:block;margin:0 0 1px;font:700 10.5px/1.3 var(--mx-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-id::before,body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-st::before,body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-svc::before{display:none}
  body.mx .mxo-hist .mxo-table td.width-40{width:auto!important;min-width:0}
  body.mx .mxo-hist .mxo-table .link,body.mx .mxo-hist .mxo-c-svc,body.mx .mxo-hist .mxo-c-date{min-width:0}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-id{grid-column:span 3;align-self:center;font:800 20px/1.1 var(--mx-display);font-variation-settings:"SOFT" 100}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-id::after{content:none}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-st{grid-column:span 3;align-self:center;justify-self:end;text-align:right}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-svc{font-size:15px;line-height:1.35}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-link{font-size:13px!important}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-act .order-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:auto;min-width:0}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-act .btn{margin:0;padding:6px 14px;font-size:13px}
  body.mx .mxo-hist .mxo-table>tbody>tr>td:empty::after{content:"—"}
  body.mx .mxo-hist .mxo-table>tbody>tr>td.mxo-c-act:empty{display:none}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-empty{display:block;padding:0;overflow:hidden}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-empty>td{padding:34px 18px}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-empty>td::before{display:none}
  /* bố cục từng bảng (lưới 6 cột; mã + trạng thái ở hàng đầu, rồi dịch vụ, liên kết, các số liệu) */
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-svc{order:1}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-link{order:2}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-date{order:3;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-chg{order:4;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-start{order:5;grid-column:span 2}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-qty{order:6;grid-column:span 2}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-rem{order:7;grid-column:span 2}
  body.mx .mxo-hist .mxo-table--orders>tbody>tr>td.mxo-c-act{order:8}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-svc{order:1}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-link{order:2}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-date{order:3;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-chg{order:4;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-runs{order:5;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-int{order:6;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-qty{order:7;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-tot{order:8;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--drip>tbody>tr>td.mxo-c-act{order:9}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-svc{order:1}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-link{order:2}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-qty{order:3;grid-column:span 2;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-new{order:4;grid-column:span 2;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-old{order:5;grid-column:span 2;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-delay{order:6;grid-column:span 2}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-cr{order:7;grid-column:span 4}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-up{order:8;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-exp{order:9;grid-column:span 3}
  body.mx .mxo-hist .mxo-table--subs>tbody>tr>td.mxo-c-act{order:10}
  body.mx .mxo-hist .mxo-table--refill>tbody>tr>td.mxo-c-svc{order:1}
  body.mx .mxo-hist .mxo-table--refill>tbody>tr>td.mxo-c-link{order:2}
  body.mx .mxo-hist .mxo-table--refill>tbody>tr>td.mxo-c-date{order:3;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--refill>tbody>tr>td.mxo-c-ord{order:4;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--refunds>tbody>tr>td.mxo-c-amt{order:1;grid-column:span 3;font-size:17px;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--refunds>tbody>tr>td.mxo-c-date{order:2;grid-column:span 3;padding-top:10px;border-top:2px dashed var(--mx-line)}
  body.mx .mxo-hist .mxo-table--updates>tbody>tr{padding-top:16px}
  body.mx .mxo-hist .mxo-table--updates>tbody>tr>td.mxo-c-upd{order:1}
  body.mx .mxo-hist .mxo-table--updates>tbody>tr>td.mxo-c-date{order:2}
  body.mx .mxo-hist .mxo-table--updates>tbody>tr>td.mxo-c-upd::before,body.mx .mxo-hist .mxo-table--updates>tbody>tr>td.mxo-c-date::before{display:none}
  body.mx .mxo-pager{justify-content:center}
}
@media (min-width:640px) and (max-width:1279px){
  body.mx .mxo-hist .mxo-table>tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 18px}
  body.mx .mxo-hist .mxo-table>tbody>tr{margin:0}
  body.mx .mxo-hist .mxo-table>tbody>tr.mxo-empty{grid-column:1/-1}
  body.mx .mxo-hist .well-float.mxo-card{margin-bottom:28px}
}

/* =====================================================================
   3. ĐẶT HÀNG MỚI — form là nhân vật chính
   ===================================================================== */
body.mx .mxo-p-neworder .mxo-order{padding:0;margin-bottom:28px}
body.mx .mxo-order__head{position:relative;display:flex;align-items:center;gap:12px;padding:24px 22px 22px;background:var(--mx-blue);color:#fff;border-bottom:2px solid var(--mx-navy);border-radius:calc(var(--mx-r) - 2px) calc(var(--mx-r) - 2px) 0 0;overflow:hidden}
body.mx .mxo-order__head::before{content:"";position:absolute;right:-60px;top:-40px;width:260px;height:260px;border-radius:50%;background:#2f5cf0}
body.mx .mxo-order__intro{position:relative;flex:1 1 auto;min-width:0}
body.mx .mxo-order__head .mxo-kicker{color:var(--mx-sun)}
body.mx .mxo-order__head .mxo-kicker::before{box-shadow:0 0 0 2px var(--mx-paper)}
body.mx .mxo-order__title{margin:0 0 14px;color:#fff;font-size:clamp(26px,1.4vw + 20px,38px);line-height:1.08;text-wrap:balance}
body.mx .mxo-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;counter-reset:mxs}
body.mx .mxo-steps li{counter-increment:mxs;display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(10,26,68,.28);color:var(--mx-on-blue);font-size:13.5px;font-weight:600;line-height:1.3}
body.mx .mxo-steps li::before{content:counter(mxs);display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--mx-sun);color:var(--mx-navy);font:800 12.5px/1 var(--mx-sans)}
body.mx .mxo-order__art{position:relative;display:none;flex:none;width:150px;height:auto;margin:-8px -6px -14px 0}
body.mx .mxo-order__body{padding:24px 20px 26px}
@media (min-width:480px){body.mx .mxo-order__art{display:block;width:118px}}
@media (min-width:768px){
  body.mx .mxo-order__head{padding:30px 34px 28px;gap:20px}
  body.mx .mxo-order__art{width:170px}
  body.mx .mxo-order__body{padding:30px 34px 34px}
}
/* các ô của form */
body.mx .mxo-p-neworder .form-group{margin-bottom:20px}
body.mx .mxo-p-neworder .control-label{font-size:14.5px}
/* hàng chọn nhanh: ô tìm dịch vụ | danh mục (cạnh nhau từ 768px, xếp chồng trên điện thoại) */
@media (min-width:768px){
  body.mx .mxo-pick{display:flex;align-items:flex-end;gap:14px}
  body.mx .mxo-pick>.form-group{flex:1 1 0;min-width:0}
  body.mx .mxo-pick>.mxo-find{flex:0 0 calc(58% - 7px)}
}
body.mx .mxo-p-neworder #template-input{padding-left:44px;font-weight:600}
body.mx .mxo-p-neworder #new-order-search .input-wrapper>button{color:var(--mx-blue-d);font-size:16px}
body.mx .mxo-p-neworder .select2-container .select2-selection--single .select2-selection__rendered{font-weight:600;color:var(--mx-navy)}
body.mx .mxo-p-neworder .select2-selection__rendered .fab,body.mx .mxo-p-neworder .select2-selection__rendered .fas{color:#e02b20;margin-right:6px}
body.mx .mxo-p-neworder #service_description .panel-body{padding:14px 16px;border:2px dashed rgba(31,75,224,.35);border-radius:16px;background:#f3f6ff;color:var(--mx-ink);font-size:14.5px;line-height:1.55}
body.mx .mxo-p-neworder #service_description .panel-body p{margin:0 0 6px}
body.mx .mxo-p-neworder #service_description .panel-body p:last-child{margin-bottom:0}
body.mx .mxo-p-neworder #fields .help-block{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--mx-muted)}
body.mx .mxo-p-neworder #fields .fa-exclamation-circle{color:var(--mx-muted);margin-left:4px;cursor:help}
/* thành tiền: thanh tổng kiểu hoá đơn */
body.mx .mxo-charge{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 18px;padding:10px 12px 10px 18px;border:2px solid var(--mx-navy);border-radius:18px;background:#fff4d1;box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mxo-charge .control-label{flex:none;margin:0;font-size:15px;font-weight:700}
body.mx .mxo-p-neworder .mxo-charge #charge{flex:1 1 auto;min-width:0;width:auto;height:44px;padding:0;border:0;background:transparent;box-shadow:none;text-align:right;font:800 26px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mxo-terms{margin-bottom:18px}
body.mx .mxo-terms label{display:inline;font-size:14.5px}
/* nút đặt hàng */
body.mx .mxo-submit{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 24px;font-size:17px}
body.mx .mxo-submit::after{content:"";flex:none;width:22px;height:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M13 6l6 6-6 6' fill='none' stroke='%23ffc83d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;transition:transform .15s}
body.mx .mxo-submit:hover::after{transform:translateX(3px)}
/* biên nhận khi đặt thành công */
body.mx .mxo-receipt{position:relative;padding:18px 20px 12px;margin-bottom:24px}
body.mx .mxo-receipt h4{display:flex;align-items:center;gap:10px;margin:0 0 8px}
body.mx .mxo-receipt h4::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--mx-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/16px;box-shadow:0 0 0 2px var(--mx-navy)}
body.mx .mxo-receipt__rows{margin:0}
body.mx .mxo-receipt__rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;border-top:2px dashed rgba(10,26,68,.16)}
body.mx .mxo-receipt__rows dt{flex:none;font-weight:600;color:var(--mx-muted);font-size:14px}
body.mx .mxo-receipt__rows dd{min-width:0;margin:0;font-weight:700;color:var(--mx-navy);text-align:right;overflow-wrap:anywhere}
body.mx .mxo-receipt__id{font:800 18px/1.2 var(--mx-display)!important}
body.mx .mxo-receipt__link{font-weight:600!important;font-size:14px;color:var(--mx-blue-d)!important}
/* cột bên: số dư + thông báo */
body.mx .mxo-bal{position:relative;margin:0 0 28px;padding:22px 24px 24px;background:var(--mx-sun);border:2px solid var(--mx-navy);border-radius:var(--mx-r);box-shadow:var(--mx-shadow);overflow:hidden}
body.mx .mxo-bal__art{position:absolute;right:-18px;top:-18px;width:112px;height:auto}
body.mx .mxo-bal__label{position:relative;margin:0;font:700 12.5px/1.3 var(--mx-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mx-navy)}
body.mx .mxo-bal__value{position:relative;margin:6px 0 16px;padding-right:70px;font:800 34px/1.1 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy);font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
body.mx .mxo-bal__act{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
body.mx .mxo-bal__link{font-weight:700;color:var(--mx-navy)!important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
body.mx .mxo-note{padding:22px 24px;overflow-wrap:anywhere}
body.mx .mxo-note ul,body.mx .mxo-note ol{padding-left:20px;margin:0 0 12px}
body.mx .mxo-note li{margin:0 0 6px}
body.mx .mxo-note p:last-child{margin-bottom:0}
body.mx .mxo-note img,body.mx .mxo-note iframe,body.mx .mxo-note video{max-width:100%;height:auto}
body.mx .mxo-note table{display:block;max-width:100%;overflow-x:auto}
@media (min-width:1200px){
  body.mx .mxo-side{position:sticky;top:20px}
}
@media (max-width:767px){
  body.mx .mxo-bal__value{font-size:30px}
}

/* =====================================================================
   4. ĐẶT HÀNG LOẠT
   ===================================================================== */
body.mx .mxo-mass{margin-bottom:28px}
body.mx .mxo-mass #links{min-height:360px;padding:10px 16px;font:500 14px/28px ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;background:#fff repeating-linear-gradient(to bottom,transparent 0 27px,rgba(31,75,224,.1) 27px 28px);background-position:0 10px;background-attachment:local;resize:vertical}
body.mx .mxo-mass .mxo-submit{margin-top:4px}
@media (max-width:767px){body.mx .mxo-mass #links{min-height:0;height:300px}}
body.mx .mxo-howto{margin:0 0 28px;padding:22px 22px 18px;background:var(--mx-sky);border:2px solid var(--mx-navy);border-radius:var(--mx-r);box-shadow:0 5px 0 var(--mx-navy)}
body.mx .mxo-howto p{margin:0 0 10px;color:var(--mx-ink)}
body.mx .mxo-howto__fmt{display:block;margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--mx-navy);color:var(--mx-sun);font:600 14px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;white-space:normal;overflow-wrap:anywhere}
body.mx .mxo-howto__list{margin:0;padding:0;list-style:none;counter-reset:mxh}
body.mx .mxo-howto__list li{counter-increment:mxh;position:relative;margin:0 0 10px;padding-left:34px;font-size:14.5px;line-height:1.45}
body.mx .mxo-howto__list li::before{content:counter(mxh);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mx-blue);color:#fff;font:800 12px/1 var(--mx-sans)}
body.mx .mxo-howto a{font-weight:700}

/* =====================================================================
   5. HOÀN TIỀN, CẬP NHẬT DỊCH VỤ
   ===================================================================== */
body.mx .mxo-p-refunds .mxo-info{margin-bottom:20px}
body.mx .mxo-p-refunds .mxo-head__art{width:130px}
body.mx .mxo-p-refunds .mxo-c-amt{font-size:15.5px}
body.mx .mxo-tabs--updates{float:none!important;justify-content:flex-end}
body.mx .mxo-tabs--updates>li.mxo-search{margin-left:0}
body.mx .mxo-tabs--updates .dropdown-toggle{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .mxo-tabs--updates .dropdown-menu{min-width:220px}
body.mx .mxo-tabs--updates .dropdown-menu>li>a{padding:8px 12px;border:0;box-shadow:none;transform:none}
body.mx .mxo-dash{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.mx .mxo-sid{display:inline-block;min-width:38px;margin-right:2px;padding:2px 8px;border-radius:8px;background:var(--mx-sky);color:var(--mx-blue-d);font-weight:800;font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
body.mx .mxo-upd{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--mx-navy)}
body.mx .mxo-upd::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#eceff6 no-repeat center/14px}
body.mx .mxo-upd--up::before{background-color:#ffe1d9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13V3M3.5 7.5L8 3l4.5 4.5' fill='none' stroke='%23c2401f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.mx .mxo-upd--down::before{background-color:#dcf3e8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3.5 8.5L8 13l4.5-4.5' fill='none' stroke='%230b5e3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.mx .mxo-upd--off::before{background-color:#eceff6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4v8M10 4v8' fill='none' stroke='%230a1a44' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
body.mx .mxo-upd--on::before{background-color:var(--mx-sky);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5l6.5 4.5-6.5 4.5z' fill='%231f4be0'/%3E%3C/svg%3E")}
body.mx .mxo-upd--new::before{background-color:var(--mx-sun);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%230a1a44' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
body.mx .mxo-row--up{--st:var(--mx-coral)}
body.mx .mxo-row--down{--st:var(--mx-green)}
body.mx .mxo-row--off{--st:#b9bfd1}
body.mx .mxo-row--on{--st:var(--mx-blue)}
body.mx .mxo-row--new{--st:var(--mx-sun)}
@media (max-width:767px){
  body.mx .mxo-tabs--updates{display:flex}
  body.mx .mxo-tabs--updates>li.mxo-types{order:1;flex:1 1 100%}
  body.mx .mxo-tabs--updates .dropdown-toggle{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  body.mx .mxo-tabs>li>a:hover,body.mx .mxo-pager>li>a:hover{transform:none}
  body.mx .mxo-submit:hover::after{transform:none}
}

/* ===== 30-services-support.css ===== */
/* MAXYTB.VN · theme Picasso
   30-services-support: Dịch vụ (bảng giá), Nạp tiền, Hỗ trợ (tickets + viewticket), Tiếp thị liên kết,
   Child panel (+ đặt panel), API. Class riêng đều có tiền tố mx-sx- / mx-p-<trang>; vỏ ngoài mỗi trang là .mx-sx,
   nên không đụng tới trang khác. Các bảng: ≥768px cuộn trong thẻ (.mx-sx-scroll), <768px xếp thành thẻ (.mx-sx-stack). */

/* ---------- dùng chung ---------- */
/* panel gốc cho .well-float nổi + nở theo nội dung (≤991px), làm cả trang bị cuộn ngang: trả về khối thường */
body.mx .mx-sx .well-float{float:none;width:auto;min-width:0}
body.mx .mx-sx .well{overflow-wrap:break-word}

/* đầu trang: huy hiệu lập thể + dòng nhỏ + tiêu đề */
body.mx .mx-sx-head{display:flex;align-items:center;gap:14px;min-width:0;margin:0 0 20px}
body.mx .mx-sx-emblem{flex:none;display:block;width:54px;height:54px}
body.mx .mx-sx-emblem svg{display:block;width:100%;height:100%;overflow:visible}
body.mx .mx-sx-head__text{min-width:0}
body.mx .mx-sx-kicker{margin:0 0 3px;font:700 12px/1.35 var(--mx-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mx-sx-title{margin:0;font-size:29px;line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere}
body.mx .mx-sx-head__aside{margin-left:auto;flex:none}
@media (min-width:768px){
  body.mx .mx-sx-head{gap:18px;margin-bottom:26px}
  body.mx .mx-sx-emblem{width:66px;height:66px}
  body.mx .mx-sx-kicker{font-size:12.5px}
  body.mx .mx-sx-title{font-size:38px}
  /* vệt gạch đứt chạy tới mép phải, kết bằng một chấm nắng */
  body.mx .mx-sx-head:not(.mx-sx-head--in)::after{content:"";flex:1 1 40px;align-self:center;min-width:40px;height:12px;margin-left:8px;background:radial-gradient(circle at calc(100% - 6px) 50%,var(--mx-sun) 0 4.5px,var(--mx-navy) 5px 6.5px,transparent 7px),repeating-linear-gradient(90deg,rgba(10,26,68,.32) 0 8px,transparent 8px 14px) left center/calc(100% - 18px) 2.5px no-repeat}
  body.mx .mx-sx-head--aside::after{display:none}
}

/* thẻ ghi chú (nội dung chữ panel tự nhập: servicesText, ticketsText, hướng dẫn nạp tiền…) */
body.mx .mx-sx-note{position:relative;background:var(--mx-sky);box-shadow:0 5px 0 var(--mx-navy);margin-top:14px}
body.mx .mx-sx-note::before{content:"";position:absolute;top:-15px;left:22px;width:28px;height:28px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(100deg,var(--mx-blue) 52%,var(--mx-sun) 52%)}
body.mx .mx-sx-note p:last-child,body.mx .mx-sx-note ul:last-child,body.mx .mx-sx-note ol:last-child{margin-bottom:0}
body.mx .mx-sx-note h4{font:800 20px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;margin:0 0 12px}
body.mx .mx-sx-note strong{color:var(--mx-navy)}

/* bảng là chính tấm thẻ: .well bọc ngoài trong suốt */
body.mx .mx-sx .mx-sx-tablecard{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
body.mx .mx-sx-table{margin-bottom:0}
body.mx .mx-sx-table .btn{white-space:nowrap}
body.mx .mx-sx-table>tbody>tr:hover{background:#fff6dc}
body.mx .mx-sx-table .nowrap{font-variant-numeric:tabular-nums}
@media (min-width:768px){
  /* bảng rộng hơn khung: cuộn trong thẻ, không cuộn cả trang */
  body.mx .mx-sx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px 10px}
  body.mx .mx-sx-scroll>.table{margin-bottom:0}
}

/* điện thoại: mỗi dòng của bảng .mx-sx-stack thành một thẻ nhỏ, nhãn cột lấy từ data-label */
@media (max-width:767px){
  body.mx .mx-sx-stack,body.mx .mx-sx-stack>tbody,body.mx .mx-sx-stack>tbody>tr,body.mx .mx-sx-stack>tbody>tr>td{display:block;width:auto}
  body.mx .mx-sx-stack{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;margin-bottom:10px}
  body.mx .mx-sx-stack>thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  body.mx .mx-sx-stack>tbody>tr{position:relative;background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:18px;box-shadow:0 4px 0 var(--mx-navy);padding:12px 14px 14px;margin:0 0 14px}
  body.mx .mx-sx-stack>tbody>tr:hover{background:var(--mx-paper)}
  body.mx .mx-sx-stack>tbody>tr>td{border:0;padding:0}
  body.mx .mx-sx-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:1px;font:700 11px/1.3 var(--mx-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
}

/* ---------- Dịch vụ / bảng giá ---------- */
/* thanh công cụ: lọc danh mục, tiền tệ (khách), tìm kiếm */
body.mx .mx-sx-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;padding:0}
body.mx .mx-sx-toolbar::before,body.mx .mx-sx-toolbar::after{display:none}
body.mx .mx-sx-toolbar>li,body.mx .mx-sx-toolbar>li+li{float:none;margin:0}
body.mx .mx-sx-toolbar .dropdown-toggle{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:10px 18px}
body.mx .mx-sx-toolbar [data-filter-active-category]:empty::before{content:attr(data-mx-fallback)}
body.mx .mx-sx-toolbar .dropdown-menu{min-width:250px;max-width:calc(100vw - 32px);max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain}
body.mx .mx-sx-toolbar .dropdown-menu>li>a{display:flex;align-items:center;gap:9px;white-space:normal;line-height:1.35}
body.mx .mx-sx-toolbar .dropdown-menu .fa-star{color:#e0a100}
body.mx .mx-sx-toolbar>li.search{margin-left:auto;width:340px;max-width:100%}
body.mx .mx-sx-toolbar>li.search .input-group{width:100%}
body.mx .mx-sx-toolbar>li.search .form-control{background:#fff}
@media (max-width:767px){
  body.mx .mx-sx-toolbar>li.search{flex:1 1 190px;width:auto}
}

/* bảng giá trên máy tính */
body.mx .mx-p-services .mx-sx-table>thead>tr>th{padding:15px 14px}
body.mx .mx-p-services .mx-sx-table>thead .fa-exclamation-circle{margin-left:4px;color:var(--mx-sun);cursor:help}
body.mx .mx-p-services .mx-sx-cat>td{background:var(--mx-sky);border-top:2px solid var(--mx-navy);padding:13px 16px;color:var(--mx-navy);font:800 18px/1.25 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.005em}
body.mx .mx-p-services .mx-sx-table>tbody>.mx-sx-cat:first-child>td{border-top:0}
body.mx .mx-p-services .mx-sx-cat:hover{background:transparent}
body.mx .mx-p-services .mx-sx-cat td>span,body.mx .mx-p-services .mx-sx-cat td>img{display:inline-block;margin-right:8px;color:var(--mx-blue);vertical-align:-1px}
body.mx .mx-p-services .mx-sx-cat strong{font-weight:800}
body.mx .mx-p-services .mx-sx-cat td>strong:first-child::before{content:"";display:inline-block;width:15px;height:15px;margin-right:10px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(100deg,var(--mx-blue) 52%,var(--mx-sun) 52%);vertical-align:-1px}
body.mx .mx-sx-svc>td.mx-sx-svc__id{padding:13px 12px;font-weight:700;font-size:13.5px;color:var(--mx-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
body.mx .mx-sx-svc>td.mx-sx-svc__name{font-weight:600;color:var(--mx-ink);line-height:1.45;overflow-wrap:anywhere}
body.mx .mx-sx-svc>td.mx-sx-svc__rate{font-weight:800;color:var(--mx-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mx-sx-svc>td.mx-sx-svc__num{font-variant-numeric:tabular-nums;color:var(--mx-ink);white-space:nowrap}
body.mx .mx-sx-svc>td.mx-sx-svc__desc{text-align:right;white-space:nowrap}
body.mx .mx-sx-svc>td.mx-sx-svc__fav{width:46px;padding:8px 4px 8px 10px}
body.mx .mx-sx-svc [data-favorite-service-id]{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#8d95b0;font-size:16px;cursor:pointer;transition:background-color .15s,color .15s}
body.mx .mx-sx-svc [data-favorite-service-id]:hover{background:var(--mx-sky);color:var(--mx-navy)}
body.mx .mx-sx-svc [data-favorite-service-id].favorite-active{color:#e0a100}
body.mx .mx-sx-svc [data-favorite-service-id].favorite-active:hover{background:#fff3cf}
@media (min-width:992px){body.mx .mx-p-services .service-name{max-width:none}}
/* máy tính bảng: bảng giá gọn lại cho vừa khung */
@media (min-width:768px) and (max-width:991px){
  body.mx .mx-p-services .mx-sx-table>thead>tr>th{padding:13px 8px;font-size:11.5px;letter-spacing:.03em;white-space:normal}
  body.mx .mx-p-services .mx-sx-table>tbody>tr.mx-sx-svc>td{padding:11px 8px;font-size:13.5px}
  body.mx .mx-p-services .mx-sx-table>tbody>tr.mx-sx-svc>td.mx-sx-svc__fav{padding:6px 0 6px 6px;width:38px}
  body.mx .mx-p-services .mx-sx-table>tbody>tr.mx-sx-svc>td.mx-sx-svc__num{white-space:normal}
  body.mx .mx-p-services .width-service-name{min-width:150px}
  body.mx .mx-p-services .mx-sx-svc .btn-xs{padding:3px 8px;font-size:12px}
}

/* bảng giá trên điện thoại: thẻ dịch vụ */
@media (max-width:767px){
  body.mx .mx-p-services .mx-sx-stack>tbody>tr.mx-sx-cat{display:block;margin:26px 0 12px;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  body.mx .mx-p-services .mx-sx-stack>tbody>tr.mx-sx-cat:first-child{margin-top:0}
  body.mx .mx-p-services .mx-sx-stack>tbody>tr.mx-sx-cat>td{display:flex;align-items:center;padding:10px 16px;border:2px solid var(--mx-navy);border-radius:14px;background:var(--mx-navy);color:#fff;font-size:17px}
  body.mx .mx-p-services .mx-sx-cat td>span,body.mx .mx-p-services .mx-sx-cat td>img{color:var(--mx-sun);flex:none}
  body.mx .mx-p-services .mx-sx-cat td>strong:first-child::before{border-color:#fff}
  body.mx .mx-p-services .mx-sx-stack>tbody>tr.mx-sx-svc{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
  body.mx .mx-sx-svc>td.mx-sx-svc__fav{order:1;width:auto;margin:-6px 0 -6px -6px;padding:0}
  body.mx .mx-sx-svc>td.mx-sx-svc__id{order:2;padding:3px 10px;border-radius:999px;background:var(--mx-sky);color:var(--mx-navy)}
  body.mx .mx-sx-svc>td.mx-sx-svc__id::before{content:"#"}
  body.mx .mx-sx-svc>td.mx-sx-svc__desc{order:3;margin-left:auto}
  body.mx .mx-sx-svc>td.mx-sx-svc__desc.is-empty{display:none}
  body.mx .mx-sx-svc>td.mx-sx-svc__name{order:4;flex:1 1 100%;margin:10px 0 12px;font-weight:700;font-size:15.5px;color:var(--mx-navy)}
  body.mx .mx-sx-svc>td.mx-sx-svc__rate{order:5;flex:1 1 100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;padding:9px 12px;border-radius:12px;background:#fff3cf;font:800 20px/1.1 var(--mx-display);font-variation-settings:"SOFT" 100}
  body.mx .mx-sx-svc>td.mx-sx-svc__rate::before{margin:0;font-family:var(--mx-sans);font-variation-settings:normal;color:var(--mx-navy)}
  body.mx .mx-sx-svc>td.mx-sx-svc__num{order:6;flex:1 1 0;min-width:0;font-weight:600;font-size:14px;line-height:1.35}
  body.mx .mx-sx-svc>td.mx-sx-svc__num+td.mx-sx-svc__num{padding-left:10px;border-left:2px dashed var(--mx-line)}
}

/* ---------- ô bảng dùng chung (nạp tiền, tickets, child panel, hoa hồng) ---------- */
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-id{font-weight:700;font-size:13.5px;color:var(--mx-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-main{font-weight:600;color:var(--mx-ink);overflow-wrap:anywhere}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-amount{font-weight:800;color:var(--mx-navy);white-space:nowrap;font-variant-numeric:tabular-nums}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-date{color:var(--mx-muted);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
body.mx .mx-sx-table [data-toggle=tooltip]{border-bottom:2px dotted rgba(31,75,224,.55);cursor:help}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-act a:not(.btn){display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);color:var(--mx-navy);font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-act a:not(.btn):hover{background:var(--mx-sky)}
body.mx .mx-sx-pill{display:inline-block;padding:3px 12px;border:2px solid var(--mx-navy);border-radius:999px;background:#fff3cf;color:var(--mx-navy);font:700 12.5px/1.3 var(--mx-sans);white-space:nowrap}
body.mx .mx-sx-pager{display:flex;justify-content:center;margin:0 0 34px}
body.mx .mx-sx-pager .pagination{margin:0}
@media (max-width:767px){
  body.mx .mx-sx-stack>tbody>tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-id{order:1;padding:3px 10px;border-radius:999px;background:var(--mx-sky);color:var(--mx-navy);font-size:13px}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-id::before{content:"#"}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-amount,body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-status{order:2;margin-left:auto;text-align:right}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-amount{font:800 20px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-main{order:3;flex:1 1 100%;margin:6px 0 2px;font-weight:700;font-size:15.5px;line-height:1.4;color:var(--mx-navy)}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-date{order:4;flex:1 1 auto}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-meta{order:4;flex:1 1 0;min-width:0;padding-top:8px;margin-top:6px;border-top:2px dashed var(--mx-line);font-weight:600;font-size:14px}
  body.mx .mx-sx-stack>tbody>tr>td.mx-sx-c-act{order:5;margin-left:auto;text-align:right}
  body.mx .mx-sx-stack>tbody>tr>td.is-empty{display:none}
}

/* ---------- Nạp tiền ---------- */
body.mx .mx-sx-head--aside{flex-wrap:wrap}
body.mx .mx-sx-balance{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0 0 0 auto;padding:10px 18px 11px;border:2px solid var(--mx-navy);border-radius:18px;background:var(--mx-navy);box-shadow:0 5px 0 var(--mx-sun);color:#fff;line-height:1.15}
body.mx .mx-sx-balance span{font:700 11.5px/1.3 var(--mx-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--mx-on-blue)}
body.mx .mx-sx-balance strong{font:800 24px/1.1 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-sun);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:767px){
  body.mx .mx-sx-balance{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;margin:4px 0 6px;padding:10px 16px}
  body.mx .mx-sx-balance strong{font-size:21px}
}
body.mx .mx-sx-pay{position:relative;padding-top:34px}
body.mx .mx-sx-coin{position:absolute;top:-30px;right:22px;width:62px;height:62px;pointer-events:none}
body.mx .mx-sx-coin svg{display:block;width:100%;height:100%;overflow:visible}
body.mx .mx-sx-pay #amount{height:58px;font:800 22px/1.2 var(--mx-sans);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--mx-navy)}
body.mx .mx-sx-pay button[type=submit]{display:block;width:100%;margin-top:6px;padding:15px 22px;font-size:17px}
body.mx .mx-sx-guide{padding-top:30px}
body.mx .mx-sx-history{margin-top:6px}
@media (min-width:992px){
  body.mx .mx-sx-pay-row{display:flex;align-items:flex-start}
  body.mx .mx-sx-guide{margin-top:0}
}

/* danh sách có số / gạch đầu dòng trong các thẻ ghi chú */
body.mx .mx-sx-note ol{list-style:none;counter-reset:mxsx;margin:0 0 14px;padding:0}
body.mx .mx-sx-note ol>li{counter-increment:mxsx;position:relative;min-height:30px;padding:2px 0 12px 44px}
body.mx .mx-sx-note ol>li::before{content:counter(mxsx);position:absolute;left:3px;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mx-blue);color:#fff;font:800 14px/1 var(--mx-display);box-shadow:0 0 0 3px var(--mx-sky),0 0 0 5px var(--mx-navy)}
body.mx .mx-sx-note ul{list-style:none;margin:0 0 14px;padding:0}
body.mx .mx-sx-note ul>li{position:relative;padding:0 0 6px 24px}
body.mx .mx-sx-note ul>li::before{content:"";position:absolute;left:4px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--mx-sun);box-shadow:0 0 0 2px var(--mx-navy)}
body.mx .mx-sx-note code{background:var(--mx-paper);border:1.5px solid rgba(10,26,68,.2)}

/* ---------- Hỗ trợ: danh sách ticket ---------- */
body.mx .mx-sx-cardtitle{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:24px}
body.mx .mx-sx-cardtitle::before{content:"";flex:none;width:16px;height:16px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(100deg,var(--mx-blue) 52%,var(--mx-sun) 52%)}
body.mx .mx-sx-formcard button[type=submit]{min-width:210px}
body.mx .mx-sx-listhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:4px 0 18px}
body.mx .mx-sx-subhead{margin:0;font-size:24px}
body.mx .mx-sx-listhead>.row{flex:0 1 320px;min-width:0;margin:0}
body.mx .mx-sx-listhead>.row>[class*=col-]{float:none;width:auto;margin-left:0;padding:0}
body.mx .mx-sx-listhead .nav-pills,body.mx .mx-sx-listhead form{margin:0}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-main a{color:var(--mx-navy);font-weight:600;text-decoration:none}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-main a:hover{color:var(--mx-blue);text-decoration:underline;text-underline-offset:3px}
body.mx .mx-sx-table>tbody>tr>td.mx-sx-c-new a strong{font-weight:800}
/* ticket có trả lời mới: chấm san hô */
body.mx .mx-sx-c-new a strong::after{content:"";display:inline-block;width:10px;height:10px;margin-left:8px;border-radius:50%;background:var(--mx-coral);box-shadow:0 0 0 2px var(--mx-navy);vertical-align:1px}
@media (max-width:767px){
  body.mx .mx-sx-formcard button[type=submit]{width:100%}
  body.mx .mx-sx-listhead>.row{flex:1 1 100%}
}

/* ---------- Hỗ trợ: xem ticket (khung chat) ---------- */
body.mx .mx-sx-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-8px 0 10px;font-weight:700;color:var(--mx-navy);text-decoration:none}
body.mx .mx-sx-back svg{width:18px;height:18px;flex:none}
body.mx .mx-sx-back:hover,body.mx .mx-sx-back:focus{color:var(--mx-blue)}
body.mx .mx-sx-chat{padding-top:0;overflow:hidden}
body.mx .mx-sx-chat .titcket-title{position:relative;margin:0 -22px 24px;padding:18px 74px 18px 22px;border:0;background:var(--mx-navy);box-shadow:inset 0 -6px 0 var(--mx-blue);color:#fff;font:800 20px/1.25 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.005em;overflow-wrap:anywhere}
body.mx .mx-sx-chat .titcket-title::after{content:"";position:absolute;right:20px;top:50%;width:40px;height:10px;margin-top:-8px;background:radial-gradient(circle,var(--mx-sun) 0 4px,transparent 4.5px) 0 0/14px 10px repeat-x}
@media (min-width:768px){
  body.mx .mx-sx-chat .titcket-title{margin:0 -34px 28px;padding:22px 84px 22px 34px;font-size:23px}
  body.mx .mx-sx-chat .titcket-title::after{right:30px}
}
body.mx .mx-p-viewticket .ticket-message-block{display:flex;align-items:flex-end;gap:10px;margin:0 0 20px}
body.mx .mx-p-viewticket .ticket-message-block::before,body.mx .mx-p-viewticket .ticket-message-block::after{display:none}
body.mx .mx-p-viewticket .ticket-message-block>.col-md-1{display:none}
body.mx .mx-p-viewticket .ticket-message-block>.col-md-11{float:none;width:auto;max-width:88%;min-width:0;padding:0}
body.mx .mx-p-viewticket .ticket-message-right{justify-content:flex-end}
body.mx .mx-sx-avatar{flex:none;display:block;width:38px;height:38px;margin-bottom:28px}
body.mx .mx-sx-avatar svg{display:block;width:100%;height:100%}
body.mx .mx-p-viewticket .ticket-message{padding:13px 16px;border:2px solid var(--mx-navy);box-shadow:0 4px 0 var(--mx-navy);font-size:15px;line-height:1.55}
body.mx .mx-p-viewticket .ticket-message-right .ticket-message{background:var(--mx-blue);color:#fff;border-radius:20px 20px 6px 20px}
body.mx .mx-p-viewticket .ticket-message-left .ticket-message{background:var(--mx-sky);color:var(--mx-ink);border-radius:20px 20px 20px 6px}
body.mx .mx-p-viewticket .ticket-message p{margin:0 0 8px}
body.mx .mx-p-viewticket .ticket-message .message>:last-child{margin-bottom:0}
body.mx .mx-p-viewticket .ticket-message-right .ticket-message a{color:#fff}
body.mx .mx-p-viewticket .ticket-message-right .ticket-message strong{color:#fff}
body.mx .mx-p-viewticket .ticket-message blockquote{margin:10px 0;padding:7px 12px;border-left:4px solid var(--mx-sun);border-radius:0 12px 12px 0;background:rgba(255,255,255,.65);font-size:14px}
body.mx .mx-p-viewticket .ticket-message-right blockquote{background:rgba(255,255,255,.14)}
body.mx .mx-p-viewticket .ticket-message-block .info{margin-top:8px;padding:0 4px;font-size:13px;line-height:1.3}
body.mx .mx-p-viewticket .ticket-message-block .info strong{margin-right:6px;color:var(--mx-navy)}
body.mx .mx-p-viewticket .ticket-message-block .info small{font-size:12.5px;font-variant-numeric:tabular-nums}
body.mx .mx-sx-files>div{margin-top:6px}
body.mx .mx-sx-files a{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 13px 5px 10px;border:2px solid var(--mx-navy);border-radius:999px;background:#fff;color:var(--mx-navy);font-weight:700;font-size:13px;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
body.mx .mx-sx-files a::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.4 3.4 0 0 1 4.9 4.9L10 17.3a1.8 1.8 0 0 1-2.6-2.6L15 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11.5l-8 8a5 5 0 0 1-7-7l8.5-8.5a3.4 3.4 0 0 1 4.9 4.9L10 17.3a1.8 1.8 0 0 1-2.6-2.6L15 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
body.mx .mx-sx-files a:hover{background:var(--mx-sun);color:var(--mx-navy)}
body.mx .mx-p-viewticket .ticket-message-right .mx-sx-files a{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.14);color:#fff}
body.mx .mx-p-viewticket .ticket-message-right .mx-sx-files a:hover{background:#fff;color:var(--mx-navy)}
body.mx .mx-sx-reply .panel-border-top{margin-top:4px;padding-top:22px;border-top:2px dashed var(--mx-line)}
body.mx .mx-sx-reply button[type=submit]{min-width:190px}
@media (max-width:767px){
  body.mx .mx-p-viewticket .ticket-message-block>.col-md-11{max-width:92%}
  body.mx .mx-sx-avatar{width:32px;height:32px}
  body.mx .mx-sx-reply button[type=submit]{width:100%}
}

/* ---------- Tiếp thị liên kết ---------- */
body.mx .mx-sx-promo{position:relative;overflow:hidden;isolation:isolate;background:var(--mx-sun);color:var(--mx-navy);font-size:16.5px}
body.mx .mx-sx-promo::before{content:"";position:absolute;z-index:-1;right:-60px;bottom:-110px;width:240px;height:240px;border-radius:50%;background:#ffd76e}
body.mx .mx-sx-promo p:last-child,body.mx .mx-sx-promo ul:last-child{margin-bottom:0}
body.mx .mx-sx-promo a{color:var(--mx-navy);font-weight:700;text-decoration:underline}
@media (min-width:768px){
  body.mx .mx-sx-promo{padding-right:120px}
  body.mx .mx-sx-promo::after{content:"";position:absolute;right:32px;top:50%;width:54px;height:54px;margin-top:-27px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(100deg,var(--mx-blue) 52%,var(--mx-paper) 52%);box-shadow:4px 4px 0 var(--mx-navy)}
}
/* bảng một dòng → các ô số liệu */
body.mx .mx-sx-kv,body.mx .mx-sx-kv>tbody,body.mx .mx-sx-kv>tbody>tr,body.mx .mx-sx-kv>tbody>tr>td{display:block}
body.mx .table.mx-sx-kv{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;margin-bottom:26px}
body.mx .mx-sx-kv>thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body.mx .mx-sx-kv>tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.mx .mx-sx-kv>tbody>tr:hover{background:none}
body.mx .table.mx-sx-kv>tbody>tr>td{min-width:0;padding:13px 16px 15px;border:2px solid var(--mx-navy);border-radius:18px;background:var(--mx-paper);box-shadow:0 4px 0 var(--mx-navy);color:var(--mx-navy)}
body.mx .mx-sx-kv td[data-label]::before{content:attr(data-label);display:block;margin-bottom:5px;font:700 11.5px/1.3 var(--mx-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
body.mx .mx-sx-kv__v{display:block;font:800 26px/1.15 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;overflow-wrap:anywhere}
body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__link{grid-column:1/-1;background:var(--mx-sky)}
body.mx .mx-sx-kv__link .mx-sx-kv__v{margin-top:2px;padding:10px 12px;border:2px dashed rgba(31,75,224,.5);border-radius:12px;background:#fff;color:var(--mx-blue-d);font:700 16px/1.4 var(--mx-sans);letter-spacing:0;-webkit-user-select:all;user-select:all;cursor:text}
body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__total{background:var(--mx-blue);color:#fff}
body.mx .mx-sx-kv td.mx-sx-kv__total[data-label]::before{color:var(--mx-on-blue)}
body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__avail{background:var(--mx-sun)}
body.mx .mx-sx-kv td.mx-sx-kv__avail[data-label]::before{color:var(--mx-navy)}
body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__act{grid-column:1/-1;padding:0;border:0;background:none;box-shadow:none;text-align:right}
body.mx .mx-sx-kv__act .btn{padding:12px 24px;font-size:15px;box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mx-sx-kv__act .btn,body.mx .mx-sx-kv__act .btn:hover,body.mx .mx-sx-kv__act .btn:focus{background:var(--mx-navy);color:var(--mx-sun)}
body.mx .mx-sx-kv__act .btn:hover{box-shadow:0 6px 0 var(--mx-blue)}
body.mx .mx-sx-tablecard>.mx-sx-subhead{margin:6px 0 14px}
@media (min-width:768px){
  body.mx .mx-sx-ref>tbody>tr{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
  body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__link{grid-column:auto}
  body.mx .mx-sx-stats>tbody>tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  body.mx .mx-sx-kv__v{font-size:30px}
}
@media (max-width:767px){
  body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__total,body.mx .table.mx-sx-kv>tbody>tr>td.mx-sx-kv__avail{grid-column:1/-1}
  body.mx .mx-sx-kv__act .btn{width:100%}
  body.mx .mx-p-affiliates .mx-sx-stack>tbody>tr>td.mx-sx-c-amount{order:1;margin-left:0;text-align:left}
  body.mx .mx-p-affiliates .mx-sx-stack>tbody>tr>td.mx-sx-c-status{order:2;margin-left:auto}
  body.mx .mx-p-affiliates .mx-sx-stack>tbody>tr>td.mx-sx-c-date{order:3;flex:1 1 100%}
}

/* ---------- Child panel ---------- */
body.mx .mx-sx-alert-act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
body.mx .mx-sx-alert-act>.pull-right{order:2;margin-left:auto}
body.mx .mx-sx-alert-act>.text-right{flex:1 1 100%}
body.mx .mx-sx-alert-act .btn{padding:7px 16px;font-size:13.5px;color:var(--mx-navy);text-decoration:none;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .mx-p-childpanel .mx-sx-table>tbody>tr>td.mx-sx-c-main{font-weight:700;color:var(--mx-navy)}
body.mx .mx-p-childpanel .mx-sx-table>tbody>tr>td.mx-sx-c-meta{font-variant-numeric:tabular-nums;color:var(--mx-muted)}
@media (max-width:767px){
  body.mx .mx-p-childpanel .mx-sx-stack>tbody>tr>td.mx-sx-c-main{order:1;flex:1 1 auto;width:auto;margin:0;font-size:16.5px}
  body.mx .mx-p-childpanel .mx-sx-stack>tbody>tr>td.mx-sx-c-status{order:2}
  body.mx .mx-p-childpanel .mx-sx-stack>tbody>tr>td.mx-sx-c-meta{order:3;flex:1 1 40%;white-space:normal;color:var(--mx-navy)}
  body.mx .mx-p-childpanel .mx-sx-stack>tbody>tr>td.mx-sx-c-act{order:4;flex:1 1 100%;margin:10px 0 0}
  body.mx .mx-p-childpanel .mx-sx-c-act .btn{display:block;width:100%;padding:9px 16px;font-size:14px}
}
/* đặt child panel */
body.mx .mx-sx-ns{margin-bottom:20px}
body.mx .mx-sx-ns ul{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0 -20px;list-style:none}
body.mx .mx-sx-ns li{padding:5px 12px;border:2px solid var(--mx-navy);border-radius:10px;background:#fff;color:var(--mx-blue-d);font:700 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;-webkit-user-select:all;user-select:all;overflow-wrap:anywhere}
body.mx .mx-sx-price #price{height:62px;border:2px solid var(--mx-navy);background:#fff3cf;color:var(--mx-navy);font:800 26px/1.1 var(--mx-display);font-variation-settings:"SOFT" 100;font-variant-numeric:lining-nums tabular-nums}

/* ---------- API ---------- */
body.mx .mx-sx-doc .center-big-content-block{counter-reset:mxapi}
body.mx .mx-sx-head--in{margin-bottom:22px}
body.mx .mx-sx-head--in h2{margin:0;font-size:34px}
body.mx .mx-p-api .width-40{min-width:0}
body.mx .table.mx-sx-apitable{border-color:var(--mx-navy);border-radius:16px;box-shadow:0 4px 0 var(--mx-navy);margin-bottom:22px;table-layout:fixed}
body.mx .mx-sx-apitable>thead>tr>th{border:0;padding:12px 14px}
body.mx .mx-sx-apitable>tbody>tr>td{border:0;border-top:1px solid var(--mx-line);padding:11px 14px;font-size:14.5px;overflow-wrap:anywhere}
body.mx .mx-sx-apitable>tbody>tr:first-child>td{border-top:0}
body.mx .mx-sx-apitable>tbody>tr>td+td{border-left:1px solid var(--mx-line)}
body.mx .mx-sx-apitable>tbody>tr>td:first-child{background:rgba(231,237,255,.6);color:var(--mx-blue-d);font:600 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
body.mx .mx-sx-apiinfo>tbody>tr>td:first-child{color:var(--mx-navy);font:700 14px/1.5 var(--mx-sans)}
body.mx .mx-sx-apitable td.mx-sx-code{font:600 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;color:var(--mx-blue-d);-webkit-user-select:all;user-select:all}
body.mx .mx-sx-method{display:flex;align-items:center;gap:12px;margin:34px 0 14px;padding-top:26px;border-top:2px dashed var(--mx-line)}
body.mx .mx-sx-method::before{counter-increment:mxapi;content:counter(mxapi,decimal-leading-zero);flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mx-navy);box-shadow:3px 3px 0 var(--mx-blue);color:var(--mx-sun);font:800 15px/1 var(--mx-display)}
body.mx .mx-sx-method strong{font:800 22px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mx-sx-doc .form-inline .form-group{margin:0 0 14px}
body.mx .mx-sx-doc #service_type{width:auto;min-width:230px;max-width:100%}
body.mx .mx-sx-exlabel{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mx-muted)}
body.mx .mx-sx-exlabel strong{font-weight:700}
body.mx pre.mx-sx-pre{max-height:440px;overflow:auto;margin:0 0 6px;padding:16px 18px;border-radius:16px;box-shadow:0 5px 0 var(--mx-blue);font:500 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;white-space:pre;word-break:normal;overflow-wrap:normal}
body.mx .mx-sx-phpbtn{margin-top:30px}
body.mx .mx-sx-phpbtn::before{content:"</>";margin-right:8px;color:var(--mx-blue);font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (max-width:767px){
  body.mx .mx-sx-head--in h2{font-size:30px}
  body.mx .mx-sx-apitable>tbody>tr>td{padding:10px 11px;font-size:14px}
  body.mx .mx-sx-method strong{font-size:20px}
  body.mx .mx-sx-phpbtn{display:block;width:100%}
}

/* ===== 40-account-content.css ===== */
/* 40-account-content: Tài khoản (account, notifications) + trang nội dung
   (faq, terms, blog, blogpost, newpage và 2 trang tùy chỉnh dùng chung khung newpage).
   Mọi luật đều gắn vào lớp riêng của trang: .mx-p-account, .mx-p-notif, .mx-p-content,
   .mx-p-faq, .mx-p-terms, .mx-p-page, .mx-p-blog, .mx-p-post, và #changeEmailModal. */

/* ---------- icon nét dùng chung ---------- */
body.mx .mx-ac-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   TÀI KHOẢN · bố cục: thẻ hồ sơ + tab (trái) · các thẻ cài đặt (phải)
   ===================================================================== */
body.mx .mx-acc{display:grid;gap:26px}
body.mx .mx-acc>*{min-width:0}
@media (min-width:992px){
  body.mx .mx-acc{grid-template-columns:264px minmax(0,1fr);gap:34px;align-items:start}
  body.mx .mx-acc__side{position:-webkit-sticky;position:sticky;top:24px}
}

/* thẻ hồ sơ */
body.mx .mx-acc__card{position:relative;background:var(--mx-paper);border:2px solid var(--mx-navy);border-radius:var(--mx-r);box-shadow:var(--mx-shadow);overflow:hidden;padding-bottom:14px}
body.mx .mx-acc__art{display:block;height:54px;border-bottom:2px solid var(--mx-navy);background:var(--mx-sky)}
body.mx .mx-acc__art svg{display:block;width:100%;height:100%}
body.mx .mx-acc__avatar{position:absolute;left:16px;top:24px;width:66px;height:66px;border-radius:50%;background:var(--mx-paper);box-shadow:0 0 0 4px var(--mx-paper)}
body.mx .mx-acc__avatar svg{display:block;width:100%;height:100%}
body.mx .mx-acc__who{display:flex;flex-direction:column;min-width:0;min-height:44px;padding:8px 16px 0 98px}
body.mx .mx-acc__kicker{font-size:11.5px;font-weight:800;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mx-acc__name{font:800 22px/1.15 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--mx-navy);overflow-wrap:anywhere}
body.mx .mx-acc__mail{font-size:13.5px;line-height:1.5;color:var(--mx-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* tab Chung / Thông báo: viên thuốc 2 nửa trên điện thoại, danh sách dọc trên máy tính */
body.mx .mx-acc__tabs{display:flex;gap:4px;margin:16px 14px 0;padding:4px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-cream)}
body.mx .mx-acc__tabs:before,body.mx .mx-acc__tabs:after{display:none}
body.mx .mx-acc__tabs>li{float:none;flex:1 1 0;min-width:0;margin:0}
body.mx .mx-acc__tabs>li+li{margin-left:0}
body.mx .mx-acc__tabs>li>a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:0;border-radius:999px;font-size:14.5px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none}
body.mx .mx-acc__tabs>li>a:hover,body.mx .mx-acc__tabs>li>a:focus{background:var(--mx-sky)}
body.mx .mx-acc__tabs>li.active>a,body.mx .mx-acc__tabs>li.active>a:hover,body.mx .mx-acc__tabs>li.active>a:focus{background:var(--mx-navy);color:#fff}
body.mx .mx-acc__tabs>li.active>a .mx-ac-i{color:var(--mx-sun)}

@media (min-width:992px){
  body.mx .mx-acc__art{height:96px}
  body.mx .mx-acc__avatar{left:50%;top:52px;width:88px;height:88px;margin-left:-44px}
  body.mx .mx-acc__who{align-items:center;min-height:0;padding:50px 18px 0;text-align:center}
  body.mx .mx-acc__mail{max-width:100%}
  body.mx .mx-acc__tabs{flex-direction:column;gap:6px;margin:18px 0 0;padding:14px 14px 0;border:0;border-top:2px dashed var(--mx-line);border-radius:0;background:transparent}
  body.mx .mx-acc__tabs>li{flex:none}
  body.mx .mx-acc__tabs>li>a{justify-content:flex-start;gap:12px;padding:11px 16px;font-size:15px}
}

/* ---------- thẻ cài đặt ---------- */
body.mx .mx-ac-set{position:relative;margin-bottom:28px}
body.mx .mx-ac-set p{color:var(--mx-muted);margin:0 0 18px}
body.mx .mx-ac-set__head{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding-bottom:16px;border-bottom:2px dashed var(--mx-line)}
body.mx .mx-ac-set__head>h2,body.mx .mx-ac-set__head>h5,body.mx .mx-ac-set__head>label{min-width:0;margin:0;font:800 22px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--mx-navy)}
@media (min-width:768px){
  body.mx .mx-ac-set__head>h2,body.mx .mx-ac-set__head>h5,body.mx .mx-ac-set__head>label{font-size:24px}
}

/* ô biểu tượng hai màu cắt chéo (kiểu lập thể) */
body.mx .mx-ac-ic{--a:var(--mx-sky);--b:var(--mx-sun);flex:none;display:grid;place-items:center;width:46px;height:46px;border:2px solid var(--mx-navy);border-radius:14px;box-shadow:0 3px 0 var(--mx-navy);background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);color:var(--mx-navy)}
body.mx .mx-ac-ic svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.mx .mx-ac-set--password .mx-ac-ic{--a:#ffe1d8;--b:var(--mx-sun)}
body.mx .mx-ac-set--2fa .mx-ac-ic{--a:#d6f2e4;--b:var(--mx-sky)}
body.mx .mx-ac-set--lang .mx-ac-ic{--a:var(--mx-sun);--b:var(--mx-sky)}
body.mx .mx-ac-set--invoice .mx-ac-ic{--a:var(--mx-sky);--b:#ffe1d8}
body.mx .mx-ac-set--tz .mx-ac-ic{--a:#d6f2e4;--b:var(--mx-sun)}
body.mx .mx-ac-set--api .mx-ac-ic{--a:var(--mx-navy);--b:var(--mx-blue);color:var(--mx-sun)}
body.mx .mx-ac-set--confirm .mx-ac-ic{--a:var(--mx-sun);--b:var(--mx-sky)}
body.mx .mx-ac-set--tg .mx-ac-ic{--a:var(--mx-sky);--b:#cdeaf8}
body.mx .mx-ac-set--matrix .mx-ac-ic{--a:var(--mx-sun);--b:#ffe1d8}

/* nhãn trạng thái (2FA đang bật) */
body.mx .mx-ac-badge{display:inline-block;margin:0 0 0 6px;padding:3px 10px 3px 8px;vertical-align:4px;border:2px solid var(--mx-navy);border-radius:999px;background:#d6f2e4;color:var(--mx-navy);font:800 11.5px/1.3 var(--mx-sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
body.mx .mx-ac-badge:before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--mx-green);vertical-align:1px}

/* hai ô cạnh nhau (tên + email, mật khẩu mới + nhập lại) */
@media (min-width:768px){
  body.mx .mx-ac-set__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  /* email thường dài hơn tên đăng nhập */
  body.mx .mx-ac-set--profile .mx-ac-set__grid{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}

/* thông báo có nút ×: chừa chỗ cho nút (Bootstrap đẩy nút sang phải 21px) */
body.mx .mx-p-account .alert-dismissible,body.mx .mx-p-content .alert-dismissible{padding-right:44px}

/* thẻ một ô chọn (ngôn ngữ, múi giờ): ô chọn và nút Lưu cùng hàng */
@media (min-width:600px){
  body.mx .mx-ac-set--row form{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:end}
  body.mx .mx-ac-set--row .form-group{display:contents}
  body.mx .mx-ac-set--row .mx-ac-set__head{grid-column:1 / -1}
  body.mx .mx-ac-set--row .btn{min-height:50px}
}

/* 2FA: tiêu đề luôn nằm trên cùng (khối lỗi vẫn giữ nguyên chỗ trong mã) */
body.mx .mx-ac-set--2fa{display:flex;flex-direction:column}
body.mx .mx-ac-set--2fa>.mx-ac-set__head{order:-1}

/* API key */
body.mx .mx-p-account #api_key{font:600 14.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;letter-spacing:.02em;text-overflow:ellipsis}
body.mx .mx-p-account .help-block{margin:8px 0 0;font-size:13.5px}

/* ---------- trang Thông báo ---------- */
body.mx .mx-ac-set--cta{isolation:isolate;overflow:hidden}
body.mx .mx-ac-set--cta:after{content:"";position:absolute;z-index:-1;right:-46px;bottom:-70px;width:170px;height:170px;border-radius:50%;background:var(--mx-sun);opacity:.3;pointer-events:none}
body.mx .mx-ac-set--tg:after{background:var(--mx-blue);opacity:.12}
body.mx .mx-ac-set--tg p{margin-bottom:0}
@media (min-width:768px){
  body.mx .mx-p-notif .btn-block{display:inline-block;width:auto;min-width:220px}
  body.mx .mx-ac-set--tg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
  body.mx .mx-ac-set--tg>.mx-ac-set__head{flex:1 1 260px;margin:0;padding:0;border:0}
}

/* bảng chọn kênh nhận thông báo */
body.mx .mx-ac-set--matrix .table{overflow:visible;box-shadow:none;border-radius:18px;margin-bottom:22px;background:#fff}
body.mx .mx-ac-set--matrix .table>thead>tr>th{padding:12px 14px}
body.mx .mx-ac-set--matrix .table>thead>tr>th:first-child{border-top-left-radius:16px;text-align:left}
body.mx .mx-ac-set--matrix .table>thead>tr>th:last-child{border-top-right-radius:16px}
body.mx .mx-ac-set--matrix .table>thead>tr>th+th,body.mx .mx-ac-set--matrix .table>tbody>tr>td+td{width:1%;text-align:center;white-space:nowrap;padding-left:10px;padding-right:10px}
body.mx .mx-ac-set--matrix .table>tbody>tr>td{padding-top:13px;padding-bottom:13px;font-weight:500;color:var(--mx-ink)}
body.mx .mx-ac-set--matrix .table>tbody>tr:nth-child(even)>td{background:rgba(231,237,255,.45)}
body.mx .mx-ac-set--matrix .table>tbody>tr:last-child>td:first-child{border-bottom-left-radius:16px}
body.mx .mx-ac-set--matrix .table>tbody>tr:last-child>td:last-child{border-bottom-right-radius:16px}
body.mx .mx-ac-set--matrix .table>tbody>tr:hover>td{background:#fff6dc}
body.mx .mx-ac-set--matrix td>span{display:inline-block;line-height:0}
body.mx .mx-ac-set--matrix input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:26px;height:26px;margin:0;vertical-align:middle;border:2px solid var(--mx-navy);border-radius:8px;background:#fff;box-shadow:0 2px 0 var(--mx-navy);cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s}
body.mx .mx-ac-set--matrix input[type=checkbox]:hover{background-color:var(--mx-sky)}
body.mx .mx-ac-set--matrix input[type=checkbox]:checked{background:var(--mx-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px}
body.mx .mx-ac-set--matrix input[type=checkbox]:active{transform:translateY(2px);box-shadow:0 0 0 var(--mx-navy)}
body.mx .mx-ac-set--matrix input[type=checkbox]:focus-visible{outline:3px solid var(--mx-blue);outline-offset:3px}
body.mx .mx-ac-set--matrix input[type=checkbox]:disabled{cursor:not-allowed;opacity:.45;box-shadow:none;background-color:var(--mx-sky);transform:none}
@media (max-width:479px){
  body.mx .mx-ac-set--matrix .table>thead>tr>th{font-size:11.5px;letter-spacing:.04em;padding:11px 8px}
  body.mx .mx-ac-set--matrix .table>thead>tr>th:first-child,body.mx .mx-ac-set--matrix .table>tbody>tr>td:first-child{padding-left:12px}
  body.mx .mx-ac-set--matrix .table>tbody>tr>td{font-size:14px;padding:12px 8px}
}

/* ---------- hộp thoại đổi email ---------- */
@media (min-width:768px){body.mx #changeEmailModal .modal-dialog{width:520px}}
body.mx #changeEmailModal .modal-header{padding:22px 24px 18px}
body.mx #changeEmailModal .modal-header .close{width:38px;height:38px;margin:-6px -6px 0 12px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);opacity:1;color:var(--mx-navy);font:400 24px/1 var(--mx-sans);text-shadow:none}
body.mx #changeEmailModal .modal-header .close:hover,body.mx #changeEmailModal .modal-header .close:focus{background:var(--mx-sky)}
body.mx #changeEmailModal .modal-title:before{content:"";display:inline-block;width:16px;height:16px;margin-right:10px;vertical-align:0;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-blue) 50%,var(--mx-sun) 50%)}
body.mx #changeEmailModal .modal-body{padding:22px 24px 6px}
body.mx #changeEmailModal .modal-footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;padding:16px 24px 24px}
body.mx #changeEmailModal .modal-footer:before,body.mx #changeEmailModal .modal-footer:after{display:none}
body.mx #changeEmailModal .modal-footer .btn+.btn{margin-left:0}
body.mx #current-email{display:block;line-height:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* =====================================================================
   TRANG NỘI DUNG · FAQ, điều khoản, trang tùy chỉnh, blog
   ===================================================================== */
body.mx .mx-p-content{position:relative}
body.mx .mx-p-content>.row{position:relative;z-index:1}
/* mảng xanh lập thể treo dưới thanh điều hướng, ló ra sau thẻ nội dung (chỉ màn rộng) */
body.mx .mx-p-content__shape{display:none}
@media (min-width:992px){
  body.mx .mx-p-content__shape{display:block;position:absolute;z-index:0;top:-36px;right:15px;width:31%;height:330px;background:var(--mx-blue);-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 64%);clip-path:polygon(0 0,100% 0,100% 100%,0 64%);pointer-events:none}
  body.mx .mx-p-content__shape:before{content:"";position:absolute;right:34px;top:136px;width:76px;height:76px;border-radius:50%;background:var(--mx-sun);box-shadow:inset 0 0 0 2px var(--mx-navy),6px 6px 0 var(--mx-navy)}
  body.mx .mx-p-content__shape:after{content:"";position:absolute;right:30px;top:62px;width:92px;height:10px;background:radial-gradient(circle,var(--mx-paper) 0 4px,transparent 4.5px) 0 0/18px 10px repeat-x}
}

/* thẻ nội dung + nhãn dán */
body.mx .mx-ac-doc{position:relative}
body.mx .mx-ac-doc__sticker{position:absolute;top:-26px;right:22px;width:66px;height:66px;transform:rotate(8deg);pointer-events:none}
body.mx .mx-ac-doc__sticker--eye{width:78px;height:62px;transform:rotate(-6deg)}
body.mx .mx-ac-doc__sticker svg{display:block;width:100%;height:100%;overflow:visible}
body.mx .mx-ac-doc>.mx-ac-prose>:first-child{margin-right:66px}
@media (max-width:767px){
  body.mx .mx-ac-doc__sticker{top:-18px;right:14px;width:50px;height:50px}
  body.mx .mx-ac-doc__sticker--eye{width:60px;height:48px}
  body.mx .mx-ac-doc>.mx-ac-prose>:first-child{margin-right:48px}
}

/* ---------- chữ nội dung admin soạn (.mx-ac-prose) ---------- */
body.mx .mx-ac-prose{font-size:16px;line-height:1.7;overflow-wrap:break-word}
@media (min-width:768px){body.mx .mx-ac-prose{font-size:16.5px}}
body.mx .mx-ac-prose>:first-child{margin-top:0}
body.mx .mx-ac-prose>:last-child{margin-bottom:0}
body.mx .mx-ac-prose h1{margin:0 0 18px;font-size:clamp(30px,4.2vw,42px);line-height:1.1;letter-spacing:-.02em}
body.mx .mx-ac-prose h2{margin:40px 0 14px;font-size:clamp(25px,3vw,32px);line-height:1.12;letter-spacing:-.015em}
body.mx .mx-ac-prose h2:after,body.mx .mx-ac-prose h1:after{content:"";display:block;width:56px;height:6px;margin-top:12px;border-radius:4px;background:var(--mx-sun)}
body.mx .mx-ac-prose h3{margin:32px 0 10px;font-size:clamp(20px,2.3vw,23px);line-height:1.25}
body.mx .mx-ac-prose h4{margin:26px 0 8px;font-size:18px;line-height:1.35}
body.mx .mx-ac-prose h5,body.mx .mx-ac-prose h6{margin:24px 0 8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mx-ac-prose p{margin:0 0 16px}
body.mx .mx-ac-prose strong,body.mx .mx-ac-prose b{font-weight:700;color:var(--mx-navy)}
body.mx .mx-ac-prose small{font-size:88%;color:var(--mx-muted)}
body.mx .mx-ac-prose a:not(.btn){font-weight:600;text-decoration:underline;text-decoration-color:rgba(31,75,224,.35);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
body.mx .mx-ac-prose a:not(.btn):hover{color:var(--mx-navy);text-decoration-color:var(--mx-sun)}
body.mx .mx-ac-prose hr{margin:30px 0}

/* danh sách: tam giác xanh / số trong vòng tròn */
body.mx .mx-ac-prose ul,body.mx .mx-ac-prose ol{margin:0 0 18px;padding:0;list-style:none}
body.mx .mx-ac-prose li{position:relative;margin:0 0 8px}
body.mx .mx-ac-prose li>ul,body.mx .mx-ac-prose li>ol{margin:8px 0 0}
body.mx .mx-ac-prose ul>li{padding-left:26px}
body.mx .mx-ac-prose ul>li:before{content:"";position:absolute;left:3px;top:.55em;width:11px;height:12px;background:var(--mx-blue);-webkit-clip-path:polygon(0 0,100% 50%,0 100%);clip-path:polygon(0 0,100% 50%,0 100%)}
body.mx .mx-ac-prose li li:before{background:var(--mx-coral)}
body.mx .mx-ac-prose ol{counter-reset:mx-ol}
body.mx .mx-ac-prose ol>li{counter-increment:mx-ol;min-height:28px;padding-left:40px}
body.mx .mx-ac-prose ol>li:before{content:counter(mx-ol);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-sun);color:var(--mx-navy);font:800 13.5px/1 var(--mx-sans);-webkit-clip-path:none;clip-path:none}
/* danh sách có start / type / reversed: để trình duyệt tự đánh số cho đúng */
body.mx .mx-ac-prose ol[start],body.mx .mx-ac-prose ol[type],body.mx .mx-ac-prose ol[reversed]{padding-left:1.6em;list-style:decimal}
body.mx .mx-ac-prose ol[type=a]{list-style-type:lower-alpha}
body.mx .mx-ac-prose ol[type=A]{list-style-type:upper-alpha}
body.mx .mx-ac-prose ol[type=i]{list-style-type:lower-roman}
body.mx .mx-ac-prose ol[type=I]{list-style-type:upper-roman}
body.mx .mx-ac-prose ol[start]>li,body.mx .mx-ac-prose ol[type]>li,body.mx .mx-ac-prose ol[reversed]>li{min-height:0;padding-left:4px}
body.mx .mx-ac-prose ol[start]>li:before,body.mx .mx-ac-prose ol[type]>li:before,body.mx .mx-ac-prose ol[reversed]>li:before{display:none}
body.mx .mx-ac-prose ol>li::marker{font-weight:800;color:var(--mx-blue)}

/* trích dẫn */
body.mx .mx-ac-prose blockquote{position:relative;margin:26px 0;padding:16px 20px 16px 60px;border:2px solid var(--mx-navy);border-radius:18px;background:var(--mx-sky);color:var(--mx-navy);font-size:inherit;font-weight:500}
body.mx .mx-ac-prose blockquote:before{content:"";position:absolute;left:18px;top:17px;width:26px;height:26px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-blue) 50%,var(--mx-sun) 50%)}
body.mx .mx-ac-prose blockquote p:last-child,body.mx .mx-ac-prose blockquote ul:last-child,body.mx .mx-ac-prose blockquote ol:last-child{margin-bottom:0}
body.mx .mx-ac-prose blockquote footer,body.mx .mx-ac-prose blockquote small{color:var(--mx-muted)}
@media (max-width:479px){
  body.mx .mx-ac-prose blockquote{padding:14px 16px 14px 52px}
  body.mx .mx-ac-prose blockquote:before{left:14px;top:15px}
}

/* bảng */
body.mx .mx-ac-prose table{width:100%;margin:26px 0;border-collapse:separate;border-spacing:0;border:2px solid var(--mx-navy);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 0 var(--mx-navy);font-size:15px;line-height:1.5}
body.mx .mx-ac-prose th{padding:11px 14px;border:0;background:var(--mx-navy);color:#fff;font:700 12.5px/1.35 var(--mx-sans);letter-spacing:.05em;text-transform:uppercase;text-align:left;vertical-align:bottom}
body.mx .mx-ac-prose td{padding:11px 14px;border:0;border-top:1px solid var(--mx-line);vertical-align:top}
body.mx .mx-ac-prose tr:first-child>td{border-top:0}
body.mx .mx-ac-prose tbody>tr:nth-child(even)>td{background:rgba(231,237,255,.55)}
body.mx .mx-ac-prose td>p:last-child{margin:0}
@media (max-width:767px){
  body.mx .mx-ac-prose table{display:block;width:-webkit-max-content;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:14px}
  body.mx .mx-ac-prose th,body.mx .mx-ac-prose td{padding:10px 12px}
}

/* ảnh, video */
body.mx .mx-ac-prose img{max-width:100%;height:auto;border-radius:14px}
body.mx .mx-ac-prose>img,body.mx .mx-ac-prose p>img:only-child,body.mx .mx-ac-prose figure img{border:2px solid var(--mx-navy);border-radius:18px;box-shadow:0 5px 0 var(--mx-navy);vertical-align:top}
body.mx .mx-ac-prose figure{margin:26px 0}
body.mx .mx-ac-prose figcaption{margin-top:12px;font-size:14px;color:var(--mx-muted);text-align:center}
body.mx .mx-ac-prose iframe,body.mx .mx-ac-prose video{max-width:100%;border:2px solid var(--mx-navy);border-radius:16px}
body.mx .mx-ac-prose .alert{margin:22px 0}

/* FAQ: mỗi câu hỏi (h3/h4) có chấm tròn hai màu và gạch nối đứt phía trên */
body.mx .mx-p-faq .mx-ac-prose h3,body.mx .mx-p-faq .mx-ac-prose h4{position:relative;margin-top:26px;padding:22px 0 0 42px;border-top:2px dashed var(--mx-line)}
body.mx .mx-p-faq .mx-ac-prose h3:before,body.mx .mx-p-faq .mx-ac-prose h4:before{content:"";position:absolute;left:0;top:22px;width:28px;height:28px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-blue) 50%,var(--mx-sun) 50%);box-shadow:0 2px 0 var(--mx-navy)}
body.mx .mx-p-faq .mx-ac-prose h3:first-child,body.mx .mx-p-faq .mx-ac-prose h4:first-child{padding-top:0;border-top:0}
body.mx .mx-p-faq .mx-ac-prose h3:first-child:before,body.mx .mx-p-faq .mx-ac-prose h4:first-child:before{top:0}
body.mx .mx-p-faq .mx-ac-prose h3+p,body.mx .mx-p-faq .mx-ac-prose h4+p,body.mx .mx-p-faq .mx-ac-prose h3+ul,body.mx .mx-p-faq .mx-ac-prose h3+ol{margin-left:42px}
@media (max-width:479px){
  body.mx .mx-p-faq .mx-ac-prose h3+p,body.mx .mx-p-faq .mx-ac-prose h4+p,body.mx .mx-p-faq .mx-ac-prose h3+ul,body.mx .mx-p-faq .mx-ac-prose h3+ol{margin-left:0}
}

/* ---------- blog: danh sách bài ---------- */
body.mx .mx-ac-posts{display:grid;gap:28px}
@media (min-width:768px){body.mx .mx-ac-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 26px}}
body.mx .mx-ac-post{display:flex;flex-direction:column;min-width:0;margin:0;padding:22px 20px;overflow:hidden}
body.mx .mx-ac-post__img{order:-1;margin:-22px -20px 20px;border-bottom:2px solid var(--mx-navy);background:var(--mx-sky)}
body.mx .mx-ac-post__img img{display:block;width:100%;height:auto;aspect-ratio:2 / 1;object-fit:cover}
body.mx .mx-ac-post__title{margin:0 0 10px;font:800 22px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;color:var(--mx-navy);overflow-wrap:break-word}
body.mx .mx-ac-post__body{margin-bottom:20px;color:var(--mx-muted);font-size:15.5px;line-height:1.65}
body.mx .mx-ac-post__body strong,body.mx .mx-ac-post__body b{color:var(--mx-ink)}
body.mx .mx-ac-post__more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto}
body.mx .mx-ac-post__more .mx-ac-i{transition:transform .15s}
body.mx .mx-ac-post__more:hover .mx-ac-i{transform:translateX(3px)}
/* bài không có ảnh: khối màu lập thể cùng tỉ lệ 2:1 thay ảnh (để các thẻ cao bằng nhau) */
body.mx .mx-ac-post__img--art{position:relative;aspect-ratio:2 / 1;background:radial-gradient(circle at 72% 46%,var(--mx-sun) 0 19%,transparent 19.4%),linear-gradient(104deg,var(--mx-blue) 0 56%,var(--mx-navy) 56% 59.5%,var(--mx-sky) 59.5% 100%)}
body.mx .mx-ac-post__img--art:after{content:"";position:absolute;left:10%;bottom:14%;width:72px;height:10px;background:radial-gradient(circle,var(--mx-paper) 0 4px,transparent 4.5px) 0 0/18px 10px repeat-x}
@supports not (aspect-ratio:1){body.mx .mx-ac-post__img--art{height:0;padding-bottom:50%}}
body.mx .mx-ac-post:nth-child(3n+2) .mx-ac-post__img--art{background:radial-gradient(circle at 72% 46%,var(--mx-coral) 0 19%,transparent 19.4%),linear-gradient(104deg,var(--mx-navy) 0 56%,var(--mx-sun) 56% 59.5%,#fff3cf 59.5% 100%)}
body.mx .mx-ac-post:nth-child(3n+3) .mx-ac-post__img--art{background:radial-gradient(circle at 72% 46%,var(--mx-blue) 0 19%,transparent 19.4%),linear-gradient(104deg,var(--mx-sun) 0 56%,var(--mx-navy) 56% 59.5%,var(--mx-sky) 59.5% 100%)}
body.mx .mx-p-blog--list .mx-ac-blog-pages{text-align:center}
body.mx .mx-p-blog--list .pagination{margin:34px 0 10px}

/* ---------- blog: bài viết ---------- */
body.mx .mx-ac-post-full{overflow:hidden}
body.mx .mx-ac-post-full__img{margin:-26px -22px 24px;border-bottom:2px solid var(--mx-navy);background:var(--mx-sky)}
body.mx .mx-ac-post-full__img img{display:block;width:100%;height:auto}
body.mx .mx-ac-post-full__title{margin:0 0 22px;font-size:clamp(30px,4.4vw,46px);line-height:1.08;letter-spacing:-.02em;overflow-wrap:break-word}
body.mx .mx-ac-post-full__title:after{content:"";display:block;width:64px;height:7px;margin-top:16px;border-radius:4px;background:var(--mx-sun)}
@media (min-width:768px){body.mx .mx-ac-post-full__img{margin:-32px -34px 30px}}
body.mx .mx-ac-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
body.mx .mx-ac-back .mx-ac-i{transition:transform .15s}
body.mx .mx-ac-back:hover .mx-ac-i{transform:translateX(-3px)}

/* ===== 90-team.css ===== */
/* 90-team: khối "Đội ngũ hỗ trợ" (trang đăng nhập) + liên hệ nhanh có ảnh (trang Hỗ trợ) */
body.mx .mx-team{padding:8px 0 64px}
body.mx .mx-team__grid{display:grid;gap:28px;align-items:center}
body.mx .mx-team__photo{position:relative;margin:0}
body.mx .mx-team__photo:before{content:"";position:absolute;z-index:-1;inset:18px -12px -14px 18px;border-radius:30px;background:var(--mx-blue)}
body.mx .mx-team__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--mx-navy);border-radius:28px;box-shadow:0 7px 0 var(--mx-navy);background:var(--mx-sky)}
body.mx .mx-team__photo figcaption{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border:2px solid var(--mx-navy);border-radius:16px;background:rgba(255,253,248,.95);font-size:13px;line-height:1.35;color:var(--mx-muted)}
body.mx .mx-team__photo figcaption b{font:800 15px/1.2 var(--mx-sans);color:var(--mx-navy)}
body.mx .mx-team__kicker{margin:0 0 8px;font:700 12.5px/1 var(--mx-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mx-team__text h2{margin:0;font-size:34px}
body.mx .mx-team__lead{margin:10px 0 20px;font-size:16px;line-height:1.55;color:var(--mx-muted);max-width:30em}
body.mx .mx-team__people{display:grid;gap:14px}
body.mx .mx-person{display:flex;align-items:center;gap:14px;padding:12px;border:2px solid var(--mx-navy);border-radius:22px;background:var(--mx-paper);box-shadow:0 5px 0 var(--mx-navy)}
body.mx .mx-person img{flex:none;width:78px;height:78px;border-radius:50%;object-fit:cover;border:2px solid var(--mx-navy);box-shadow:4px 4px 0 var(--mx-sun)}
body.mx .mx-person__body{display:flex;flex-direction:column;min-width:0}
body.mx .mx-person__body b{font:800 19px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mx-person__body small{font-size:13px;font-weight:600;color:var(--mx-muted)}
body.mx .mx-person__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
body.mx .mx-person__actions .btn{white-space:nowrap}
body.mx .mx-person__actions .btn i{margin-right:4px}
@media (min-width:600px){body.mx .mx-team__people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:991px){body.mx .mx-person{flex-direction:column;text-align:center}body.mx .mx-person__actions{justify-content:center}}
@media (min-width:992px){
  body.mx .mx-team{padding:24px 0 96px}
  body.mx .mx-team__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px}
  body.mx .mx-team__text h2{font-size:44px}
}
@media (min-width:992px) and (max-width:1439px){body.mx .mx-person{flex-direction:column;align-items:flex-start}}

/* trang Hỗ trợ: liên hệ nhanh */
body.mx .mx-team-mini{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 22px}
body.mx .mx-team-mini p{margin:0;font-weight:700;color:var(--mx-navy)}
body.mx a.mx-team-mini__p{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);color:var(--mx-navy);text-decoration:none;transition:transform .15s,box-shadow .15s}
body.mx a.mx-team-mini__p:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--mx-navy);color:var(--mx-navy)}
body.mx .mx-team-mini__p img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--mx-navy)}
body.mx .mx-team-mini__p span{display:flex;flex-direction:column;line-height:1.15}
body.mx .mx-team-mini__p b{font-size:14px}
body.mx .mx-team-mini__p small{font-size:12px;color:var(--mx-muted)}

/* ===== 91-tos.css ===== */
/* 91-tos: popup "Điều khoản dịch vụ" (script trong code tích hợp của panel) theo phong cách Picasso + trang /terms dựng sẵn */
body.mx #mxtb-tos-overlay{background:rgba(10,26,68,.72)}
body.mx #mxtb-tos-box{padding:24px 22px 22px;border:2px solid var(--mx-navy);border-radius:26px;background:var(--mx-paper);box-shadow:0 8px 0 var(--mx-navy);font-family:var(--mx-sans);color:var(--mx-ink)}
body.mx #mxtb-tos-box h2{margin:0 0 14px;font:800 24px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx #mxtb-tos-box h2:before{content:"";display:inline-block;width:14px;height:14px;margin-right:10px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-blue) 50%,var(--mx-sun) 50%);vertical-align:1px}
body.mx #mxtb-tos-scroll{border:2px solid var(--mx-line);border-radius:16px;background:#fff;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--mx-ink)}
body.mx #mxtb-tos-scroll li::marker{font-weight:800;color:var(--mx-blue)}
body.mx #mxtb-tos-box a{color:var(--mx-blue);font-weight:700}
body.mx #mxtb-tos-hint{color:#c2401f;font-weight:600}
body.mx .mxtb-tos-row{align-items:center}
body.mx .mxtb-tos-row label{margin:0;font-size:14px;font-weight:500;color:var(--mx-ink)}
body.mx #mxtb-tos-btn{padding:13px;border:2px solid var(--mx-navy);border-radius:999px;background:#d5dae8;color:var(--mx-muted);font:700 16px/1.2 var(--mx-sans);box-shadow:0 4px 0 var(--mx-navy);transition:transform .15s,box-shadow .15s}
body.mx #mxtb-tos-btn.active{background:var(--mx-blue);color:#fff}
body.mx #mxtb-tos-btn.active:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--mx-navy)}
/* nút Telegram/chat không đè lên popup */
body.mx.mxtb-tos-lock .integration-fixed{display:none}

/* trang /terms dựng sẵn */
body.mx .mx-terms-meta{margin:-4px 0 18px;font-size:14px;color:var(--mx-muted)}

/* ===== 92-menu.css ===== */
/* 92-menu: nút "Thêm" gom mục phụ của menu khi đã đăng nhập (JS trong layout.twig) + icon menu khách */
body.mx .mx-more{display:none}
@media (min-width:768px){
  body.mx.mx-auth #navbar.navbar-collapse .mx-extra{display:none}
  body.mx.mx-auth #navbar.navbar-collapse .mx-more{display:block;position:relative}
  body.mx.mx-auth #navbar.navbar-collapse .mx-more>a .caret{display:none}
}
body.mx .mx-more__menu{min-width:230px;margin-top:10px}
body.mx .mx-more__menu>li>a{display:flex!important;align-items:center;gap:10px;padding:9px 12px;font-size:14.5px;font-weight:600;white-space:nowrap}
body.mx .mx-more__menu .navbar-icon{display:grid!important;place-items:center;flex:none;width:28px;height:28px;margin:0!important;border-radius:8px;background:var(--mx-sky);color:var(--mx-blue-d)!important;font-size:13px!important;opacity:1!important}
body.mx .mx-more__menu>li.active>a{background:var(--mx-navy);color:#fff}
body.mx .mx-more__menu>li.active>a .navbar-icon{background:var(--mx-blue);color:var(--mx-sun)!important}
body.mx .mx-more__menu .mx-navdot{margin-left:auto}

/* menu khách: icon nhỏ cạnh chữ */
body.mx.mx-guest .navbar-nav.navbar-right .navbar-icon{margin-right:6px;font-size:13px;opacity:.75}
body.mx.mx-guest .navbar-nav.navbar-right>li.active .navbar-icon{opacity:1;color:var(--mx-sun)}

/* panel tự gắn nhãn số ticket chưa đọc vào tên mục menu (.badge): hiện thành chấm đỏ, bỏ chấm trùng của theme */
body.mx #navbar .navbar-left-block li>a>.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border:0;border-radius:999px;background:var(--mx-coral);color:#fff;font:800 11px/1 var(--mx-sans);box-shadow:0 0 0 2px var(--mx-paper);vertical-align:1px}
body.mx #navbar .navbar-left-block li>a>.badge~.mx-navdot{display:none}

/* ===== 93-select-fix.css ===== */
/* 93-select-fix: select2 của panel gắn thêm class .form-control vào ô chọn → bỏ khoảng đệm của .form-control
   để chữ, icon danh mục và nhãn ID dịch vụ nằm giữa ô (trang Đặt hàng mới) */
body.mx .select2-container .select2-selection--single.form-control{padding:0!important;height:50px}
body.mx .select2-container .select2-selection--single .select2-selection__rendered{display:block;height:46px;line-height:46px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.mx .select2-container .select2-selection--single .select2-selection__arrow{top:0;height:46px}
body.mx .select2-selection__icon{display:inline-flex!important;align-items:center;justify-content:center;width:22px;height:22px;margin:0 8px 0 0;vertical-align:middle;line-height:1}
body.mx .select2-selection__icon img{width:20px;height:20px;object-fit:contain}
body.mx .select2-selection__text{vertical-align:middle}
body.mx .select2-selection__id.badge{display:inline-block;margin:0 6px 0 0;padding:4px 9px;border:0;border-radius:999px;background:var(--mx-navy);color:#fff;font:800 12px/1 var(--mx-sans);vertical-align:middle}
body.mx .select2-results__option .select2-selection__id.badge{background:var(--mx-sky);color:var(--mx-navy)}
body.mx .select2-results__option--highlighted .select2-selection__id.badge{background:#fff;color:var(--mx-blue)}

/* ===== 94-blog.css ===== */
/* 94-blog: trang Blog (blog.twig) và bài viết (blogpost.twig). Mọi luật gắn vào lớp riêng .mxb-*;
   chữ bài viết dùng chung .mx-ac-prose (40-account-content) rồi chỉnh thêm bằng .mxb-prose. */

body.mx .mxb{position:relative;padding-bottom:18px}
body.mx .mxb [hidden]{display:none!important}
body.mx .mxb img{max-width:100%}

/* ---------- breadcrumb ---------- */
body.mx .mxb-crumbs{margin:-10px 0 20px;font-size:13.5px;font-weight:600;color:var(--mx-muted)}
body.mx .mxb-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0;padding:0;list-style:none}
body.mx .mxb-crumbs li{display:flex;align-items:center;min-width:0;max-width:100%}
body.mx .mxb-crumbs li+li:before{content:"›";flex:none;margin:0 9px;color:var(--mx-blue);font-weight:800;font-size:16px;line-height:1}
body.mx .mxb-crumbs a{display:inline-flex;align-items:center;min-height:32px;color:var(--mx-navy);text-decoration:underline;text-decoration-color:rgba(31,75,224,.35);text-decoration-thickness:2px;text-underline-offset:4px}
body.mx .mxb-crumbs a:hover{color:var(--mx-blue);text-decoration-color:var(--mx-sun)}
body.mx .mxb-crumbs li[aria-current]{flex:1 1 0}
body.mx .mxb-crumbs [aria-current] span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mx-muted)}

/* ---------- nhãn nhỏ ---------- */
body.mx .mxb-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:6px 14px 6px 7px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);font:800 12px/1.2 var(--mx-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-navy)}
body.mx .mxb-kicker__dot{flex:none;width:18px;height:18px;border:2px solid var(--mx-navy);border-radius:50%;background:linear-gradient(90deg,var(--mx-blue) 50%,var(--mx-sun) 50%)}
body.mx .mxb-badge{display:inline-flex;align-items:center;padding:5px 11px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-sun);color:var(--mx-navy);font:800 11px/1.1 var(--mx-sans);letter-spacing:.1em;text-transform:uppercase}

/* ============ TRANG BLOG ============ */
body.mx .mxb-hero{display:grid;gap:24px;align-items:center;margin:0 0 30px}
body.mx .mxb-hero__text{min-width:0}
body.mx .mxb-hero__title{margin:0;font-size:clamp(32px,8vw,58px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word}
body.mx .mxb-hl{background:linear-gradient(transparent 60%,var(--mx-sun) 60%,var(--mx-sun) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
body.mx .mxb-hero__lead{margin:18px 0 0;max-width:40em;font-size:16px;line-height:1.7;color:var(--mx-muted)}
body.mx .mxb-hero__lead strong{color:var(--mx-navy);font-weight:700}
body.mx .mxb-topics{display:flex;flex-wrap:wrap;gap:8px 20px;margin:18px 0 0;padding:0;list-style:none;font-size:14px;font-weight:700;color:var(--mx-navy)}
body.mx .mxb-topics li{display:inline-flex;align-items:center;gap:8px}
body.mx .mxb-topics li:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--mx-sun);box-shadow:0 0 0 2px var(--mx-navy)}
body.mx .mxb-hero__art{display:none}
body.mx .mxb-hero__art svg{display:block;width:100%;height:auto;overflow:visible}
@media (min-width:768px){
  body.mx .mxb-hero{grid-template-columns:minmax(0,1fr) 250px;gap:32px}
  body.mx .mxb-hero__art{display:block}
  body.mx .mxb-hero__lead{font-size:17px}
}
@media (min-width:992px){body.mx .mxb-hero{grid-template-columns:minmax(0,1fr) 330px;gap:60px;margin-bottom:40px}}

/* lời giới thiệu admin soạn (biến blog) */
body.mx .mxb-intro{margin:0 0 32px;padding:22px 20px;border:2px solid var(--mx-navy);border-radius:24px;background:var(--mx-paper);box-shadow:0 5px 0 var(--mx-navy)}
@media (min-width:768px){body.mx .mxb-intro{padding:28px 32px}}

body.mx .mxb-label{display:flex;align-items:center;gap:14px;margin:0 0 18px;font:800 12.5px/1.2 var(--mx-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mxb-label:after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,rgba(10,26,68,.28) 0 8px,transparent 8px 14px)}

/* ---------- lưới thẻ bài ---------- */
body.mx .mxb-grid{display:grid;gap:26px}
@media (min-width:768px){body.mx .mxb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}}
@media (min-width:1200px){body.mx .mxb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.mx .mxb-card{position:relative;display:flex;flex-direction:column;min-width:0;border:2px solid var(--mx-navy);border-radius:24px;background:var(--mx-paper);box-shadow:0 6px 0 var(--mx-navy);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
body.mx .mxb-card:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--mx-navy)}
body.mx .mxb-card__media{position:relative;display:block;flex:none;aspect-ratio:16/9;border-bottom:2px solid var(--mx-navy);background:var(--mx-sky);overflow:hidden}
@supports not (aspect-ratio:1){body.mx .mxb-card__media{height:0;padding-bottom:56.25%}}
body.mx .mxb-card__media img,body.mx .mxb-card__media svg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
body.mx .mxb-card:hover .mxb-card__media img,body.mx .mxb-card:hover .mxb-card__media svg{transform:scale(1.04)}
body.mx .mxb-card__body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:18px 20px 20px}
body.mx .mxb-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:22px;margin:0 0 10px;font-size:13px;font-weight:700;color:var(--mx-muted)}
body.mx .mxb-card__date{display:inline-flex;align-items:center;gap:7px}
body.mx .mxb-card__date i{color:var(--mx-blue)}
body.mx .mxb-card__title{margin:0 0 10px;font-size:21px;line-height:1.22;letter-spacing:-.01em;overflow-wrap:break-word}
body.mx .mxb-card__title a{color:var(--mx-navy);text-decoration:none}
body.mx .mxb-card__title a:hover,body.mx .mxb-card__title a:focus{color:var(--mx-blue)}
/* cả thẻ bấm được (lớp phủ của link tiêu đề); link trong đoạn trích và "Đọc thêm" nằm trên lớp phủ */
body.mx .mxb-card__title a:after{content:"";position:absolute;inset:0;z-index:1;border-radius:22px}
body.mx .mxb-card__title a:focus-visible{outline:0}
body.mx .mxb-card__title a:focus-visible:after{outline:3px solid var(--mx-blue);outline-offset:-7px}
body.mx .mxb-card__excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--mx-muted);overflow-wrap:break-word}
body.mx .mxb-card__excerpt>*{margin:0 0 6px;font:inherit;color:inherit;letter-spacing:0}
body.mx .mxb-card__excerpt>*:after{display:none}
body.mx .mxb-card__excerpt strong,body.mx .mxb-card__excerpt b{color:var(--mx-ink);font-weight:700}
body.mx .mxb-card__excerpt a{position:relative;z-index:2}
body.mx .mxb-card__excerpt img,body.mx .mxb-card__excerpt hr,body.mx .mxb-card__excerpt figure,body.mx .mxb-card__excerpt table,body.mx .mxb-card__excerpt iframe,body.mx .mxb-card__excerpt video,body.mx .mxb-card__excerpt br{display:none!important}
body.mx .mxb-card__excerpt p:has(>img:only-child){display:none}
/* ảnh dọc/vuông (lấy từ đầu bài): hiện trọn ảnh trên nền chấm */
body.mx .mxb-card__media.is-fit,body.mx .mxb-mini__media.is-fit{background:radial-gradient(circle,rgba(255,200,61,.3) 0 1.6px,transparent 2.2px) 0 0/16px 16px,var(--mx-navy)}
body.mx .mxb-card__media.is-fit img,body.mx .mxb-mini__media.is-fit img{object-fit:contain}
body.mx .mxb-card__more{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;align-self:flex-start;margin-top:auto;padding:4px 0;font-size:15px;font-weight:800;color:var(--mx-blue);text-decoration:none}
body.mx .mxb-card__more i{font-size:13px;transition:transform .15s}
body.mx .mxb-card__more:hover,body.mx .mxb-card__more:focus{color:var(--mx-navy);text-decoration:none}
body.mx .mxb-card:hover .mxb-card__more i{transform:translateX(4px)}

/* bài mới nhất: thẻ lớn */
body.mx .mxb-card--feat .mxb-card__title{font-size:clamp(24px,5.6vw,36px);line-height:1.12;letter-spacing:-.018em}
body.mx .mxb-card--feat .mxb-card__excerpt{-webkit-line-clamp:4;font-size:15.5px}
body.mx .mxb-card--feat .mxb-card__more{padding:11px 20px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-blue);color:#fff;box-shadow:0 4px 0 var(--mx-navy);transition:transform .15s,box-shadow .15s}
body.mx .mxb-card--feat .mxb-card__more:hover,body.mx .mxb-card--feat .mxb-card__more:focus{color:#fff;transform:translateY(-2px);box-shadow:0 6px 0 var(--mx-navy)}
@media (min-width:768px){
  body.mx .mxb-card--feat{grid-column:1/-1}
  body.mx .mxb-card--feat .mxb-card__excerpt{font-size:16.5px;line-height:1.65}
}
@media (min-width:992px){
  body.mx .mxb-card--feat{flex-direction:row;border-radius:30px;box-shadow:0 8px 0 var(--mx-navy)}
  body.mx .mxb-card--feat:hover{box-shadow:0 11px 0 var(--mx-navy)}
  body.mx .mxb-card--feat .mxb-card__media{flex:0 0 55%;aspect-ratio:auto;min-height:330px;border-bottom:0;border-right:2px solid var(--mx-navy)}
  body.mx .mxb-card--feat .mxb-card__body{justify-content:center;padding:34px 38px}
  body.mx .mxb-card--feat .mxb-card__title a:after{border-radius:28px}
}

/* tranh Picasso thay ảnh bìa: 4 bộ màu xoay vòng, bộ chẵn lật ngang */
body.mx .mxb-art{--b1:var(--mx-sky);--b2:var(--mx-blue);--b3:var(--mx-sun);--b4:var(--mx-coral)}
body.mx .mxb-art .a1{fill:var(--b1)}
body.mx .mxb-art .a2{fill:var(--b2)}
body.mx .mxb-art .a3{fill:var(--b3)}
body.mx .mxb-art .a4{fill:var(--b4)}
body.mx .mxb-art .m{transform-box:view-box;transform-origin:50% 50%}
body.mx .mxb-card:nth-child(4n+2) .mxb-art,body.mx .mxb-v2 .mxb-art{--b1:#fff3cf;--b2:var(--mx-navy);--b3:var(--mx-coral);--b4:var(--mx-blue)}
body.mx .mxb-card:nth-child(4n+3) .mxb-art,body.mx .mxb-v3 .mxb-art{--b1:#ffe7df;--b2:var(--mx-sun);--b3:var(--mx-blue);--b4:var(--mx-coral)}
body.mx .mxb-card:nth-child(4n+4) .mxb-art,body.mx .mxb-v4 .mxb-art{--b1:var(--mx-sky);--b2:var(--mx-coral);--b3:var(--mx-sun);--b4:var(--mx-blue)}
body.mx .mxb-card:nth-child(even) .mxb-art .m,body.mx .mxb-v2 .mxb-art .m,body.mx .mxb-v4 .mxb-art .m{transform:scaleX(-1)}

/* phân trang (khối gốc) */
body.mx .mxb-pages{display:flex;justify-content:center;margin:34px 0 0}
body.mx .mxb-pages:empty{display:none}
body.mx .mxb-pages .pagination{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding-left:2px}
body.mx .mxb-pages .pagination>li>a,body.mx .mxb-pages .pagination>li>span{display:flex;align-items:center;justify-content:center;min-width:46px;min-height:46px;padding:8px 14px;font-size:15px}
body.mx .mxb-pages .pagination>li:first-child>a{border-radius:999px 0 0 999px}
body.mx .mxb-pages .pagination>li:last-child>a{border-radius:0 999px 999px 0}
body.mx .mxb-pages .pagination>li:only-child>a{border-radius:999px}

/* chưa có bài */
body.mx .mxb-empty{display:flex;align-items:flex-start;gap:16px;padding:24px 22px;border:2px solid var(--mx-navy);border-radius:24px;background:var(--mx-paper);box-shadow:0 6px 0 var(--mx-navy)}
body.mx .mxb-empty__ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--mx-navy);border-radius:16px;background:var(--mx-sun);color:var(--mx-navy);font-size:20px;box-shadow:0 3px 0 var(--mx-navy)}
body.mx .mxb-empty p{margin:0;color:var(--mx-muted)}
body.mx .mxb-empty .mxb-empty__title{margin:4px 0 6px;font:800 22px/1.2 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}

/* ---------- khối dịch vụ ---------- */
body.mx .mxb-svc{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;list-style:none}
body.mx .mxb-svc li{margin:0;padding:0}
body.mx .mxb-svc li:before{display:none}
body.mx .mxb-svc a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-paper);box-shadow:0 3px 0 var(--mx-navy);color:var(--mx-navy);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;transition:transform .15s,box-shadow .15s}
body.mx .mxb-svc a:hover,body.mx .mxb-svc a:focus{transform:translateY(-2px);box-shadow:0 5px 0 var(--mx-navy);color:var(--mx-blue);text-decoration:none}
body.mx .mxb-svc i{color:var(--mx-blue);font-size:13px}
@media (max-width:479px){
  body.mx .mxb-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  body.mx .mxb-svc a{display:flex;height:100%;min-height:44px;padding:7px 10px;border-radius:14px;font-size:13px}
}

body.mx .mxb-cta{position:relative;isolation:isolate;display:grid;gap:24px;margin:48px 0 8px;padding:28px 20px;border:2px solid var(--mx-navy);border-radius:30px;background:var(--mx-blue);box-shadow:0 8px 0 var(--mx-navy);color:#fff;overflow:hidden}
body.mx .mxb-cta:before{content:"";position:absolute;z-index:-1;right:-46px;top:-46px;width:170px;height:170px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-sun)}
body.mx .mxb-cta:after{content:"";position:absolute;z-index:-1;left:22px;bottom:18px;width:92px;height:10px;background:radial-gradient(circle,rgba(255,253,248,.6) 0 4px,transparent 4.5px) 0 0/18px 10px repeat-x}
body.mx .mxb-cta :focus-visible{outline-color:var(--mx-sun)}
body.mx .mxb-cta__main{min-width:0}
body.mx .mxb-cta__kicker{display:inline-block;margin:0 0 12px;padding:5px 12px;border:2px solid var(--mx-navy);border-radius:999px;background:var(--mx-navy);color:var(--mx-sun);font:800 11.5px/1.2 var(--mx-sans);letter-spacing:.12em;text-transform:uppercase}
body.mx .mxb-cta__title{margin:0;max-width:15em;color:#fff;font-size:clamp(27px,5.2vw,42px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
body.mx .mxb-cta__text{margin:14px 0 0;max-width:36em;font-size:16px;line-height:1.6;color:var(--mx-on-blue)}
body.mx .mxb-cta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
body.mx .mxb-cta__proof{display:flex;align-items:center;gap:10px;margin:20px 0 0;font-size:14.5px;color:var(--mx-on-blue)}
body.mx .mxb-cta__proof i{color:var(--mx-sun);font-size:17px}
body.mx .mxb-cta__proof b{color:#fff;font-weight:800}
body.mx .mxb-cta .mx-vip{margin:0;color:var(--mx-ink)}
@media (max-width:479px){body.mx .mxb-cta__btns .btn{flex:1 1 100%}}
@media (min-width:768px){body.mx .mxb-cta{padding:36px 34px}}
@media (min-width:992px){
  body.mx .mxb-cta{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:40px;padding:44px 44px}
  body.mx .mxb-cta:before{right:auto;left:52%;top:-70px;width:150px;height:150px}
}

/* ============ BÀI VIẾT ============ */
body.mx .mxb-progress{position:fixed;left:0;right:0;top:0;z-index:1031;height:5px;pointer-events:none}
body.mx .mxb-progress i{display:block;height:100%;background:var(--mx-sun);box-shadow:0 2px 0 var(--mx-navy);transform:scaleX(0);transform-origin:0 50%}
body.mx .mxb-post__wrap{max-width:880px;margin:0 auto}
@media (min-width:1200px){body.mx .mxb-post__wrap{max-width:none}}

body.mx .mxb-article{position:relative;margin:0 0 36px;border:2px solid var(--mx-navy);border-radius:26px;background:var(--mx-paper);box-shadow:0 7px 0 var(--mx-navy)}
body.mx .mxb-article__head{position:relative;padding:24px 18px 6px}
body.mx .mxb-article__title{margin:0;max-width:17em;font-size:clamp(29px,7.4vw,50px);line-height:1.08;letter-spacing:-.022em;overflow-wrap:break-word;text-wrap:balance}
body.mx .mxb-article__title:after{content:"";display:block;width:64px;height:7px;margin-top:16px;border-radius:4px;background:var(--mx-sun)}
body.mx .mxb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:18px 0 0;font-size:14px;font-weight:600;color:var(--mx-muted)}
body.mx .mxb-meta__by{display:inline-flex;align-items:center;gap:10px;color:var(--mx-navy);font-weight:800}
body.mx .mxb-meta__by img{flex:none;width:36px;height:36px;border:2px solid var(--mx-navy);border-radius:50%;object-fit:cover;background:var(--mx-sky)}
body.mx .mxb-meta__item{display:inline-flex;align-items:center;gap:7px}
body.mx .mxb-meta__item i{color:var(--mx-blue)}

body.mx .mxb-article__grid{display:grid;grid-template-columns:minmax(0,1fr);padding:18px 18px 26px}
body.mx .mxb-cover{position:relative;margin:0 -18px 24px;aspect-ratio:16/9;border-top:2px solid var(--mx-navy);border-bottom:2px solid var(--mx-navy);background:radial-gradient(circle,rgba(255,200,61,.3) 0 1.6px,transparent 2.2px) 0 0/18px 18px,var(--mx-navy);overflow:hidden}
@supports not (aspect-ratio:1){body.mx .mxb-cover{height:0;padding-bottom:56.25%}}
body.mx .mxb-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
body.mx .mxb-side{min-width:0}
body.mx .mxb-article__main{min-width:0}

/* mục lục */
body.mx .mxb-toc{margin:0 0 26px;border:2px solid var(--mx-navy);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--mx-navy)}
body.mx .mxb-toc summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px 10px 12px;cursor:pointer;list-style:none;font:800 15.5px/1.2 var(--mx-sans);color:var(--mx-navy);border-radius:18px}
body.mx .mxb-toc summary::-webkit-details-marker{display:none}
body.mx .mxb-toc summary::marker{content:""}
body.mx .mxb-toc summary:after{content:"";flex:none;width:10px;height:10px;margin:-4px 2px 0 auto;border-right:2.5px solid var(--mx-navy);border-bottom:2.5px solid var(--mx-navy);transform:rotate(45deg);transition:transform .15s}
body.mx .mxb-toc[open] summary:after{margin-top:4px;transform:rotate(-135deg)}
body.mx .mxb-toc__ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--mx-navy);border-radius:10px;background:var(--mx-sun);font-size:13px}
body.mx .mxb-toc__n{padding:3px 9px;border-radius:999px;background:var(--mx-sky);color:var(--mx-blue);font-size:12px;font-weight:800}
body.mx .mxb-toc ol{margin:0;padding:8px 8px 10px;list-style:none;border-top:2px dashed var(--mx-line)}
body.mx .mxb-toc li{margin:0;padding:0}
body.mx .mxb-toc a{position:relative;display:block;padding:7px 10px 7px 28px;border-radius:10px;color:var(--mx-ink);font-size:14.5px;font-weight:600;line-height:1.4;text-decoration:none}
body.mx .mxb-toc a:before{content:"";position:absolute;left:11px;top:14px;width:8px;height:8px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-sun)}
body.mx .mxb-toc .is-sub a{padding-left:44px;font-size:14px;font-weight:500;color:var(--mx-muted)}
body.mx .mxb-toc .is-sub a:before{left:28px;top:16px;width:9px;height:2.5px;border:0;border-radius:2px;background:var(--mx-blue)}
body.mx .mxb-toc a:hover,body.mx .mxb-toc a:focus{background:var(--mx-sky);color:var(--mx-navy);text-decoration:none}
body.mx .mxb-toc a.is-active{background:var(--mx-navy);color:#fff}
body.mx .mxb-toc a.is-active:before{border-color:#fff}

body.mx .mxb-side-cta{display:none}

/* chữ bài viết */
body.mx .mxb-prose{max-width:70ch;font-size:16.5px;line-height:1.78;color:var(--mx-ink)}
body.mx .mxb-prose>p:first-child,body.mx .mxb-prose .mxb-lead{font-size:1.08em;line-height:1.72;color:var(--mx-navy)}
body.mx .mxb-prose>p:first-child:has(>img:only-child){text-align:center}
body.mx .mxb-prose h2{margin-top:46px;scroll-margin-top:24px}
body.mx .mxb-prose h3{margin-top:34px;scroll-margin-top:24px}
body.mx .mxb-prose h4{scroll-margin-top:24px}
body.mx .mxb-prose hr.shorthr{display:none}
body.mx .mxb-prose li{line-height:1.7}
body.mx .mxb-prose img{height:auto}
body.mx .mxb-prose iframe{display:block;width:100%;height:auto;aspect-ratio:16/9}
body.mx .mxb-prose pre{max-width:100%;overflow:auto;white-space:pre-wrap}
body.mx .mxb-prose table{font-size:15px}
@media (min-width:768px){body.mx .mxb-prose{font-size:17.5px}}

/* khối dịch vụ trong bài */
body.mx .mxb-acta{position:relative;isolation:isolate;max-width:70ch;margin:44px 0 0;padding:24px 20px 24px;border:2px solid var(--mx-navy);border-radius:24px;background:var(--mx-sky);box-shadow:0 6px 0 var(--mx-navy);overflow:hidden}
body.mx .mxb-acta:before{content:"";position:absolute;z-index:-1;right:-34px;top:-34px;width:112px;height:112px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-sun)}
body.mx .mxb-acta__kicker{margin:0 0 8px;font:800 12px/1.2 var(--mx-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mxb-acta__title{margin:0;max-width:17em;font:800 clamp(23px,4vw,30px)/1.12 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.015em;color:var(--mx-navy)}
body.mx .mxb-acta__text{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--mx-muted)}
body.mx .mxb-acta .mxb-svc a{background:#fff}
body.mx .mxb-acta__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (max-width:479px){body.mx .mxb-acta__btns .btn{flex:1 1 100%}}
@media (min-width:768px){body.mx .mxb-acta{padding:28px 30px}}

/* chia sẻ */
body.mx .mxb-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:70ch;margin:30px 0 0;padding:20px 0 0;border-top:2px dashed var(--mx-line)}
body.mx .mxb-share__label{margin-right:4px;font-weight:800;color:var(--mx-navy)}
body.mx .mxb-share .btn{display:inline-flex;align-items:center;gap:8px}
body.mx .mxb-share .btn i{font-size:14px}
body.mx .mxb-share .mxb-share__fb,body.mx .mxb-share .mxb-share__fb:hover,body.mx .mxb-share .mxb-share__fb:focus{background:#1877f2;color:#fff}
body.mx .mxb-share .is-done,body.mx .mxb-share .is-done:hover,body.mx .mxb-share .is-done:focus{background:var(--mx-green);color:#fff}

/* tác giả */
body.mx .mxb-author{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:start;max-width:70ch;margin:26px 0 0;padding:18px;border:2px solid var(--mx-navy);border-radius:24px;background:#fff;box-shadow:0 5px 0 var(--mx-navy)}
body.mx .mxb-author__img{display:block;width:92px;height:92px;border:2px solid var(--mx-navy);border-radius:20px;object-fit:cover;box-shadow:4px 4px 0 var(--mx-sun);background:var(--mx-sky)}
body.mx .mxb-author__body{min-width:0}
body.mx .mxb-author__body p{margin:0}
body.mx .mxb-author .mxb-author__kicker{font:800 11.5px/1.2 var(--mx-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--mx-blue)}
body.mx .mxb-author .mxb-author__name{margin:4px 0 6px;font:800 22px/1.15 var(--mx-display);font-variation-settings:"SOFT" 100;color:var(--mx-navy)}
body.mx .mxb-author .mxb-author__text{font-size:14.5px;line-height:1.6;color:var(--mx-muted)}
body.mx .mxb-author__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
body.mx .mxb-author__links .btn{display:inline-flex;align-items:center;gap:8px}
body.mx .mxb-author__more{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:14.5px;font-weight:800;color:var(--mx-blue);text-decoration:none}
body.mx .mxb-author__more:hover{color:var(--mx-navy);text-decoration:none}
@media (max-width:479px){
  body.mx .mxb-author{grid-template-columns:64px minmax(0,1fr);gap:0 14px;padding:16px}
  body.mx .mxb-author__body{display:contents}
  body.mx .mxb-author__img{grid-row:1/3;align-self:center;width:64px;height:64px;border-radius:16px;box-shadow:3px 3px 0 var(--mx-sun)}
  body.mx .mxb-author .mxb-author__kicker{grid-column:2;align-self:end}
  body.mx .mxb-author .mxb-author__name{grid-column:2;margin-bottom:0}
  body.mx .mxb-author .mxb-author__text,body.mx .mxb-author__links{grid-column:1/-1}
  body.mx .mxb-author .mxb-author__text{margin-top:12px}
  body.mx .mxb-acta{padding:22px 16px}
}
@media (min-width:768px){
  body.mx .mxb-author{grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;padding:20px}
  body.mx .mxb-author__img{width:150px;height:113px}
}

/* bài viết mới (lấy từ /blog) */
body.mx .mxb-related{margin:6px 0 34px}
body.mx .mxb-related__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 18px}
body.mx .mxb-related__head h2{margin:0;font-size:clamp(26px,4vw,34px)}
body.mx .mxb-related__all{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-weight:800;color:var(--mx-blue);text-decoration:none}
body.mx .mxb-related__all:hover{color:var(--mx-navy);text-decoration:none}
body.mx .mxb-related__list{display:grid;gap:16px}
body.mx .mxb-mini{display:flex;min-width:0;border:2px solid var(--mx-navy);border-radius:20px;background:var(--mx-paper);box-shadow:0 5px 0 var(--mx-navy);overflow:hidden;color:var(--mx-navy);text-decoration:none;transition:transform .15s,box-shadow .15s}
body.mx .mxb-mini:hover,body.mx .mxb-mini:focus{transform:translateY(-3px);box-shadow:0 8px 0 var(--mx-navy);color:var(--mx-navy);text-decoration:none}
body.mx .mxb-mini__media{position:relative;display:block;flex:0 0 120px;min-height:88px;border-right:2px solid var(--mx-navy);background:var(--mx-sky);overflow:hidden}
body.mx .mxb-mini__media img,body.mx .mxb-mini__media svg{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
body.mx .mxb-mini__body{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:12px 14px}
body.mx .mxb-mini time{font-size:12.5px;font-weight:700;color:var(--mx-muted)}
body.mx .mxb-mini b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:800 16.5px/1.25 var(--mx-display);font-variation-settings:"SOFT" 100;letter-spacing:-.005em;overflow-wrap:break-word}
body.mx .mxb-mini:hover b{color:var(--mx-blue)}
@media (min-width:768px){
  body.mx .mxb-related__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  body.mx .mxb-mini{flex-direction:column}
  body.mx .mxb-mini__media{flex:none;min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:2px solid var(--mx-navy)}
  body.mx .mxb-mini__body{justify-content:flex-start;padding:14px 16px 18px}
  body.mx .mxb-mini b{font-size:18px}
}

body.mx .mxb-back{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
body.mx .mxb-back .btn{display:inline-flex;align-items:center;gap:10px}
body.mx .mxb-back .btn i{transition:transform .15s}
body.mx .mxb-back .btn:hover i{transform:translateX(-3px)}

@media (min-width:768px){
  body.mx .mxb-article{border-radius:30px;box-shadow:0 8px 0 var(--mx-navy)}
  body.mx .mxb-article__head{padding:36px 36px 8px}
  body.mx .mxb-article__grid{padding:22px 36px 36px}
  body.mx .mxb-cover{margin:0 0 30px;border:2px solid var(--mx-navy);border-radius:22px;box-shadow:0 6px 0 var(--mx-navy)}
}
/* màn rộng: cột bài + cột phải (mục lục và khối dịch vụ dính theo khi cuộn) */
@media (min-width:1200px){
  body.mx .mxb-article__head{padding:46px 50px 8px}
  body.mx .mxb-article__grid{grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:auto 1fr;column-gap:46px;padding:26px 50px 48px}
  body.mx .mxb-cover{grid-column:1;grid-row:1}
  body.mx .mxb-article__main{grid-column:1;grid-row:2}
  body.mx .mxb-side{grid-column:2;grid-row:1/3;padding-left:26px;border-left:2px dashed var(--mx-line)}
  body.mx .mxb-side__in{position:-webkit-sticky;position:sticky;top:22px}
  body.mx .mxb-toc{margin-bottom:20px;box-shadow:none}
  body.mx .mxb-toc ol{max-height:calc(100vh - 330px);overflow:auto;overscroll-behavior:contain}
  body.mx .mxb-side-cta{position:relative;isolation:isolate;display:block;padding:20px 18px;border:2px solid var(--mx-navy);border-radius:20px;background:var(--mx-blue);box-shadow:0 5px 0 var(--mx-navy);color:#fff;overflow:hidden}
  body.mx .mxb-side-cta:before{content:"";position:absolute;z-index:-1;right:-28px;top:-28px;width:84px;height:84px;border:2px solid var(--mx-navy);border-radius:50%;background:var(--mx-sun)}
  body.mx .mxb-side-cta b{display:block;max-width:10em;font:800 20px/1.15 var(--mx-display);font-variation-settings:"SOFT" 100;color:#fff}
  body.mx .mxb-side-cta p{margin:8px 0 14px;font-size:14px;line-height:1.5;color:var(--mx-on-blue)}
  body.mx .mxb-side-cta .btn{display:block;width:100%;text-align:center}
  body.mx .mxb-side-cta :focus-visible{outline-color:var(--mx-sun)}
}

/* ===== 95-live.css ===== */
/* Số liệu trực tiếp (đăng nhập / đăng ký): nhãn "Số liệu trực tiếp" chấm đỏ nhấp nháy + số vừa tăng nháy nền vàng */
body.mx .mxa-stats[data-mx-live-label]::after{content:attr(data-mx-live-label);grid-column:1/-1;margin-top:12px;padding-left:18px;font:600 12.5px/1.3 var(--mx-sans);color:var(--mx-muted);background:radial-gradient(circle closest-side,#e8442e 70%,rgba(232,68,46,0) 100%) 2px 50%/10px 10px no-repeat;animation:mx-live-dot 1.6s ease-in-out infinite}
body.mx .mxa-stats dd.mx-num-up{animation:mx-num-up 1.4s ease-out}
@keyframes mx-live-dot{50%{background-size:6px 6px}}
@keyframes mx-num-up{0%,35%{background:var(--mx-sun);box-shadow:0 0 0 4px var(--mx-sun)}100%{background:transparent;box-shadow:0 0 0 4px transparent}}
@media (prefers-reduced-motion:reduce){body.mx .mxa-stats[data-mx-live-label]::after,body.mx .mxa-stats dd.mx-num-up{animation:none}}

/* ===== 96-password.css ===== */
/* Nút đèn pin hiện/ẩn mật khẩu (JS trong layout bọc mọi input[type=password] bằng .mx-pw): bật đèn là vệt sáng vàng quét qua ô và hiện chữ */
body.mx .mx-pw{position:relative;display:block;border-radius:14px;background:#fff}
body.mx .mx-pw>.form-control{position:relative;z-index:1;padding-right:54px;background:transparent}
body.mx .mx-pw::before{content:"";position:absolute;z-index:0;top:2px;bottom:2px;left:2px;right:36px;border-radius:12px 0 0 12px;background:linear-gradient(to left,rgba(255,200,61,.95),rgba(255,200,61,.45) 45%,rgba(255,200,61,0) 100%);clip-path:polygon(100% 36%,100% 64%,0 125%,0 -25%);transform:scaleX(0);transform-origin:100% 50%;opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .2s}
body.mx .mx-pw.is-on::before{transform:scaleX(1);opacity:1}
body.mx .mx-pw.is-on>.form-control{letter-spacing:.02em}
body.mx .mx-pw>.form-control::-ms-reveal,body.mx .mx-pw>.form-control::-ms-clear{display:none}
body.mx .mx-pw__btn{position:absolute;z-index:2;top:50%;right:5px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:-20px 0 0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--mx-navy);cursor:pointer;transition:background .15s}
body.mx .mx-pw__btn:hover{background:var(--mx-sky)}
body.mx .mx-pw__btn:focus-visible{outline:3px solid var(--mx-blue);outline-offset:1px}
body.mx .mx-pw__btn svg{width:26px;height:26px;overflow:visible}
body.mx .mx-pw__lens{fill:#fffdf8;transition:fill .2s}
body.mx .mx-pw.is-on .mx-pw__lens{fill:var(--mx-sun)}
body.mx .mx-pw__glow{fill:var(--mx-sun);opacity:0;transition:opacity .2s}
body.mx .mx-pw.is-on .mx-pw__glow{opacity:.55}
@media (prefers-reduced-motion:reduce){body.mx .mx-pw::before,body.mx .mx-pw__lens,body.mx .mx-pw__glow{transition:none}}

/* ===== 97-qa-fixes.css ===== */
/* MAXYTB.VN · theme Picasso
   97-qa-fixes: sửa theo báo cáo QA 28/09/2026 (bao-cao/qa-2026-09-28.md, ghi chép: bao-cao/qa-fixes-applied.md).
   File ghép cuối style.css → thắng các quy tắc cùng độ ưu tiên ở 00-core…96. Không sửa các partial cũ.
   1. Phông "fallback" khớp cỡ Be Vietnam Pro / Fraunces (giảm nhảy chữ CLS ở /blog khi phông web tải xong).
   2. Tương phản AA: .btn-success, .btn-danger, placeholder, nút Facebook + "Đã sao chép" ở bài blog.
   3. Vùng chạm trên điện thoại: nút menu 44px, .btn-sm 40px, nút "Xem" ở bảng giá 40px.
   4. /services ở điện thoại: không cho khung trang bị nới rộng (cuộn ngang 24px). */

/* ---------- 1. phông fallback (số đo: bao-cao/qa-data/font-metrics.json) ----------
   Chỉ dùng trong lúc phông web chưa tải xong; unicode-range = đúng các ký tự Google Fonts phục vụ,
   ký tự ngoài vùng (→, ✓, emoji…) vẫn rơi về system-ui như trước. Máy không có Arial/Georgia (Android) thì bỏ qua, như cũ. */
@font-face{font-family:"Be Vietnam Pro Fallback";src:local("Arial"),local("ArialMT");font-weight:100 549;font-style:normal;size-adjust:108.6%;ascent-override:92.1%;descent-override:24.9%;line-gap-override:0%;unicode-range:U+0000-0309,U+0323,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 900;font-style:normal;size-adjust:104.9%;ascent-override:95.3%;descent-override:25.7%;line-gap-override:0%;unicode-range:U+0000-0309,U+0323,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:100 900;font-style:normal;size-adjust:81.8%;ascent-override:119.8%;descent-override:31.8%;line-gap-override:0%;unicode-range:U+0000-0309,U+0323,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}
:root{
  --mx-display:"Fraunces","Fraunces Fallback",Georgia,"Times New Roman",serif;
  --mx-sans:"Be Vietnam Pro","Be Vietnam Pro Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* ---------- 2. tương phản AA ---------- */
/* chữ navy trên nền xanh lá 5,21:1 / trên cam san hô 5,99:1 (chữ trắng cũ: 3,24 và 2,82) — cùng kiểu .btn-warning/.btn-info */
body.mx .btn-success,body.mx .btn-success:hover,body.mx .btn-success:focus,body.mx .btn-success:active,
body.mx .btn-danger,body.mx .btn-danger:hover,body.mx .btn-danger:focus,body.mx .btn-danger:active,
body.mx .mxb-share .is-done,body.mx .mxb-share .is-done:hover,body.mx .mxb-share .is-done:focus{color:var(--mx-navy)}
/* placeholder 4,74:1 trên trắng (cũ #8a90a6 = 3,17) */
body.mx .form-control::placeholder{color:#6b7290}
/* nút chia sẻ Facebook: chữ trắng trên #1466d8 = 5,35:1 (cũ #1877f2 = 4,23) */
body.mx .mxb-share .mxb-share__fb,body.mx .mxb-share .mxb-share__fb:hover,body.mx .mxb-share .mxb-share__fb:focus{background:#1466d8}
body.mx .mxb-share__ic{flex:none;display:block;width:14px;height:14px}

/* ---------- 3 + 4. điện thoại ---------- */
@media (max-width:767px){
  /* nút menu 36px → 44px (thanh menu vẫn cao 70px: 13 + 44 + 13) */
  body.mx .navbar-default .navbar-toggle{min-width:48px;min-height:44px;margin-top:13px;margin-bottom:13px;padding:12px 13px}
  /* nút nhỏ .btn-sm 34px → 40px */
  body.mx .btn-sm,body.mx .btn-group-sm>.btn{min-height:40px;padding-top:10px;padding-bottom:10px}
  /* nút "Xem" mô tả dịch vụ 25px → 40px */
  body.mx .mx-p-services .mx-sx-svc .btn-xs[data-description-id]{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:56px;padding:6px 14px;font-size:13px}
  /* bảng giá xếp thành thẻ: phần thừa 399/360px làm Chrome nới khung trang ra 414px → cắt theo chiều ngang (dọc vẫn hiện bóng thẻ) */
  body.mx .mx-sx-scroll{overflow-x:clip}
}