/* =========================================================================
   modern-content.css — Reskin toàn bộ nội dung bên trong #maincontent
   (bảng dữ liệu, form thêm/sửa, tab, nút bấm...) bằng cách nhắm thẳng vào
   bộ class HTML DÙNG CHUNG cho mọi module (.rule, .product_list,
   .rule_form, .add_form, .text-cell/.input-cell, .btn, .pageman...).

   Không sửa bất kỳ file skin_<module>.php nào — chỉ override CSS, nên
   áp dụng cho TẤT CẢ các trang admin cùng lúc (Users, Pages, Gallery,
   Weblinks, Contacts, Orders, Partners, Admins, Menus, Settings...).

   Toàn bộ selector được scope trong #maincontent để không ảnh hưởng tới
   trang đăng nhập hay bất kỳ phần nào khác ngoài nội dung module.
   ========================================================================= */

#maincontent{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--uni-text, #1a2233);
}
/* Toàn bộ link trong nội dung admin đã được tạo kiểu riêng (nút, pill, badge,
   thẻ...) nên bỏ gạch chân mặc định của trình duyệt cho gọn — trước đây
   .notes a / .rule_form a chưa set text-decoration nên vẫn bị gạch chân. */
#maincontent a{text-decoration:none;}

/* ---------- Bảng "trần" còn sót lại (chưa gắn class .rule_form) ---------- */
/* Rất nhiều module (Files, Languages, Menus, Modules, Settings, Skins,
   Components...) còn dùng <table> thuần không class. Quy tắc chung, độ
   ưu tiên thấp này chỉ chỉnh khoảng cách/đường viền cơ bản; các quy tắc
   cụ thể hơn bên dưới (.rule_form, .add_form table, .ui-accordion-content
   table) có độ ưu tiên CSS cao hơn nên tự động thắng, không cần !important. */
#maincontent table{
  border-collapse:collapse;
  font-size:13px;
}
#maincontent table td,
#maincontent table th{
  padding:8px 10px;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  vertical-align:top;
}
#maincontent table th{
  text-align:left;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--uni-text-muted, #6b7690);
}

/* ---------- Khối nội dung .rule -> card ---------- */
#maincontent .rule{
  background:var(--uni-surface, #fff);
  border:1px solid var(--uni-border, #e5e9f0);
  border-radius:var(--uni-radius, 10px);
  box-shadow:var(--uni-shadow, 0 1px 2px rgba(20,30,60,.04));
  margin-bottom:18px;
  overflow:hidden;
}

/* ---------- Tiêu đề section (.product_list) -> card header ---------- */
#maincontent .product_list{
  padding:14px 20px;
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  background:var(--uni-surface, #fff);
}

/* ---------- Thanh công cụ (.notes: hide/show/delete/export) ---------- */
#maincontent .notes{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  background:#fafbfd;
}
#maincontent .notes a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 12px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:600;
  color:var(--uni-text-muted, #6b7690);
  border:1px solid var(--uni-border, #e5e9f0);
  background:#fff;
}
#maincontent .notes a:hover{
  color:var(--uni-primary, #2f5fe0);
  border-color:var(--uni-primary, #2f5fe0);
  background:var(--uni-primary-soft, #e8eefd);
}
#maincontent .notes a img{vertical-align:middle;}
#maincontent .notes span{color:var(--uni-text-muted, #6b7690);font-size:12.5px;font-weight:600;}

/* ---------- Bảng dữ liệu (.rule_form) ---------- */
#maincontent table.rule_form{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
}
#maincontent table.rule_form tr.tr_top{
  background:#fafbfd;
}
#maincontent table.rule_form tr.tr_top td{
  padding:10px 16px;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--uni-text-muted, #6b7690);
  border-bottom:1px solid var(--uni-border, #e5e9f0);
}
#maincontent table.rule_form tr:not(.tr_top) td{
  padding:11px 16px;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  vertical-align:middle;
}
#maincontent table.rule_form tr:not(.tr_top):hover td{
  background:#f7f9fc;
}
#maincontent table.rule_form tr:last-child td{border-bottom:none;}
#maincontent table.rule_form a{color:var(--uni-primary, #2f5fe0);font-weight:600;}
#maincontent table.rule_form a:hover{text-decoration:underline;}

