/* ============================================================
   MT.NET.VN PRO6 CLEAN FRONTEND V9
   Replaces legacy Bootstrap/theme CSS for old DB-backed Blade.
   Scope is #main-content wherever practical.
   ============================================================ */

:root{
  --v9-bg:#f5f7fb;
  --v9-card:#ffffff;
  --v9-border:#e5eaf1;
  --v9-text:#172033;
  --v9-muted:#667085;
  --v9-primary:#246bfd;
  --v9-success:#039855;
  --v9-danger:#d92d20;
  --v9-warning:#dc6803;
  --v9-shadow:0 8px 28px rgba(16,24,40,.06);
}

/* ---------- Generic layout primitives ---------- */
#main-content *{box-sizing:border-box}
#main-content .container,
#main-content .container-fluid,
#main-content .kt-container-fixed,
#main-content .layout-px-spacing,
#main-content .wrapper,
#main-content .content-block{width:100%;max-width:100%!important;margin-inline:auto}
#main-content .row{display:flex;flex-wrap:wrap;margin-left:-8px;margin-right:-8px}
#main-content [class*="col-"]{position:relative;width:100%;padding-left:8px;padding-right:8px;min-width:0}
#main-content .col{flex:1 0 0}
#main-content .col-12,#main-content .col-xs-12,#main-content .col-sm-12,#main-content .col-md-12,#main-content .col-lg-12{flex:0 0 100%;max-width:100%}
#main-content .col-6,#main-content .col-sm-6,#main-content .col-md-6,#main-content .col-lg-6,#main-content .col-xl-6{flex:0 0 50%;max-width:50%}
#main-content .col-md-4,#main-content .col-lg-4{flex:0 0 33.333%;max-width:33.333%}
#main-content .col-md-3,#main-content .col-lg-3{flex:0 0 25%;max-width:25%}
#main-content .col-md-8,#main-content .col-lg-8{flex:0 0 66.666%;max-width:66.666%}
#main-content .col-md-9,#main-content .col-lg-9{flex:0 0 75%;max-width:75%}
#main-content .d-flex,#main-content .flex{display:flex!important}
#main-content .d-block{display:block!important}
#main-content .d-none,#main-content .hidden{display:none!important}
#main-content .flex-row{flex-direction:row!important}
#main-content .flex-col{flex-direction:column!important}
#main-content .flex-wrap{flex-wrap:wrap!important}
#main-content .items-center,#main-content .align-center,#main-content .align-items-center{align-items:center!important}
#main-content .justify-between,#main-content .justify-content-between{justify-content:space-between!important}
#main-content .justify-center,#main-content .justify-content-center{justify-content:center!important}
#main-content .justify-end,#main-content .justify-content-end,#main-content .justify-content-sm-end{justify-content:flex-end!important}
#main-content .grow{flex-grow:1}
#main-content .shrink-0{flex-shrink:0}
#main-content .w-full,#main-content .w-100{width:100%!important}
#main-content .text-center{text-align:center!important}
#main-content .text-left{text-align:left!important}
#main-content .text-right,#main-content .text-sm-right{text-align:right!important}

/* ---------- Spacing compatibility ---------- */
#main-content .mb-0{margin-bottom:0!important}
#main-content .mb-1{margin-bottom:.25rem!important}
#main-content .mb-2{margin-bottom:.5rem!important}
#main-content .mb-3{margin-bottom:.75rem!important}
#main-content .mb-4{margin-bottom:1rem!important}
#main-content .mb-5{margin-bottom:1.25rem!important}
#main-content .mt-1{margin-top:.25rem!important}
#main-content .mt-2{margin-top:.5rem!important}
#main-content .mt-3{margin-top:.75rem!important}
#main-content .mt-4{margin-top:1rem!important}
#main-content .ml-2{margin-left:.5rem!important}
#main-content .mr-2{margin-right:.5rem!important}
#main-content .ms-auto{margin-left:auto!important}
#main-content .p-2{padding:.5rem!important}
#main-content .px-5{padding-left:1.25rem!important;padding-right:1.25rem!important}
#main-content .py-3{padding-top:.75rem!important;padding-bottom:.75rem!important}
#main-content .gap-1{gap:.25rem!important}
#main-content .gap-1\.5{gap:.375rem!important}
#main-content .gap-2{gap:.5rem!important}
#main-content .gap-2\.5{gap:.625rem!important}
#main-content .gap-3\.5{gap:.875rem!important}
#main-content .gap-5{gap:1.25rem!important}

