/* ================================
   SINGLE TAB â€“ FULL STYLESHEET
   (match layout theo máº«u)
   ================================ */

/* ---- Khung ---- */
.SingleTab{
     /* váº¡ch Ä‘á» phÃ­a trÃªn nhÆ° máº«u */
     padding:10px;
     margin-bottom:10px;
     font-size:15px !important;
}

/* ---- Header block ---- */
.SingleTab .Header{
  border:none;
  margin-bottom: 20px;
  height:auto;
  width:100%;
  border-bottom: 1px solid #e5e5e5;
}
.SingleTab .Header .image{ display:inline-block; vertical-align:middle; margin-right:6px; display:none}
.SingleTab .Header .HeaderWrap .text{
  background:transparent;
  height:auto;
  display:inline-block;
}
.SingleTab .Header .HeaderWrap .text a{
  text-transform:uppercase;
  font-size: 23px;
  font-weight: bold;
  text-decoration:none;
  padding-left:0;
  color: #3c2010;
  text-transform: uppercase;
  line-height: 42px;
}
.SingleTab .Header .HeaderWrap .text a:before{

  display:inline-block;
  width:14px;height:14px;
  border:2px solid #c30000;      /* Ã´ vuÃ´ng nhá» trÆ°á»›c tiÃªu Ä‘á» khá»‘i */

  vertical-align:middle;
}
.SingleTab .Header .HeaderWrap .text a:hover{ text-decoration:underline; }

/* ---- Wrap tá»•ng ---- */
.SingleTab .Wrap{
  padding:0;
}

/* =========================================
   BÃ€I Ná»”I Báº¬T (first): áº¢nh trÃ¡i â€“ Ná»™i dung pháº£i
   Thá»© tá»± dá»c: Title -> Summary -> Date
   ========================================= */
.SingleTab .Wrap .first{
  display: inline-block;
       /* cá»™t áº£nh | cá»™t ná»™i dung */
     /* title | summary | date */
  width:100%;
  padding-bottom:10px;
  border-bottom:1px solid #e6e6e6;
}
.SingleTab .Wrap .first > p{ display:block; } /* Ä‘áº£m báº£o summary hiá»‡n */

/* áº¢nh chiáº¿m toÃ n bá»™ cá»™t trÃ¡i qua 3 hÃ ng */
.SingleTab .Wrap .first img{
  width: 120px;
  height: 150px;
  object-fit:cover;
  margin-right: 10px;
  /* margin:0; */
  float: left;
  border:1px solid #e6e6e6;
  box-shadow:none;
  border-radius:0;
}

/* TiÃªu Ä‘á» (hÃ ng 1, cá»™t pháº£i) */
.SingleTab .Wrap .first .title{
  grid-column:2 / 3;
  grid-row:1 / 2;
  margin:0 0 4px;
}
.SingleTab .Wrap .first .title a{
  display:block;
  color:#bd1f24;
  font-weight:500;
  font-size:15px;
  line-height:1.25;
  /* text-transform:uppercase; */
  text-decoration:none;
}
.SingleTab .Wrap .first .title a:hover{
  color:#9f0f14;
  text-decoration:underline;
}

/* TÃ³m táº¯t (hÃ ng 2, cá»™t pháº£i) */
.SingleTab .Wrap .first .summary{
        font-size:15px !important;
        grid-column:2 / 3;
        grid-row:2 / 3;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:3;
        overflow:hidden;
        text-align:justify;
        font-size:14px;
        color:#333;
        margin-top:2px;
        display: none;
}

/* NgÃ y (hÃ ng 3, cá»™t pháº£i) */
.SingleTab .Wrap .first .date{
  grid-column:2 / 3;
  grid-row:3 / 4;
  margin-top:6px;
  font-size:13px;
  color:#777;
}

/* =========================================
   DANH SÃCH BÃ€I DÆ¯á»šI (next)
   ========================================= */
.SingleTab .Wrap .next{
  list-style:none;
  padding:0;
  margin:0;
}
.SingleTab .Wrap .next li{
  background:transparent;
  width:100%;
  margin:0;
  padding: 10px 0;
  display: inline-block;
  border-top:1px solid #eee;
}
.SingleTab .Wrap .next li img{
    width: 120px;
    height: 150px;
    object-fit: cover;
    float: left;
    margin-right: 10px;
}
.SingleTab .Wrap .next li:first-child{ border-top:none; }

.SingleTab .Wrap .next li a{
  display:block;
  width:100%;
  max-width:100%;
  font-size:15px;
  text-align:left;
  text-decoration:none;
  position:relative;
  padding-left:18px;              /* chá»«a chá»— cho mÅ©i tÃªn â–º */
  color: #bd1f24;
  font-weight: 500;
}
.SingleTab .Wrap .next li .summary{
  display: none;
}
.SingleTab .Wrap .next li a:before{
  content:"\25B8";                /* â–º */
  position:absolute;
  left:0; top:1px;
  font-size:12px;
  color:#8a8a8a;
}
.SingleTab .Wrap .next li a:hover{
  color:#bd1f24;
  text-decoration:underline;
}
.SingleTab .Wrap .next .date{
  margin-top:3px;
  font-size:12px;
  color:#888;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width:1024px){
  .SingleTab{
    margin:0 auto 10px;
  }
  .SingleTab .Wrap .first{
    grid-template-columns:1fr;             /* xáº¿p dá»c: áº£nh -> title -> summary -> date */
    grid-template-rows:auto auto auto auto;
  }
  .SingleTab .Wrap .first img{
    grid-column:1 / -1;
    grid-row:1 / 2;
    width:100%;
    height:45vw;
    margin-bottom:10px;
  }
  .SingleTab .Wrap .first .title{ grid-row:2 / 3; }
  .SingleTab .Wrap .first .summary{ grid-row:3 / 4; }
  .SingleTab .Wrap .first .date{ grid-row:4 / 5; }
  .SingleTab .Wrap .first .title a{
    font-size:16px;
    text-transform:none;
  }
}

/* =========================================
   RESET/OVERRIDES (Ä‘áº£m báº£o khÃ´ng bá»‹ rule cÅ© áº£nh hÆ°á»Ÿng)
   ========================================= */
.SingleTab .Wrap .first img,
.SingleTab .Wrap .first .title,
.SingleTab .Wrap .next li a:before{ background:none; }