/* ---------- Bảng dữ liệu (.rule_form) trên màn hình nhỏ (điện thoại) ----------
   LỖI: bảng danh sách (vd "Danh sách các trang tin", danh sách Sản phẩm,
   Users, Partners, Weblinks...) dùng chung 1 khối HTML <table class="rule_form
   tablesorter"> ở MỌI module (xem objListHtml() trong các skin_<module>.php),
   nhưng module này KHÔNG có class .col... cố định chiều rộng và cũng không
   có div bọc overflow-x nào cả. Trên màn hình hẹp (điện thoại), trình duyệt
   ép cả bảng vừa khít chiều ngang màn hình bằng cách co từng cột lại rất
   nhỏ -> cột "Tiêu đề" chỉ còn vài chục px, khiến tiêu đề dài bị xuống
   dòng từng chữ một, hàng bị kéo cao bất thường (đúng như ảnh chụp màn
   hình "Quản lý Tin tức" bị rớt dòng).

   CÁCH SỬA (không đụng tới bất kỳ skin_<module>.php nào, áp dụng cho TẤT
   CẢ các trang danh sách cùng lúc): dùng kỹ thuật CSS thuần "table {
   display:block; overflow-x:auto; }" - biến bảng thành 1 khối có thể
   CUỘN NGANG, giữ nguyên chiều rộng tối thiểu hợp lý cho các cột thay vì
   bị ép co lại. .rule (khung card bọc ngoài mỗi bảng) đang có
   "overflow:hidden" để bo góc card -> chỉ mở overflow-x (giữ overflow-y
   hidden) để không phá bo góc, đồng thời chính bảng cũng overflow-x:auto
   để có thanh cuộn ngay sát viền bảng, dễ nhận biết trên điện thoại. */