/* ---------- Typography ---------- */
#main-content{font-size:14px;line-height:1.55;color:var(--v9-text)}
#main-content h1{font-size:clamp(26px,3vw,40px);line-height:1.15}
#main-content h2{font-size:clamp(22px,2.3vw,32px)}
#main-content h3{font-size:20px}
#main-content h4{font-size:16px}
#main-content p{color:var(--v9-muted)}
#main-content .text-xs,#main-content .small-12{font-size:12px!important}
#main-content .text-sm,#main-content .font-12{font-size:13px!important}
#main-content .text-base,#main-content .font-15{font-size:15px!important}
#main-content .text-lg{font-size:18px!important}
#main-content .font-medium{font-weight:500!important}
#main-content .font-semibold{font-weight:600!important}
#main-content .strong{font-weight:700!important}
#main-content .text-primary{color:var(--v9-primary)!important}
#main-content .text-muted,#main-content .text-muted-foreground,#main-content .text-secondary-foreground{color:var(--v9-muted)!important}
#main-content a{color:#175cd3;text-decoration:none}
#main-content a:hover{color:#004eeb}

/* ---------- Cards / panels / widgets ---------- */
#main-content .card,
#main-content .card-box,
#main-content .widget,
#main-content .widget-content,
#main-content .content-panel,
#main-content .kt-card,
#main-content .panel{
  background:var(--v9-card)!important;
  border:1px solid var(--v9-border)!important;
  border-radius:16px!important;
  box-shadow:var(--v9-shadow)!important;
}
#main-content .card-box,#main-content .widget-content,#main-content .content-panel{padding:16px}
#main-content .card-header,#main-content .widget-header{padding:12px 15px;border-bottom:1px solid var(--v9-border);background:#f9fbfd}
#main-content .content-block.has-sidebar{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
#main-content .content-block-single{min-width:0}
#main-content .legacy-shop-sidebar{display:none!important}

/* ---------- Forms ---------- */
#main-content .form-control,
#main-content input:not([type=checkbox]):not([type=radio]),
#main-content select,
#main-content textarea{
  width:100%;
  min-height:40px;
  padding:8px 11px;
  border:1px solid #d8e0ea!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#344054!important;
  font:inherit;
  outline:none;
}
#main-content textarea{min-height:100px;resize:vertical}
#main-content input:focus,#main-content select:focus,#main-content textarea:focus{
  border-color:#84adff!important;
  box-shadow:0 0 0 3px rgba(36,107,253,.09)!important;
}
#main-content .form-inline{display:flex;align-items:center;gap:8px}
#main-content .input-group{display:flex;align-items:stretch;width:100%}
#main-content .input-group>*{border-radius:0!important}
#main-content .input-group>*:first-child{border-radius:10px 0 0 10px!important}
#main-content .input-group>*:last-child{border-radius:0 10px 10px 0!important}
#main-content label{font-weight:600;color:#344054;margin-bottom:5px;display:inline-block}

/* ---------- Buttons ---------- */
#main-content .btn,#main-content .kt-btn,
#main-content button:not(.menu-item):not(.top-link){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:7px 12px;border:1px solid var(--v9-border);
  border-radius:9px;background:#fff;color:#344054;font:inherit;font-weight:600;cursor:pointer;
}
#main-content .btn:hover,#main-content .kt-btn:hover{background:#f7f9fc}
#main-content .btn-primary,#main-content .kt-btn-primary{background:var(--v9-primary)!important;border-color:var(--v9-primary)!important;color:#fff!important}
#main-content .btn-soft-primary{background:#eef4ff!important;color:#175cd3!important;border-color:#d6e4ff!important}
#main-content .btn-outline-primary,#main-content .kt-btn-outline{border-color:#b7ccff!important;color:#175cd3!important;background:#fff!important}
#main-content .btn-sm,#main-content .kt-btn-sm{min-height:32px;padding:5px 9px;font-size:12px}
#main-content .kt-btn-icon{width:36px;padding:0}

