/* ==========================================================================
   modern.css — Lớp giao diện hiện đại cho skin "finance" (Phụ tùng Phúc Minh)
   Nạp SAU CÙNG nên chỉ ghi đè, không sửa file CSS gốc. Muốn quay về giao diện cũ:
   xóa dòng addCSSFile('modern') trong skins/user/finance/GlobalLoad.php.
   ========================================================================== */
:root{
  --pm-red:#e53935; --pm-red-dark:#c62828; --pm-ink:#1f2933; --pm-text:#4b5563;
  --pm-muted:#8a94a3; --pm-line:#e8eaee; --pm-bg:#f6f7f9; --pm-card:#fff;
  --pm-radius:10px; --pm-shadow:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --pm-shadow-lg:0 6px 24px rgba(16,24,40,.14);
}
html{scroll-behavior:smooth}
body{color:var(--pm-text);background:#fff;font-family:Roboto,"Segoe UI",Arial,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--pm-ink);letter-spacing:-.01em}
a{transition:color .15s ease,background-color .15s ease,box-shadow .2s ease,transform .2s ease}
a:hover{text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--pm-red);outline-offset:2px}

/* ---------- Tiêu đề khối ---------- */
.title-group h2:before{display:none!important}
.title-group{text-align:center;margin:44px 0 22px}
.title-group h2{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;position:relative;display:inline-block;padding-bottom:12px;margin:0}
.title-group h2:after{content:"";position:absolute;left:50%;bottom:0;width:48px;height:3px;border-radius:3px;background:var(--pm-red);transform:translateX(-50%)}

