/* =============================================
   AseanBiz Module Page Style Unification
   Overrides Destoon native classes across all 
   module pages (know/, exhibit/, photo/, video/, 
   brand/, company/ detail, etc.) to match the
   .mic-* style of the homepage.
   Load AFTER aseanbiz-theme.css
   =============================================
   Version: 1.0
   Date: 2026-07-07
   ============================================= */

/* === HEAD-TXT — Universal Section Title === */
.head-txt {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  margin: 0 0 16px 0 !important;
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  height: auto !important;
  line-height: normal !important;
}
.head-txt strong,
.head-txt span,
.head-txt a {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.head-txt a,
.head-txt span a {
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 0.85;
}
.head-txt a:hover,
.head-txt span a:hover {
  opacity: 1;
  color: #e85d04 !important;
}
.head-txt span i { display: none; }
.head-txt .ui-icon-rec,
.head-txt .ui-icon-sort,
.head-txt .ui-icon-area,
.head-txt .ui-icon-list { display: none; }

/* === HEAD-SUB — Sidebar Section Title === */
.head-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  background: #1a1a1a !important;
  border: none !important;
  border-radius: 8px 8px 0 0 !important;
  height: auto !important;
  line-height: normal !important;
}
.head-sub strong {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.head-sub span a,
.head-sub a {
  color: #e85d04 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.head-sub span i { display: none; }

/* === B10 — Destoon Spacer (hide) === */
.b10 { height: 0 !important; display: none !important; }

/* === M3 / M2 — Main Content + Sidebar Layout === */
.m.m3,
.m.m2 {
  width: auto !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  background: transparent !important;
  border: none !important;
  position: relative;
}
.m.m3 { margin-top: 0 !important; }
.m.m2 > .m2l,
.m.m3 > .m3l {
  flex: 1 !important;
  min-width: 0 !important;
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 0 0 20px 0 !important;
  overflow: hidden;
}
.m.m2 > .m2r,
.m.m3 > .m3r {
  width: 340px !important;
  min-width: 340px !important;
  flex-shrink: 0 !important;
}

/* === SIDEBAR LISTS (list-txt, list-rank) === */
.list-txt,
.list-rank,
.list-com {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 8px 0 !important;
  margin-bottom: 20px !important;
}
.list-txt ul,
.list-rank ul,
.list-com ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.list-txt li,
.list-rank li,
.list-com li {
  padding: 8px 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}
.list-txt li:last-child,
.list-rank li:last-child,
.list-com li:last-child {
  border-bottom: none !important;
}
.list-txt li a,
.list-rank li a,
.list-com li a {
  color: #555 !important;
}
.list-txt li a:hover,
.list-rank li a:hover,
.list-com li a:hover {
  color: #e85d04 !important;
}

/* === SIDEBAR: head-sub + list-txt pairing === */
.head-sub + .list-txt {
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
}

/* === KNOW — Knowledge Base List === */
.know-list {
  padding: 0 16px 16px !important;
}
.know-list table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.know-list table td {
  padding: 12px 8px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  vertical-align: middle !important;
}
.know-list table tr:last-child td {
  border-bottom: none !important;
}
.know-list a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}
.know-list a:hover { color: #e85d04 !important; }
.know-list .f_r,
.know-list td.f_r {
  float: none !important;
  font-size: 12px !important;
  color: #999 !important;
}
.know-list .f_gray {
  font-size: 12px !important;
  color: #aaa !important;
}

/* === KNOW — Sidebar Categories === */
.know-cate {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 12px 16px !important;
}
.know-cate p {
  margin: 4px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.know-cate p a { color: #1a1a1a !important; }
.know-cate p em { color: #999 !important; font-size: 12px !important; }
.know-cate div {
  padding: 2px 0 8px 12px !important;
  font-size: 13px !important;
}
.know-cate div a { color: #666 !important; margin-right: 6px !important; }
.know-cate div a:hover { color: #e85d04 !important; }
.know-cate div i { color: #ddd !important; font-size: 11px !important; }

/* === KNOW — Expert Module === */
.know-expert {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
}
.know-expert > div {
  display: flex !important;
  gap: 12px !important;
  padding: 12px !important;
  background: #fafafa !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  align-items: flex-start !important;
}
.know-expert > div img {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
}
.know-expert ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.know-expert ul li {
  font-size: 12px !important;
  color: #666 !important;
  margin-bottom: 2px !important;
}
.know-expert ul li:first-child a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.know-expert ul li a span {
  display: inline-block;
  padding: 2px 10px;
  background: #e85d04;
  color: #fff !important;
  border-radius: 4px;
  font-size: 11px;
  margin-top: 4px;
}

/* === KNOW — Stats Bar === */
.know-stats {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
}
.know-stats ul {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}
.know-stats ul a {
  flex: 1 !important;
  text-decoration: none !important;
}
.know-stats ul a li {
  list-style: none !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  color: #888 !important;
}
.know-stats ul a li i {
  display: block !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-style: normal !important;
  margin-bottom: 4px !important;
}

/* === KNOW — User Panel in Sidebar === */
.user-info {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.user-info img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}
.user-info ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.user-info ul li {
  font-size: 12px !important;
  color: #666 !important;
  margin-bottom: 4px !important;
}
.user-info ul li a { color: #1a1a1a !important; }
.user-info ul li a.b {
  display: inline-block;
  padding: 2px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  font-weight: 500;
}

/* === EXHIBIT — Events List === */
.exh-list {
  padding: 0 16px 16px !important;
}
.exh-top {
  display: flex !important;
  flex-direction: row !important;
  gap: 20px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.exh-top:last-child {
  border-bottom: none !important;
}
.exh-date {
  width: 60px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.exh-date strong {
  display: block !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  line-height: 1.1 !important;
}
.exh-date span {
  font-size: 12px !important;
  color: #999 !important;
}
.exh-content {
  flex: 1 !important;
}
.exh-content a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.exh-content a:hover { color: #e85d04 !important; }
.exh-content p {
  font-size: 13px !important;
  color: #666 !important;
  margin: 4px 0 0 !important;
}

/* === PHOTO / VIDEO — List Grid === */
.list-img.list0 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
}
.list-img.list0 > div {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.list-img.list0 > div:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
}
.list-img.list0 a img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
.list-img.list0 p {
  padding: 12px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}
.list-img.list0 ul {
  display: none !important;
}

/* === LIST-CATE — Browse Categories Grid === */
.list-cate {
  padding: 16px !important;
}
.list-cate ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.list-cate ul li {
  margin: 0 !important;
  padding: 0 !important;
}
.list-cate ul li a {
  display: inline-block;
  padding: 6px 14px;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 13px;
  color: #555 !important;
  transition: all 0.2s;
}
.list-cate ul li a:hover {
  background: #1a1a1a;
  color: #fff !important;
  border-color: #1a1a1a;
}

/* === LIST-AREA — Browse by Region === */
.list-area {
  padding: 16px !important;
}
.list-area ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
.list-area ul li a {
  color: #666 !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
}
.list-area ul li a:hover {
  color: #e85d04 !important;
}

/* === BRAND / SELL — Logo-Image Table List === */
.list-img.list table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.list-img.list table td {
  padding: 12px 16px !important;
  background: #fafafa !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  vertical-align: middle !important;
}
.list-img.list table td a img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
}
.list-img.list table td a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
}
.list-img.list table td a:hover { color: #e85d04 !important; }
.list-img.list table td p {
  font-size: 12px !important;
  color: #888 !important;
  margin: 4px 0 0 !important;
}

/* === UI-BALL — Floating Ask Button === */
.ui-ball {
  position: fixed !important;
  bottom: 30px !important;
  right: 30px !important;
  z-index: 9999 !important;
}
.ui-ball i {
  display: block;
  width: 56px;
  height: 56px;
  background: #e85d04 !important;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(232,93,4,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.ui-ball i:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(232,93,4,0.4);
}
.ui-ball img { display: none; }

/* === SELL / BUY DETAIL PAGE === */
.m.mic-sell-detail {
  width: auto !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  background: transparent !important;
  border: none !important;
}

/* === SELL SEARCH LIST — sort-f, toolbar, .list === */
.sort-f {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 20px !important;
}
.sort-f .sort-f-tt {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-right: 8px;
}
.sort-f a {
  font-size: 13px !important;
  color: #555 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}
.sort-f a:hover,
.sort-f .on {
  color: #e85d04 !important;
  background: #fff5ed !important;
}

.toolbar {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.toolbar span,
.toolbar a,
.toolbar .f_r {
  font-size: 13px !important;
  color: #666 !important;
}
.toolbar .f_r a {
  margin-left: 4px;
  padding: 2px 10px;
  background: #f5f5f5;
  border-radius: 4px;
}
.toolbar .f_r .on {
  background: #1a1a1a;
  color: #fff !important;
}
.toolbar a:hover { color: #e85d04 !important; }

/* === SELL LIST — list-text/list tables === */
.list-text.list table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.list-text.list table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 13px !important;
}
.list-text.list table tr:nth-child(even) td {
  background: #fafafa !important;
}

/* === PAGINATION === */
.pages {
  padding: 24px 0 !important;
  text-align: center !important;
  clear: both;
}
.pages a,
.pages strong {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 2px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 13px;
  color: #555;
  transition: all 0.2s;
  text-decoration: none;
}
.pages a:hover {
  background: #fff5ed;
  color: #e85d04;
  border-color: #e85d04;
}
.pages strong {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.pages .pages_total,
.pages .pages_info { display: none !important; }

/* === SELL / COMPANY LIST — item cards in .list-img .list === */
.list-img .list table td,
.m2l .list-img .list table td {
  padding: 16px !important;
  background: #fafafa !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  vertical-align: top !important;
}
.list-img .list img,
.m2l .list-img .list img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain !important;
  border-radius: 6px !important;
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
}

/* === DETAIL PAGE: .m3 .m3l .content === */
.m.m3 > .m3l .content {
  padding: 0 20px 20px !important;
}
.m.m3 > .m3l .content img {
  max-width: 100% !important;
  height: auto !important;
}

/* === KNOW DETAIL: .know-answer === */
.know-answer {
  background: #fafafa !important;
  border: 1px solid #eee !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin: 16px 0 !important;
}

/* === EXHIBIT DETAIL === */
.exh-time {
  display: flex;
  gap: 20px;
  padding: 16px 0;
  font-size: 14px;
}
.exh-time strong {
  font-weight: 700;
  color: #1a1a1a;
}

/* === SIDEBAR BOTTOM SPACER === */
.m3r .b10 { display: none !important; }

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .m.m3 { flex-direction: column !important; }
  .m.m3 > .m3r { width: 100% !important; min-width: 0 !important; }
  .m.m2 { flex-direction: column !important; }
  .list-img.list0 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .list-img.list0 { grid-template-columns: repeat(2, 1fr) !important; }
  .know-expert { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .list-img.list0 { grid-template-columns: 1fr !important; }
  .exh-top { flex-direction: column; gap: 8px; }
}