/* ---------- Badges ---------- */
#main-content .badge{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:700;background:#f2f4f7;color:#475467}
#main-content .badge-success{background:#ecfdf3;color:#027a48}
#main-content .badge-danger{background:#fef3f2;color:#b42318}

/* ---------- Breadcrumb ---------- */
#main-content .breadcrumb,
.legacy-page-toolbar .breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;list-style:none;padding:0;margin:0;
}
#main-content .breadcrumb-item{font-size:13px;color:#667085}
#main-content .breadcrumb-item+.breadcrumb-item:before{content:"/";margin-right:7px;color:#98a2b3}
#main-content .breadcrumb-item.active{color:#344054;font-weight:600}

/* ---------- Dropdowns ---------- */
#main-content .dropdown-menu{
  display:none;position:absolute;z-index:40;min-width:210px;padding:7px;background:#fff;border:1px solid var(--v9-border);
  border-radius:11px;box-shadow:0 12px 34px rgba(16,24,40,.14)
}
#main-content .dropdown-menu.show{display:block}
#main-content .dropdown-item{display:block;padding:8px 10px;border-radius:7px;color:#344054}
#main-content .dropdown-item:hover{background:#f4f7fb}

/* ---------- Tabs / nav ---------- */
#main-content .nav,#main-content .navbar-nav{display:flex;align-items:center;gap:5px;list-style:none;padding:0;margin:0}
#main-content .nav-link{display:inline-flex;padding:8px 10px;border-radius:8px;color:#667085}
#main-content .nav-link.active{background:#eef4ff;color:#175cd3;font-weight:700}
#main-content .tab-content>.tab-pane{display:none}
#main-content .tab-content>.tab-pane.active{display:block}

/* ---------- Product / searchable item system ---------- */
#main-content .searchable-container{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
#main-content .searchable-items{display:grid;gap:12px}
#main-content .searchable-items.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#main-content .searchable-items.list{grid-template-columns:1fr}
#main-content .searchable-items>.items{
  background:#fff;border:1px solid var(--v9-border);border-radius:14px;overflow:hidden;box-shadow:0 5px 18px rgba(16,24,40,.045)
}
#main-content .items-header-section{display:none!important}
#main-content .item-content{display:grid;gap:12px;padding:14px;min-width:0}
#main-content .searchable-items.grid .item-content{grid-template-columns:1fr}
#main-content .searchable-items.list .item-content{grid-template-columns:minmax(260px,1.6fr) minmax(120px,.65fr) minmax(150px,.8fr) auto;align-items:center}
#main-content .product-info{display:flex;align-items:center;gap:12px;min-width:0}
#main-content .product-info>a{flex:0 0 90px}
#main-content .product-info img{width:90px;height:90px;object-fit:cover;border-radius:11px;background:#f4f6f9}
#main-content .product-name{margin:0 0 4px;color:#182230;font-size:15px;font-weight:700}
#main-content .product-category,#main-content .product-category-addr{margin:0;font-size:12px;color:#667085}
#main-content .product-price{font-weight:700;color:#101828}
#main-content .product-rating{display:flex;align-items:center}
#main-content .avatar-xxs{width:18px!important;height:18px!important;object-fit:contain;margin:0 1px!important}
#main-content .action-btn{font-size:12px;display:flex;gap:7px;align-items:center}

/* Old product category icon grid */
#main-content .sub_menu{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
#main-content .sub_menu li{list-style:none}
#main-content .sub_menu a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:92px;min-height:92px;padding:10px;border:1px solid #b7d5ff;border-radius:12px;background:#fff;color:#1d2939;text-align:center;font-weight:700}
#main-content .sub_menu img{max-width:56px;max-height:56px;object-fit:contain}