/* ---------- Header ---------- */
.header-container{background:#fff;box-shadow:0 1px 0 var(--pm-line)}
.header-middle{padding:10px 0}
.logo-wrapper .logo img{max-height:64px;width:auto}
.sm-searchbox-content form{border:2px solid var(--pm-red);border-radius:999px;overflow:hidden;background:#fff;display:flex;align-items:stretch}
.sm-searchbox-content input[type=text],.sm-searchbox-content input[type=search]{border:0!important;box-shadow:none!important;height:42px;padding:0 16px;font-size:14px;background:transparent}
.sm-searchbox-content select{border:0!important;background:var(--pm-bg);height:42px;padding:0 10px;border-right:1px solid var(--pm-line)!important}
.sm-searchbox-content button,.sm-searchbox-content .btn-search{background:var(--pm-red)!important;color:#fff!important;border:0!important;padding:0 20px;cursor:pointer}
.sm-searchbox-content button:hover{background:var(--pm-red-dark)!important}

/* ---------- Menu chính ---------- */
.block-title{border-radius:8px 8px 0 0;font-weight:700;letter-spacing:.02em}
.sm_megamenu_wrapper_vertical_menu .sambar-inner{border:1px solid var(--pm-line);border-top:0;border-radius:0 0 8px 8px;box-shadow:var(--pm-shadow-lg);background:#fff}
.sm_megamenu_lv1>a{transition:background-color .15s ease,color .15s ease,padding-left .15s ease}
.sm_megamenu_lv1:hover>a{color:var(--pm-red)!important;padding-left:18px}
.horizontal-type>li>a,.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_head{font-weight:500;text-transform:uppercase;font-size:13px;letter-spacing:.03em}
.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_lv1:hover>a,.sm_megamenu_wrapper_horizontal_menu .sm_megamenu_lv1.active>a{background:var(--pm-red);color:#fff!important;border-radius:6px}

/* ---------- Thẻ sản phẩm ---------- */
.product-item-info{background:var(--pm-card);border:1px solid var(--pm-line);border-radius:var(--pm-radius);overflow:hidden;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;height:100%}
.product-item-info:hover{box-shadow:var(--pm-shadow-lg);transform:translateY(-3px);border-color:transparent}
.product-item-image{background:#fff;overflow:hidden}
.product-item-image img{transition:transform .5s ease;aspect-ratio:1/1;object-fit:contain;width:100%}
.product-item-info:hover .product-item-image img{transform:scale(1.06)}
.product-item-details{padding:12px 14px 16px;text-align:left}
.product-item-name,.product-item-link{font-size:14px;font-weight:500;line-height:1.4;color:var(--pm-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.product-item-link:hover{color:var(--pm-red)}
.price,.price-box .price{color:var(--pm-red);font-weight:700;font-size:16px}
.old-price .price{color:var(--pm-muted);font-weight:400;font-size:13px;text-decoration:line-through}

/* ---------- Nút ---------- */
.btn,.button,button.action,.action.primary,input[type=submit],a.btn{border-radius:8px;font-weight:600;transition:background-color .15s ease,box-shadow .2s ease,transform .1s ease}
.btn:active,.button:active,input[type=submit]:active{transform:translateY(1px)}
.action.primary,input[type=submit],.btn-primary{background:var(--pm-red);border-color:var(--pm-red);color:#fff}
.action.primary:hover,input[type=submit]:hover,.btn-primary:hover{background:var(--pm-red-dark);border-color:var(--pm-red-dark);box-shadow:0 4px 12px rgba(229,57,53,.35)}

/* ---------- Form ---------- */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],select,textarea{border:1px solid #d6dae1;border-radius:8px;padding:10px 12px;background:#fff;color:var(--pm-ink);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{border-color:var(--pm-red);box-shadow:0 0 0 3px rgba(229,57,53,.15);outline:0}
label{font-weight:500;color:var(--pm-ink)}

/* ---------- Bảng (giỏ hàng, đơn hàng) ---------- */
table{border-collapse:collapse}
.table-wrapper table,.cart.table-wrapper table,table.data-table{width:100%;border:1px solid var(--pm-line);border-radius:var(--pm-radius);overflow:hidden}
table thead th{background:var(--pm-bg);color:var(--pm-ink);font-weight:600;padding:12px;text-align:left}
table td{padding:12px;border-top:1px solid var(--pm-line)}

/* ---------- Breadcrumb ---------- */
.breadcrumbs{background:var(--pm-bg);padding:12px 0;border-bottom:1px solid var(--pm-line);font-size:13px}
.breadcrumbs .items{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs .item a{color:var(--pm-text)}
.breadcrumbs .item a:hover{color:var(--pm-red)}
.breadcrumbs .item:not(:last-child):after{content:"/";margin-left:6px;color:var(--pm-muted)}

/* ---------- Footer ---------- */
.footer-middle{background:#14181f;color:#b9c0cc;padding:44px 0 24px}
.title-footer{color:#fff;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:16px;position:relative;padding-bottom:10px}
.title-footer:after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:3px;background:var(--pm-red)}
.footer-middle a{color:#b9c0cc}
.footer-middle a:hover{color:#fff}
.footer-middle li{padding:4px 0;line-height:1.6}

/* ---------- Nút nổi: hotline / giỏ hàng / lên đầu trang ---------- */
.hotline-block,.giohang-block{border-radius:999px!important;box-shadow:var(--pm-shadow-lg);background:var(--pm-red)!important;color:#fff;font-weight:700;padding:10px 18px}
.hotline-block:hover,.giohang-block:hover{background:var(--pm-red-dark)!important;transform:translateY(-2px)}
#yt-totop-fix{border-radius:50%;box-shadow:var(--pm-shadow-lg)}

/* ---------- Bài viết / nội dung ---------- */
.news-item,.item-news,.post-item{border:1px solid var(--pm-line);border-radius:var(--pm-radius);overflow:hidden;background:#fff;transition:box-shadow .25s ease}
.news-item:hover,.item-news:hover,.post-item:hover{box-shadow:var(--pm-shadow)}
.page-main .content,.cms-content{line-height:1.7}
.page-main .content img{border-radius:8px;height:auto}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  body{font-size:14px}
  .title-group{margin:30px 0 16px}
  .title-group h2{font-size:19px}
  .header-middle{padding:8px 0}
  .logo-wrapper .logo img{max-height:46px}
  .product-item-details{padding:10px}
  .product-item-name,.product-item-link{font-size:13px}
  .price,.price-box .price{font-size:14px}
  .footer-middle{padding:30px 0 14px}
  .hotline-block,.giohang-block{padding:9px 14px;font-size:14px}
  table td,table th{padding:9px 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== Bản vá 1: sửa lỗi hiển thị thấy trên trang thật ===== */
/* Tiêu đề khối: đưa gạch đỏ xuống dưới chữ (CSS cũ đặt nó ở giữa chữ) */
.title-group h2:before{display:none!important}
.title-group h2:after{top:auto!important;bottom:0!important;left:50%!important;margin:0!important;width:48px!important;height:3px!important;transform:translateX(-50%)!important}
.title-group h2{line-height:1.3;padding-bottom:14px}
/* Footer: chữ tiêu đề và liên kết bị tối trên nền tối */
.footer-middle .title-footer,.footer-middle .block-footer .title-footer{color:#fff!important;font-size:16px!important;line-height:1.3}
.footer-middle,.footer-middle li,.footer-middle p,.footer-middle .content-footer{color:#c9d1dc!important}
.footer-middle a,.footer-middle li a{color:#c9d1dc!important;font-size:14px;line-height:1.7}
.footer-middle a:hover{color:#fff!important}
.footer-middle li{font-size:14px}
.footer-bottom{background:#0f1319;color:#8a94a3;padding:14px 0;font-size:13px}
.footer-bottom address,.footer-bottom a{color:#8a94a3!important;margin:0}
/* Tin tức: thẻ đều nhau, ảnh cùng tỉ lệ */
.item-post{background:#fff;border:1px solid var(--pm-line);border-radius:var(--pm-radius);overflow:hidden;height:100%;transition:box-shadow .25s ease,transform .25s ease}
.item-post:hover{box-shadow:var(--pm-shadow-lg);transform:translateY(-3px)}
.item-post .image-blog{overflow:hidden;background:var(--pm-bg)}
.item-post .image-blog img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.item-post:hover .image-blog img{transform:scale(1.05)}
.item-post .info-blog{padding:14px 16px 18px}
.item-post .postTitle{margin:0 0 12px;font-size:15px;font-weight:600;line-height:1.45;text-transform:none}
.item-post .postTitle a{color:var(--pm-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.item-post .postTitle a:hover{color:var(--pm-red)}
.item-post .read-more a{display:inline-block;background:var(--pm-red);color:#fff;border-radius:6px;padding:7px 16px;font-size:13px;font-weight:600;text-transform:none}
.item-post .read-more a:hover{background:var(--pm-red-dark)}
/* Chừa chỗ cho 2 nút nổi (hotline/giỏ hàng) để không che chữ cuối trang trên điện thoại */
@media (max-width:767px){
  .footer-bottom{padding-bottom:76px}
  .hotline-block,.giohang-block{font-size:14px!important}
}