@media (max-width: 780px){
  #maincontent .rule{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #maincontent table.rule_form{
    display:block;
    width:auto !important;
    min-width:640px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Cột checkbox/trạng thái không cần quá rộng, dồn chỗ cho cột Tiêu đề */
  #maincontent table.rule_form td.col1{width:34px;}
  #maincontent table.rule_form td.col3,
  #maincontent table.rule_form th.col3{min-width:220px;}

  /* Trang "Quản lý thư viện ảnh" (files_admin.php::getLibraryList(), chế
     độ xem Danh sách) và các bảng "trần" chưa gắn class .rule_form ở vài
     module cũ (Files, Languages, Menus, Modules, Settings, Skins,
     Components...) dùng class "tableborder" thay vì "rule_form" nên
     không nằm trong luật ở trên — bị lỗi rớt dòng y hệt, cùng cách sửa. */
  #maincontent table.tableborder{
    display:block;
    width:auto !important;
    min-width:560px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ---------- Phân trang (.paging) ---------- */
#maincontent .paging{padding:14px 16px !important;border:none !important;}
#maincontent .paging a,
#maincontent .paging span,
#maincontent .paging button,
#maincontent .paging input[type="button"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;height:26px;
  padding:0 6px;
  margin:2px 3px 2px 0;
  border-radius:6px;
  border:1px solid var(--uni-border, #e5e9f0);
  color:var(--uni-text, #1a2233);
  font-size:12px;
  font-weight:600;
  font-family:inherit;
  background:var(--uni-surface, #fff);
  cursor:pointer;
  line-height:1;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:none;
}
#maincontent .paging a:hover,
#maincontent .paging button:hover,
#maincontent .paging input[type="button"]:hover{border-color:var(--uni-primary, #2f5fe0);color:var(--uni-primary, #2f5fe0);}
#maincontent .paging a.active,
#maincontent .paging button.active,
#maincontent .paging input[type="button"].active,
#maincontent .paging .active{
  background:var(--uni-primary, #2f5fe0) !important;
  border-color:var(--uni-primary, #2f5fe0) !important;
  color:#fff !important;
}

/* ---------- Form thêm/sửa (.add_form) ---------- */
/* Reset màu đỏ/in đậm mà css module-riêng (content1.css) áp lên .add_form */
#maincontent .add_form{
  color:var(--uni-text, #1a2233) !important;
  font-weight:400 !important;
}
#maincontent .add_form{
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:12px 18px;
  align-items:center;
  padding:20px;
}
#maincontent .add_form .text-cell{
  font-size:13px;
  font-weight:600;
  color:var(--uni-text, #1a2233);
}
#maincontent .add_form .input-cell{min-width:0;}
#maincontent .add_form .clear,
#maincontent .add_form .alias_btn{
  grid-column:1 / -1;
}
#maincontent .add_form .alias_btn{padding-top:6px;border-top:1px solid var(--uni-border, #e5e9f0);margin-top:6px;}

/* SỬA LỖI: form "Thêm/Sửa danh mục" (skin_menus.php::addEditCategoryForm(),
   dùng chung cho tab "Danh mục" của MỌI module — Tin tức, Dịch vụ,...) gắn
   class "add_form" LÊN CẢ <table> nằm bên trong <form class="add_form">,
   không chỉ trên <form>. Rule "#maincontent .add_form{display:grid;
   grid-template-columns:180px minmax(0,1fr);...}" ở trên chọn theo class
   nên khớp luôn với <table class="add_form"> đó, biến cả cái bảng thành
   CSS grid — xóa mất cấu trúc hàng/cột thật (mỗi <tr> bị nhồi vào 1 trong 2
   cột grid 180px/1fr), khiến các ô nhập liệu + nút "Thêm"/"Cập nhật" bị
   tràn ra ngoài khung, nhìn không thấy hết (lỗi "Thêm danh mục bị tràn/rớt
   xuống dưới"). Cùng cách đã dùng cho .add_form.uni-editform ở modern.css:
   ép <table class="add_form"> luôn hiển thị đúng kiểu bảng, không bị grid
   hoá theo class trùng tên. */
#maincontent table.add_form{
  display:table !important;
}

/* Biến thể form dựng bằng <table><td class="col1/col2"> (vd: skin_admins.php)
   thay vì cặp div .text-cell/.input-cell (vd: skin_users.php). Grid ở trên
   không có tác dụng bên trong table nên cần style riêng cho table con này. */
#maincontent .add_form > table{
  grid-column:1 / -1;
  width:100% !important;
  border-collapse:collapse;
}
#maincontent .add_form table td{
  padding:10px 8px;
  vertical-align:top;
  font-weight:400;
}
#maincontent .add_form table td.col1{
  width:170px !important;
  font-size:13px;
  font-weight:600;
  color:var(--uni-text, #1a2233);
  white-space:nowrap;
  padding-top:12px;
}
#maincontent .add_form table td.col2,
#maincontent .add_form table td.col3{
  padding-left:8px !important;
}

/* Bảng lồng bên trong td.col2 (vd: danh sách checkbox nhóm quyền trong
   form admin) — ô đầu tiên rỗng dùng để thụt lề kiểu bảng cũ, không cần
   nữa với layout mới nên thu về 0 cho thẳng hàng với input phía trên. */
#maincontent .add_form table table{
  margin:0;
}
#maincontent .add_form table table td{
  padding:4px 6px;
  vertical-align:middle;
}
#maincontent .add_form table table td:empty{
  padding:0;
  width:0;
}