/* ---------- KT utility compatibility ---------- */
#main-content .kt-menu{display:flex;flex-direction:column;gap:3px}
#main-content .kt-menu-item{position:relative}
#main-content .kt-menu-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:#475467}
#main-content .kt-menu-link:hover{background:#f4f7fb;color:#175cd3}
#main-content .kt-menu-icon{width:22px;display:inline-grid;place-items:center}
#main-content .kt-menu-dropdown{display:none}
#main-content .kt-menu-item.open>.kt-menu-dropdown,#main-content .kt-menu-dropdown.show{display:block}
#main-content .kt-avatar{position:relative;display:inline-flex}
#main-content .kt-avatar-image{width:42px;height:42px;border-radius:50%;object-fit:cover}

/* ---------- Common legacy icons without old icon-font ---------- */
#main-content .las,#main-content .lar,#main-content .ki-filled{font-style:normal!important;font-family:inherit!important;display:inline-grid;place-items:center}
#main-content .la-search:before,#main-content .ki-magnifier:before{content:"⌕"}
#main-content .la-plus-circle:before{content:"＋"}
#main-content .la-list:before{content:"☷"}
#main-content .la-th-large:before{content:"▦"}
#main-content .la-filter:before{content:"⚲"}
#main-content .la-sync:before{content:"↻"}
#main-content .la-calendar:before{content:"▣"}
#main-content .ki-exit-down:before{content:"⇩"}
#main-content .ki-notification-status:before{content:"◉"}

/* ---------- Load more / ajax ---------- */
#main-content .ajax-load{padding:15px;text-align:center;color:#667085}
#main-content .ajax-load img{display:none}
#main-content .btn-more-info{margin:15px auto}
#main-content #content_pro{display:block}

/* ---------- Pagination ---------- */
#main-content .pagination{display:flex;gap:5px;flex-wrap:wrap;list-style:none;padding:0}
#main-content .pagination li>a,#main-content .pagination li>span{min-width:36px;height:36px;padding:0 9px;display:grid;place-items:center;border:1px solid var(--v9-border);border-radius:8px;background:#fff;color:#475467}
#main-content .pagination .active>span,#main-content .pagination .active>a{background:var(--v9-primary);color:#fff;border-color:var(--v9-primary)}

/* ---------- Tables ---------- */
#main-content .table-responsive{overflow:auto;border:1px solid var(--v9-border);border-radius:12px}
#main-content table{width:100%;border-collapse:collapse;background:#fff}
#main-content th,#main-content td{padding:10px 12px;border-bottom:1px solid #edf0f4;text-align:left;vertical-align:middle}
#main-content th{background:#f8fafc;color:#475467;font-size:12px;font-weight:700}

/* ---------- Images / media ---------- */
#main-content img{max-width:100%;height:auto}
#main-content iframe,#main-content video{max-width:100%}

/* ---------- Hide old duplicate shell-ish fragments ---------- */
#main-content .sub-header-container{background:transparent!important;border:0!important;padding:0!important;margin:0!important}
#main-content .sub-header-container .header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
#main-content .sidebarCollapse{display:none!important}
#main-content .legacy-content-sidebar{position:static!important;width:auto!important;background:transparent!important}

/* ---------- Dark ---------- */
body.theme-dark #main-content{
  --v9-card:#151f2f;--v9-border:#2a394d;--v9-text:#e6edf5;--v9-muted:#a9b4c3;--v9-bg:#0f1724
}
body.theme-dark #main-content .card,
body.theme-dark #main-content .card-box,
body.theme-dark #main-content .widget,
body.theme-dark #main-content .widget-content,
body.theme-dark #main-content .content-panel,
body.theme-dark #main-content .searchable-items>.items,
body.theme-dark #main-content input,
body.theme-dark #main-content select,
body.theme-dark #main-content textarea,
body.theme-dark #main-content table{background:#151f2f!important;color:#e6edf5!important}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  #main-content .searchable-items.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #main-content .searchable-items.list .item-content{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  #main-content .row{margin-left:-5px;margin-right:-5px}
  #main-content [class*="col-"]{flex:0 0 100%!important;max-width:100%!important;padding-left:5px;padding-right:5px}
  #main-content .searchable-items.grid{grid-template-columns:1fr}
  #main-content .searchable-items.list .item-content{grid-template-columns:1fr}
  #main-content .product-info>a{flex-basis:72px}
  #main-content .product-info img{width:72px;height:72px}
  #main-content .sub_menu a{min-width:78px;min-height:82px;font-size:11px}
}