/* ==================== Blog Category Page ==================== */

/* --- Layout Utilities --- */
.w-1120{width:1120px;max-width:100%;box-sizing:border-box}
.mg-a{margin:auto}
.w100{width:100%}
.pr{position:relative}

/* --- Site Header Override (no banner page) --- */
.site-header{
  background:rgba(45,45,45,0.85)!important;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.top-bar-wrapper{
  border-bottom:1px solid rgba(255,255,255,0.2)!important;
}

/* --- Page Header --- */
.blog-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:40px;
}
.blog-header h1{
  font-size:36px;
  line-height:44px;
  color:#171B25;
}
.blog-header .category-select{
  position:relative;
  min-width:140px;
}
.blog-header .category-select select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:10px 40px 10px 16px;
  font-size:14px;
  line-height:22px;
  color:#171B25;
  border:1px solid #D9DAE0;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  outline:none;
}
.blog-header .category-select select:focus{
  border-color:#FF4610;
}
.blog-header .category-select::after{
  content:'';
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:5px solid #535662;
  pointer-events:none;
}

/* --- Blog Content Container --- */
.blog-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* --- First Item (Featured) --- */
.first_Iten{
  display:flex;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow 0.25s;
}
.first_Iten>a{
  display:flex;
  width:100%;
  text-decoration:none;
  color:inherit;
}
.first_Iten:hover{
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.first_Iten .blog-img{
  width:55%;
  flex-shrink:0;
  overflow:hidden;
}
.first_Iten .blog-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s;
}
.first_Iten:hover .blog-img img{
  transform:scale(1.03);
}
.first_Iten .blog-info{
  flex:1;
  padding:40px 40px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.first_Iten .blog-info .item-title{
  font-size:28px;
  line-height:36px;
  color:#171B25;
  font-weight:600;
  margin-bottom:16px;
}
.first_Iten .blog-info .item-info{
  font-size:14px;
  line-height:22px;
  color:#535662;
  margin-bottom:24px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- Tip Label (Category Tag) --- */
.item-tipLabel{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:4px 12px;
  font-size:12px;
  line-height:20px;
  color:#fff;
  background:rgba(23,27,37,0.7);
  border-radius:4px;
  backdrop-filter:blur(4px);
}

/* --- Bottom Info (Author + Date) --- */
.bottom-info,
.secont_Iten_item_info_bottom,
.four_Iten_item_info_bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
}
.info-power{
  display:flex;
  align-items:center;
  gap:8px;
}
.auth_img{
  width:32px;
  height:32px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
}
.auth_img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.auth_name{
  font-size:14px;
  line-height:22px;
  color:#535662;
}
.info-timer{
  font-size:14px;
  line-height:22px;
  color:#8C8F9B;
}

/* --- Second Item (2-column row) --- */
.secont_Iten{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.secont_Iten_item{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:box-shadow 0.25s;
}
.secont_Iten_item:hover{
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.Iten_item_Img{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}
.Iten_item_Img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s;
}
.secont_Iten_item:hover .Iten_item_Img img{
  transform:scale(1.03);
}
.secont_Iten_item_info{
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.secont_Iten_item_info_title{
  font-size:20px;
  line-height:28px;
  color:#171B25;
  font-weight:600;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.secont_Iten_item_info_Messgae{
  font-size:14px;
  line-height:22px;
  color:#535662;
  margin-bottom:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* --- Three Item (empty placeholder) --- */
.three_Iten{
  display:none;
}

/* --- Four Item (3-column grid) --- */
.four_Iten{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.four_Iten_item{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:box-shadow 0.25s;
}
.four_Iten_item:hover{
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.list_img_tip{
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
}
.list_img_tip img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 0.3s;
}
.four_Iten_item:hover .list_img_tip img{
  transform:scale(1.03);
}
.four_Iten_item_info{
  padding:20px 24px 24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.four_Iten_item_info_title{
  font-size:18px;
  line-height:26px;
  color:#171B25;
  font-weight:600;
  margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.four_Iten_item_info_Messgae{
  font-size:14px;
  line-height:22px;
  color:#535662;
  margin-bottom:16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ==================== Responsive ==================== */

/* --- Mobile --- */
@media screen and (max-width:767px){
  .w-1120{width:100%;padding:0 16px}
  .blog-header h1{font-size:24px;line-height:32px}
  .blog-header{margin-bottom:24px}

  .first_Iten{flex-direction:column}
  .first_Iten>a{flex-direction:column}
  .first_Iten .blog-img{width:100%;aspect-ratio:16/9}
  .first_Iten .blog-info{padding:20px 16px}
  .first_Iten .blog-info .item-title{font-size:20px;line-height:28px;margin-bottom:8px}
  .first_Iten .blog-info .item-info{margin-bottom:16px;-webkit-line-clamp:2}

  .secont_Iten{grid-template-columns:1fr}
  .secont_Iten_item_info{padding:16px}
  .secont_Iten_item_info_title{font-size:16px;line-height:24px}

  .four_Iten{grid-template-columns:1fr}
  .four_Iten_item_info{padding:16px}
  .four_Iten_item_info_title{font-size:16px;line-height:24px}
}

/* --- Tablet --- */
@media screen and (min-width:768px) and (max-width:1023px){
  .w-1120{width:90%}
  .blog-header h1{font-size:28px;line-height:36px}

  .first_Iten .blog-info{padding:24px}
  .first_Iten .blog-info .item-title{font-size:22px;line-height:30px}

  .four_Iten{grid-template-columns:repeat(2,1fr)}
  .four_Iten_item_info_title{font-size:16px;line-height:24px}
}