/* Ô nhập liệu dùng chung trong toàn bộ nội dung admin */
#maincontent input[type="text"],
#maincontent input[type="password"],
#maincontent input[type="email"],
#maincontent input[type="number"],
#maincontent select{
  width:100%;
  max-width:480px;
  padding:8px 11px;
  border:1px solid var(--uni-border, #e5e9f0);
  border-radius:8px;
  font-size:13.5px;
  font-family:inherit;
  color:var(--uni-text, #1a2233);
  background:#fff;
}
/* Textarea tách riêng: KHÔNG giới hạn max-width vì nhiều nơi (Miêu tả,
   Meta keywords, Meta description, Tình trạng...) cố tình đặt
   style="width:100%" ngay trong HTML để chiếm hết chiều rộng khung chứa;
   max-width:480px trước đây vô hiệu hoá ý đồ đó. */
#maincontent textarea{
  width:100%;
  max-width:100%;
  padding:8px 11px;
  border:1px solid var(--uni-border, #e5e9f0);
  border-radius:8px;
  font-size:13.5px;
  font-family:inherit;
  color:var(--uni-text, #1a2233);
  background:#fff;
  box-sizing:border-box;
}
#maincontent input[type="text"]:focus,
#maincontent input[type="password"]:focus,
#maincontent input[type="email"]:focus,
#maincontent input[type="number"]:focus,
#maincontent textarea:focus,
#maincontent select:focus{
  outline:none;
  border-color:var(--uni-primary, #2f5fe0);
  box-shadow:0 0 0 3px var(--uni-primary-soft, #e8eefd);
}
#maincontent input[type="checkbox"],
#maincontent input[type="radio"]{
  accent-color:var(--uni-primary, #2f5fe0);
  width:15px;height:15px;
  vertical-align:middle;
}

/* ---------- Nút bấm (.btn) ---------- */
#maincontent .btn,
#maincontent input.btn,
#maincontent button.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border:none;
  border-radius:8px;
  background:var(--uni-primary, #2f5fe0);
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
}
#maincontent .btn:hover,
#maincontent input.btn:hover,
#maincontent button.btn:hover{
  background:var(--uni-primary-dark, #2249b8);
}

/* ---------- Tab (.pageman, jQuery UI tabs) ---------- */
#maincontent .pageman{
  border:none !important;
  background:none !important;
  border-radius:0 !important;
  margin-bottom:14px;
}
#maincontent .pageman_tab{
  display:flex;
  gap:4px;
  padding:0;
  margin:0;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  list-style:none;
}
#maincontent .pageman_tab li{
  border:none !important;
  background:none !important;
  margin:0 !important;
}
#maincontent .pageman_tab li a{
  display:block;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--uni-text-muted, #6b7690);
  border-bottom:2px solid transparent;
}
#maincontent .pageman_tab li a:hover{color:var(--uni-primary, #2f5fe0);}
#maincontent .pageman_tab li.ui-state-active a,
#maincontent .pageman_tab li.ui-tabs-selected a{
  color:var(--uni-primary, #2f5fe0);
  border-bottom-color:var(--uni-primary, #2f5fe0);
}

/* ---------- Card thống kê / bảng nhỏ khác dùng chung col1-col5 ---------- */
#maincontent .col1,#maincontent .col2,#maincontent .col3,#maincontent .col4,#maincontent .col5{
  padding:10px 14px;
}

/* ---------- .left-cell / .right-cell ---------- */
/* Dùng ở nhiều module: Dashboard (skin_home.php), phân quyền admin
   (skin_users.php, skin_admins.php), Components, Skins, File Manager...
   Trước đây các module này KHÔNG có style riêng (0 rule trong bất kỳ css
   nào) nên hiển thị "trần" — không nền, không viền, không khoảng cách.
   Chỉ thêm khung thẻ (card), KHÔNG đổi float/width/display để không phá
   layout 2 cột hiện có do style inline hoặc JS (equalcolumns) đảm nhiệm. */
