/* Cộng Đồng Cầm Đồ — UI System V15
   Global visual consistency + low-cost performance improvements.
   Loaded after the legacy inline CSS so this file can modernize old screens safely. */

:root{
  --ui-navy:#10263d;
  --ui-navy-2:#173b55;
  --ui-cyan:#0e7490;
  --ui-cyan-2:#1aa7bd;
  --ui-aqua:#68dbe7;
  --ui-ink:#142033;
  --ui-muted:#667085;
  --ui-line:#e2e8f0;
  --ui-soft:#f3f8fa;
  --ui-bg:#f6f8fb;
  --ui-card:#fff;
  --ui-radius:16px;
  --ui-shadow:0 8px 24px rgba(16,38,61,.055);
  --ui-shadow-hover:0 16px 38px rgba(16,38,61,.09);
}

/* ---------- Foundation ---------- */
html{background:var(--ui-bg)}
body{background:linear-gradient(180deg,#f8fafc 0,#f6f8fb 340px);color:var(--ui-ink)}
img{max-width:100%}
::selection{background:#c8f2f6;color:#10263d}
:focus-visible{outline:3px solid rgba(26,167,189,.28);outline-offset:2px}
a,button,input,select,textarea{touch-action:manipulation}
.wrap{width:min(1200px,calc(100% - 36px))}
.narrow{max-width:860px}

/* ---------- Header ---------- */
.top{border-bottom:1px solid rgba(16,38,61,.08);box-shadow:0 1px 0 rgba(255,255,255,.8),0 8px 28px rgba(16,38,61,.035)}
.top .nav{height:76px}
.desktop-links>a,.desktop-user>a{border-radius:10px;color:#42526a}
.desktop-links>a:hover,.desktop-user>a:hover{background:#edf7f9;color:var(--ui-cyan)}
.nav-cta{background:linear-gradient(135deg,var(--ui-cyan),var(--ui-cyan-2))!important;box-shadow:0 7px 17px rgba(14,116,144,.18)}
.header-search input{border-color:#d8e2ea;background:#f8fafc}
.header-search input:focus{border-color:#80cbd6;box-shadow:0 0 0 4px rgba(14,116,144,.10)}
.notice-bell{border-color:#dfe7ed!important}
.mobile-menu{border-top-color:#e8eef3}

/* ---------- Core cards / type ---------- */
.card,.surface{border-color:var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.card{padding:23px}
.card h1,.surface h1{color:#10263d}
.card h2,.card h3,.surface h2,.surface h3{color:#172b43}
h1,h2,h3{text-wrap:balance}
p{overflow-wrap:break-word}
.muted{color:#6f7c8d}
.section-kicker,.portal-kicker{color:var(--ui-cyan)!important}

/* ---------- Buttons ---------- */
.btn{border-radius:11px;background:linear-gradient(135deg,var(--ui-cyan),#1289a2);box-shadow:0 6px 16px rgba(14,116,144,.13);transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(14,116,144,.18);filter:none}
.btn.out{border-color:#b8d7df;color:#0d6f88!important;background:#fff;box-shadow:none}
.btn.out:hover{background:#f1fafb;border-color:#7dc6d3}
.btn.soft{background:#eaf7fa;color:#0c657b!important;box-shadow:none}
.btn.red{background:#b42318}
.linkbtn:hover{color:var(--ui-cyan)}

/* ---------- Forms ---------- */
.form input,.form textarea,.form select,input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="tel"],input[type="number"],textarea,select{
  border-color:#ccd8e2;border-radius:11px;background:#fff;color:#16243a;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}
.form input:focus,.form textarea:focus,.form select:focus,input:focus,textarea:focus,select:focus{border-color:#75c5d2;box-shadow:0 0 0 4px rgba(14,116,144,.09);outline:0}
.form label,label{color:#344054}

/* ---------- Alerts / badges ---------- */
.badge,.verified,.shop-status.active{border-radius:999px}
.badge{background:#eaf7fa;color:#0b6d85}
.verified{color:#087a69}
.ok{background:#ecfdf5;border-color:#a7f3d0}
.alert{background:#fff5f4;border-color:#ffd4cf}

/* ---------- Forum ---------- */
.forum-page{padding-top:30px}
.forum-page-head h1{color:#10263d}
.forum-tabs{border-color:#dfe8ef;box-shadow:0 5px 18px rgba(16,38,61,.035)}
.forum-tabs a.active{background:linear-gradient(135deg,var(--ui-cyan),#158ea5)}
.forum-board{border-color:#dfe7ee;box-shadow:var(--ui-shadow)}
.forum-board-title{background:linear-gradient(180deg,#fbfdfe,#f7fafc);border-color:#e7edf2}
.forum-row{border-color:#edf1f5}
.forum-row:hover{background:#f8fcfd}
.forum-avatar,.forum-category-icon,.forum-asset-icon{background:#e9f7fa;color:#0e7490}
.forum-topic-title,.topic-title{color:#17283d}
.forum-topic-title:hover,.topic-title:hover{color:#0e7490}
.forum-topic-tag{background:#eaf7fa;color:#0c6d84}
.forum-category-card,.forum-asset-card{border-color:#e0e8ef;box-shadow:0 4px 16px rgba(16,38,61,.035)}
.forum-category-card:hover,.forum-asset-card:hover{border-color:#9dcfd8;box-shadow:0 10px 26px rgba(16,38,61,.07)}
.answer{border-color:#e0e7ee;border-radius:16px;box-shadow:0 4px 16px rgba(16,38,61,.025)}
.answer.best{border-color:#8dd4c1;background:#fbfffe}
.comment{background:#f8fafc;border-color:#e8eef3}

/* ---------- Shop directory / shop detail ---------- */
.shop-directory-page{padding-top:30px}
.shop-directory-head{background:linear-gradient(135deg,#f4fafc,#fff 68%);border-color:#dce8ee}
.shop-directory-filters{border-color:#dfe7ed;background:#fff}
.directory-shop-card{border-color:#dfe7ed!important;border-radius:16px!important;box-shadow:0 5px 18px rgba(16,38,61,.035)!important;transition:.16s ease}
.directory-shop-card:hover{transform:translateY(-2px);border-color:#a8d2da!important;box-shadow:var(--ui-shadow-hover)!important}
.directory-shop-logo{background:#fff;border-color:#e2e8ef!important}
.shop-profile-hero,.shop-brand-hero{border-color:#dae7ed!important;background:linear-gradient(135deg,#f5fbfc,#fff)!important}
.shop-tabbar a.active{color:var(--ui-cyan)!important;border-color:var(--ui-cyan)!important}

/* ---------- Recruitment ---------- */
.job-page{padding-top:30px}
.job-hero{border-color:#dbe7ed;background:linear-gradient(135deg,#f2fafc,#fff 70%);box-shadow:var(--ui-shadow)}
.job-card{border-color:#e0e8ef;border-radius:16px;box-shadow:0 5px 18px rgba(16,38,61,.035);transition:.16s ease}
.job-card:hover{transform:translateY(-2px);border-color:#a7d3dc;box-shadow:var(--ui-shadow-hover)}
.job-card h2 a:hover{color:var(--ui-cyan)}
.job-pill{background:#eef7f9;color:#456873}
.job-shop{border-color:#e9eef3}
.job-section,.job-side{border-color:#e0e7ee!important;border-radius:16px!important;box-shadow:var(--ui-shadow)}

/* ---------- Liquidation ---------- */
.liq-page{padding-top:28px}
.liq-hero-v2{border-color:#dbe8ee!important;background:linear-gradient(125deg,#f2fafc 0%,#fff 72%)!important;box-shadow:var(--ui-shadow)!important}
.liq-trust-row span{border-color:#d9e8ed!important;color:#365f6b!important}
.liq-icon-tabs{border-color:#dfe8ee!important;box-shadow:0 5px 18px rgba(16,38,61,.035)!important}
.liq-icon-tabs .liq-icon-tab.active{color:#0e7490!important;background:#edf9fb!important}
.liq-icon-tabs .liq-icon-tab.active:after{background:#16a8bd!important}
.liq-react-levels{border-color:#e0e8ee!important;background:#fbfdfe!important}
.liq-card,.liq-card-v2{border-color:#e0e7ed!important;box-shadow:0 5px 18px rgba(16,38,61,.035)!important}
.liq-card:hover,.liq-card-v2:hover{transform:translateY(-2px);border-color:#a7d1da!important;box-shadow:var(--ui-shadow-hover)!important}
.liq-gallery-main,.liq-info{border-color:#dfe7ed!important;box-shadow:var(--ui-shadow)}

/* ---------- Owner area ---------- */
.owner-layout-v2{gap:18px}
.owner-side-v2{border-color:#dce6ed!important;box-shadow:var(--ui-shadow);background:#fff!important}
.owner-side-v2 a{border-radius:10px!important}
.owner-side-v2 a.active,.owner-side-v2 a:hover{background:#eaf7fa!important;color:#0d7088!important}
.owner-hero-v2{border-color:#d9e7ed!important;background:linear-gradient(135deg,#f1fafc,#fff 72%)!important;box-shadow:var(--ui-shadow)}
.owner-kpi-v2,.owner-section-v2,.owner-register-card,.owner-register-hero{border-color:#dfe7ed!important;box-shadow:var(--ui-shadow)}
.owner-kpi-v2 b{color:#10263d}
.owner-branch-row{border-color:#e9eef3!important}
.owner-register-step>b{background:#eaf7fa;color:#0e7490}
.owner-register-benefits>div{border-color:#e0e8ee;background:#fbfdfe}

/* ---------- User/profile/search/notifications ---------- */
.profile-card,.profile-head,.notification-item,.search-result,.tag-result{border-color:#dfe7ed!important;box-shadow:var(--ui-shadow)}
.profile-card,.profile-head{border-radius:16px!important}
.notification-item:hover,.search-result:hover,.tag-result:hover{background:#f8fcfd!important}

/* ---------- Admin ---------- */
.admin-layout,.admin-shell{background:transparent}
.admin-side{border-color:#dce5ec!important;background:#10263d!important;box-shadow:0 12px 30px rgba(16,38,61,.12)}
.admin-side a{border-radius:9px!important;color:#c8d5df!important}
.admin-side a:hover,.admin-side a.active{background:rgba(104,219,231,.12)!important;color:#fff!important}
.admin-title h1{color:#10263d}
.admin-table{border-collapse:separate!important;border-spacing:0;width:100%}
.admin-table th{background:#f6f9fb;color:#42526a;font-size:12px;text-transform:none;letter-spacing:.01em;position:sticky;top:0;z-index:1}
.admin-table th,.admin-table td{border-bottom:1px solid #e9eef3!important;padding:11px 12px!important}
.admin-table tr:hover td{background:#fbfdfe}

/* ---------- Footer ---------- */
.footer{margin-top:40px;background:#f4f8fb;border-top:1px solid #dce7ef;color:#536579}
.footer-inner{min-height:118px}
.footer-note{color:#536579}
.footer-brand img{filter:none}

/* ---------- Homepage polish ---------- */
.portal-services,.portal-regions,.portal-content{content-visibility:auto;contain-intrinsic-size:1px 700px}
.portal-service-card,.portal-region,.portal-topic,.portal-side-card,.portal-owner-card,.portal-join-card{transition:.16s ease}
.portal-service-card:hover,.portal-region:hover{box-shadow:var(--ui-shadow-hover)}
.portal-feed{box-shadow:var(--ui-shadow)}

/* ---------- Rendering performance ---------- */
.forum-row,.forum-category-card,.directory-shop-card,.liq-card,.liq-card-v2,.job-card,.portal-topic,.portal-article{
  content-visibility:auto;
  contain-intrinsic-size:1px 110px;
}
.liq-card,.liq-card-v2,.directory-shop-card,.job-card{contain-intrinsic-size:1px 330px}
img[loading="lazy"]{content-visibility:auto}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  body{font-size:14.5px}
  .wrap{width:min(100% - 24px,1200px)}
  .top .nav{width:calc(100% - 20px);height:64px}
  .card{padding:17px;border-radius:14px;margin-bottom:12px}
  .forum-page,.shop-directory-page,.job-page,.liq-page{padding-top:14px}
  .forum-board,.portal-feed{border-radius:13px}
  .job-card,.directory-shop-card,.liq-card,.liq-card-v2{border-radius:13px!important}
  .footer{margin-top:24px}
  .footer-inner{min-height:0;padding:22px 0;display:grid;justify-items:center;text-align:center}
  .footer-note{text-align:center;line-height:1.6}
  .admin-table th,.admin-table td{padding:9px 10px!important}
}

@media(max-width:430px){
  .wrap{width:calc(100% - 18px)}
  .card{padding:15px}
  .btn{min-height:40px;padding-left:13px;padding-right:13px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.logout-form{display:inline;margin:0}.logout-link{appearance:none;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;padding:10px 12px;border-radius:10px}.desktop-user .logout-link{color:#42526a}.desktop-user .logout-link:hover{background:#edf7f9;color:var(--ui-cyan)}.mobile-account .logout-form{display:block;width:100%}.mobile-account .logout-link{display:block;width:100%;text-align:left;padding:10px 0}