#maincontent .left-cell,
#maincontent .right-cell{
  background:var(--uni-surface, #fff);
  border:1px solid var(--uni-border, #e5e9f0);
  border-radius:var(--uni-radius, 10px);
  box-shadow:var(--uni-shadow, 0 1px 2px rgba(20,30,60,.04));
  margin-bottom:16px;
  overflow:hidden;
}
#maincontent .left-cell > table,
#maincontent .right-cell > table{margin:0;}

/* ---------- jQuery UI Accordion ---------- */
/* Reskin lại theme "smoothness" xám cũ (ui.theme.css) cho khớp bộ màu
   mới. Dùng ở Dashboard (Quick Action/Welcome/Last login/Mail logs) và
   ở box phân quyền nhóm (skin_admins.php, skin_users.php). */
#maincontent .ui-accordion{border:none !important;background:none !important;}
#maincontent .ui-accordion-header{
  background:#fafbfd !important;
  border:none !important;
  border-bottom:1px solid var(--uni-border, #e5e9f0) !important;
  border-radius:0 !important;
  margin-top:0 !important;
  color:var(--uni-text, #1a2233) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
  padding:12px 18px !important;
}
#maincontent .ui-accordion-header a{
  display:block !important;
  padding:0 !important;
  color:var(--uni-text, #1a2233) !important;
  font-weight:700 !important;
  font-size:13.5px !important;
}
/* Ẩn icon sprite cũ (image-sprite lỗi thời), thay bằng mũi tên CSS */
#maincontent .ui-accordion-header .ui-icon{display:none !important;}
#maincontent .ui-accordion-header:after{
  content:"\25BE";
  float:right;
  color:var(--uni-text-muted, #6b7690);
  font-size:11px;
}
#maincontent .ui-accordion-header.ui-state-active:after,
#maincontent .ui-accordion-header.ui-accordion-header-active:after{
  content:"\25B4";
  color:var(--uni-primary, #2f5fe0);
}
#maincontent .ui-accordion-header.ui-state-active,
#maincontent .ui-accordion-header.ui-accordion-header-active{
  background:var(--uni-primary-soft, #e8eefd) !important;
}
#maincontent .ui-accordion-header.ui-state-active a,
#maincontent .ui-accordion-header.ui-accordion-header-active a{
  color:var(--uni-primary, #2f5fe0) !important;
}
#maincontent .ui-accordion-content{
  border:none !important;
  background:#fff !important;
  padding:16px 18px !important;
  margin:0 !important;
  font-size:13px;
  color:var(--uni-text, #1a2233);
}
/* Bảng "trần" (không có class .rule_form) nằm trong accordion, vd danh
   sách đăng nhập gần nhất / mail error logs ở Dashboard */
#maincontent .ui-accordion-content table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
#maincontent .ui-accordion-content table th{
  text-align:left;
  padding:8px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--uni-text-muted, #6b7690);
  border-bottom:1px solid var(--uni-border, #e5e9f0);
}
#maincontent .ui-accordion-content table td{
  padding:9px 10px;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
  vertical-align:top;
}
#maincontent .ui-accordion-content table tr:last-child td{border-bottom:none;}

/* ---------- Khung tìm kiếm (#search-form: skin_pages.php, skin_settings.php) ---------- */
/* Cả 2 nơi đang dùng style="color:#222..." / "font-weight:bold" viết tay ngay
   trong PHP (không có class), độ ưu tiên cao hơn mọi rule CSS thường nên phải
   dùng !important. CHỈ đổi màu chữ/độ đậm cho khớp bộ nhận diện mới — KHÔNG
   đụng tới padding/display (đang được JS ẩn/hiện #search-form khi bấm nút
   "Tìm kiếm" trong skin_pages.php) để không phá layout hiện có. */
#maincontent #search-form{
  background:#fafbfd;
  border-bottom:1px solid var(--uni-border, #e5e9f0);
}
#maincontent #search-form span{
  color:var(--uni-text-muted, #6b7690) !important;
  font-weight:600 !important;
  font-size:12.5px !important;
}
#maincontent #search-form input[type="text"]{
  max-width:260px;
  display:inline-block;
}

/* ========================================================================
   Bộ icon SVG thay cho ảnh raster 21x21px từ 2011 (add_icon.png,
   tools_icon*.png, ico_*.jpg...). Kỹ thuật: đặt content:"" lên chính thẻ
   <img> để trình duyệt (Chrome/Edge/Firefox, Safari 15.4+) render nó như
   một hộp trống thay vì ảnh gốc, sau đó tô icon bằng mask-image (SVG nội
   tuyến, base64) + background-color:currentColor -> icon luôn nét và tự
   đổi màu theo màu chữ của link cha (kể cả khi hover).
   KHÔNG sửa bất kỳ file skin_<module>.php nào — chỉ match theo tên file
   ảnh cuối đường dẫn (img[src$="..."]) nên áp dụng cho TẤT CẢ module
   cùng lúc. Trình duyệt cũ không hỗ trợ content-on-img: ảnh gốc vẫn hiện
   ra như trước (an toàn, không vỡ giao diện).
   ========================================================================= */
#maincontent img[src$="add_icon.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iNSIgeDI9IjEyIiB5Mj0iMTkiLz48bGluZSB4MT0iNSIgeTE9IjEyIiB4Mj0iMTkiIHkyPSIxMiIvPjwvc3ZnPg==") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGxpbmUgeDE9IjEyIiB5MT0iNSIgeDI9IjEyIiB5Mj0iMTkiLz48bGluZSB4MT0iNSIgeTE9IjEyIiB4Mj0iMTkiIHkyPSIxMiIvPjwvc3ZnPg==") no-repeat center / contain;
}
#maincontent img[src$="tools_icon1.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMyA2IDUgNiAyMSA2Ii8+PHBhdGggZD0iTTE5IDZsLTEgMTRhMiAyIDAgMCAxLTIgMkg4YTIgMiAwIDAgMS0yLTJMNSA2Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTEiIHgyPSIxMCIgeTI9IjE3Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMTEiIHgyPSIxNCIgeTI9IjE3Ii8+PHBhdGggZD0iTTkgNlY0YTEgMSAwIDAgMSAxLTFoNGExIDEgMCAwIDEgMSAxdjIiLz48L3N2Zz4=") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMyA2IDUgNiAyMSA2Ii8+PHBhdGggZD0iTTE5IDZsLTEgMTRhMiAyIDAgMCAxLTIgMkg4YTIgMiAwIDAgMS0yLTJMNSA2Ii8+PGxpbmUgeDE9IjEwIiB5MT0iMTEiIHgyPSIxMCIgeTI9IjE3Ii8+PGxpbmUgeDE9IjE0IiB5MT0iMTEiIHgyPSIxNCIgeTI9IjE3Ii8+PHBhdGggZD0iTTkgNlY0YTEgMSAwIDAgMSAxLTFoNGExIDEgMCAwIDEgMSAxdjIiLz48L3N2Zz4=") no-repeat center / contain;
}
#maincontent img[src$="tools_icon2.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVaIi8+PC9zdmc+") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE3IDNhMi44NSAyLjgzIDAgMSAxIDQgNEw3LjUgMjAuNSAyIDIybDEuNS01LjVaIi8+PC9zdmc+") no-repeat center / contain;
}
#maincontent img[src$="tools_icon3.png"],
#maincontent img[src$="ico_09.jpg"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkuOSA0LjI0QTkuMTIgOS4xMiAwIDAgMSAxMiA0YzcgMCAxMSA4IDExIDhhMTguNSAxOC41IDAgMCAxLTIuMTYgMy4xOW0tNi43Mi0xLjA3YTMgMyAwIDEgMS00LjI0LTQuMjQiLz48cGF0aCBkPSJNMTcuOTQgMTcuOTRBMTAuOTQgMTAuOTQgMCAwIDEgMTIgMjBjLTcgMC0xMS04LTExLThhMTguNDUgMTguNDUgMCAwIDEgNS4wNi01Ljk0Ii8+PGxpbmUgeDE9IjEiIHkxPSIxIiB4Mj0iMjMiIHkyPSIyMyIvPjwvc3ZnPg==") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTkuOSA0LjI0QTkuMTIgOS4xMiAwIDAgMSAxMiA0YzcgMCAxMSA4IDExIDhhMTguNSAxOC41IDAgMCAxLTIuMTYgMy4xOW0tNi43Mi0xLjA3YTMgMyAwIDEgMS00LjI0LTQuMjQiLz48cGF0aCBkPSJNMTcuOTQgMTcuOTRBMTAuOTQgMTAuOTQgMCAwIDEgMTIgMjBjLTcgMC0xMS04LTExLThhMTguNDUgMTguNDUgMCAwIDEgNS4wNi01Ljk0Ii8+PGxpbmUgeDE9IjEiIHkxPSIxIiB4Mj0iMjMiIHkyPSIyMyIvPjwvc3ZnPg==") no-repeat center / contain;
}
#maincontent img[src$="icon_hienthi.jpg"],
#maincontent img[src$="ico_10.jpg"],
#maincontent img[src$="status_1b.jpg"],
#maincontent img[src$="view.png"],
#maincontent img[src$="view_icon.jpg"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEgMTJzNC04IDExLTggMTEgOCAxMSA4LTQgOC0xMSA4LTExLTgtMTEtOFoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIi8+PC9zdmc+") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEgMTJzNC04IDExLTggMTEgOCAxMSA4LTQgOC0xMSA4LTExLTgtMTEtOFoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIi8+PC9zdmc+") no-repeat center / contain;
}
#maincontent img[src$="icon_hienthitrangchu.jpg"],
#maincontent img[src$="ico_04.jpg"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgOWw5LTcgOSA3djExYTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yWiIvPjxwb2x5bGluZSBwb2ludHM9IjkgMjIgOSAxMiAxNSAxMiAxNSAyMiIvPjwvc3ZnPg==") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTMgOWw5LTcgOSA3djExYTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yWiIvPjxwb2x5bGluZSBwb2ludHM9IjkgMjIgOSAxMiAxNSAxMiAxNSAyMiIvPjwvc3ZnPg==") no-repeat center / contain;
}
#maincontent img[src$="tools_icon4.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMjMgNCAyMyAxMCAxNyAxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEgMjAgMSAxNCA3IDE0Ii8+PHBhdGggZD0iTTMuNTEgOWE5IDkgMCAwIDEgMTQuODUtMy4zNkwyMyAxME0xIDE0bDQuNjQgNC4zNkE5IDkgMCAwIDAgMjAuNDkgMTUiLz48L3N2Zz4=") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iMjMgNCAyMyAxMCAxNyAxMCIvPjxwb2x5bGluZSBwb2ludHM9IjEgMjAgMSAxNCA3IDE0Ii8+PHBhdGggZD0iTTMuNTEgOWE5IDkgMCAwIDEgMTQuODUtMy4zNkwyMyAxME0xIDE0bDQuNjQgNC4zNkE5IDkgMCAwIDAgMjAuNDkgMTUiLz48L3N2Zz4=") no-repeat center / contain;
}
#maincontent img[src$="tools_icon5.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjguNSIgcj0iMS41Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjEgMTUgMTYgMTAgNSAyMSIvPjwvc3ZnPg==") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjguNSIgcj0iMS41Ii8+PHBvbHlsaW5lIHBvaW50cz0iMjEgMTUgMTYgMTAgNSAyMSIvPjwvc3ZnPg==") no-repeat center / contain;
}
#maincontent img[src$="tools_icon6.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIyMyA3IDE2IDEyIDIzIDE3IDIzIDciLz48cmVjdCB4PSIxIiB5PSI1IiB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9zdmc+") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlnb24gcG9pbnRzPSIyMyA3IDE2IDEyIDIzIDE3IDIzIDciLz48cmVjdCB4PSIxIiB5PSI1IiB3aWR0aD0iMTUiIGhlaWdodD0iMTQiIHJ4PSIyIi8+PC9zdmc+") no-repeat center / contain;
}
#maincontent img[src$="tools_icon7.png"]{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  vertical-align:middle;
  margin-right:5px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4WiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMTMiIHgyPSI4IiB5Mj0iMTMiLz48bGluZSB4MT0iMTYiIHkxPSIxNyIgeDI9IjgiIHkyPSIxNyIvPjwvc3ZnPg==") no-repeat center / contain;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE0IDJINmEyIDIgMCAwIDAtMiAydjE2YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY4WiIvPjxwb2x5bGluZSBwb2ludHM9IjE0IDIgMTQgOCAyMCA4Ii8+PGxpbmUgeDE9IjE2IiB5MT0iMTMiIHgyPSI4IiB5Mj0iMTMiLz48bGluZSB4MT0iMTYiIHkxPSIxNyIgeDI9IjgiIHkyPSIxNyIvPjwvc3ZnPg==") no-repeat center / contain;
}