/* 1. 全局容器间距调整：控制最外层容器的左右留白 */
/* 原.container 仅限制宽度，新增左右padding实现与屏幕的间距 */
.container {
  max-width: 1200px; /* 新增：限制容器最大宽度（避免大屏下内容过宽），可根据需求调整（如1140px/1320px） */
  width: 100%; /* 确保容器占满屏幕可用宽度 */
  margin: 0 auto; /* 水平居中容器 */
  padding-left: 20px; /* 核心：容器左侧与屏幕的间距 */
  padding-right: 20px; /* 核心：容器右侧与屏幕的间距 */
  overflow-x: hidden;
  box-sizing: border-box; /* 确保padding不撑开容器宽度 */
}

/* 为所有元素添加盒模型（保留原代码，确保间距计算准确） */
.kelin-news-read * {
  box-sizing: border-box;
}

/* 2. 核心内容区（kelin-news-read）间距调整：继承全局容器间距，补充细节 */
.kelin-news-read.main {
  padding-top: 80px;
  padding-bottom: 60px;
  /* 无需额外加左右padding，继承父容器（.container）的20px间距；若需独立调整，可添加 padding-left/padding-right */
}

/* 以下为原代码保留，仅关键间距处添加注释说明 */
.kelin-news-read .newsnr h1{font-size:30px;line-height:1;color:#333;text-transform:capitalize;}
.kelin-news-read .newsnr .artInfo{padding:0 0 30px;border-bottom:1px solid #999;margin:25px 0 0;font-size:18px;color:#333;}

.kelin-news-read .myart{padding:50px 0 10px;line-height:26px;font-size:16px;color:#333;}
.kelin-news-read .myart h5{font-size:20px;margin-bottom:20px;}
.kelin-news-read .myart p{margin-bottom:20px;}
.kelin-news-read .myart .row{margin-bottom:20px;}
.kelin-news-read .myart img{border-radius:5px;max-width:100%;height:auto;/* 确保图片不超出容器间距 */}

.kelin-news-read .pnbar{margin-top:40px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:15px 0;}
.kelin-news-read .pnbar > a{width:50%;display:-webkit-flex;display:flex;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-align-items:center;align-items:center;position:relative;}
.kelin-news-read .pnbar > a.l::after{content:"";position:absolute;right:0;top:25px;bottom:25px;width:1px;background:#ccc;}
.kelin-news-read .pnbar > a.r{-webkit-flex-direction:row-reverse;flex-direction:row-reverse;text-align:right;}
.kelin-news-read .pnbar i{width:40px;color:color-mix(in srgb, var(--color-second) 50%, transparent);font-size:22px;text-align:left;}
.kelin-news-read .pnbar img{height:100px;}
.kelin-news-read .pnbar p{margin:0 30px;color:#333;font-size:14px;}
.kelin-news-read .pnbar > a.r i{text-align:right;}

.kelin-news-read .pnbar > a:hover i{color:var(--color-second);}
.kelin-news-read .pnbar > a:hover p{color:var(--color-second);}

/* 3. 平板/手机端（≤768px）：缩小容器与屏幕的间距（适配小屏） */
@media screen and (max-width:768px) {
  /* 全局容器间距缩小 */
  .container {
    padding-left: 15px; /* 小屏左侧间距：20px→15px */
    padding-right: 15px; /* 小屏右侧间距：20px→15px */
    max-width: 100%; /* 小屏容器不限制最大宽度，充分利用屏幕 */
  }

  .kelin-news-read.main{padding-top:25px;padding-bottom:30px;}
  
  .kelin-news-read .newsnr h1{font-size:22px;}
  .kelin-news-read .newsnr .artInfo{padding:0 0 20px;margin:20px 0 0;font-size:16px;}

  .kelin-news-read .myart{padding:20px 0 10px;line-height:22px;font-size:15px;}
  .kelin-news-read .myart h5{font-size:17px;margin-bottom:15px;}
  .kelin-news-read .myart p{margin-bottom:15px;}
  .kelin-news-read .myart .content-row{margin-bottom:15px;}

  .kelin-news-read .pnbar{margin-top:25px;-webkit-flex-direction:column;flex-direction:column;}
  .kelin-news-read .pnbar > a{width:100%;}
  .kelin-news-read .pnbar > a.r{margin-top:10px;}
  .kelin-news-read .pnbar img{height:40px;}
  .kelin-news-read .pnbar p{margin:0 15px;}
}

/* 桌面端表格完整优化方案（保留原代码，确保表格在容器间距内显示） */
@media screen and (min-width: 769px) {
  .kelin-news-read .myart table {
    width: 100%;
    max-width: 100%; /* 表格不超出容器间距 */
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
    line-height: 1.5;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .kelin-news-read .myart th {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 14px 16px;
    border: 1px solid #dee2e6;
    text-align: left;
    color: #495057;
    font-size: 15px;
    position: relative;
  }
  
  .kelin-news-read .myart td {
    padding: 12px 16px;
    border: 1px solid #dee2e6;
    vertical-align: top;
    word-wrap: break-word;
    transition: background-color 0.2s ease;
  }
  
  .kelin-news-read .myart tbody tr:nth-child(even) {background-color: #f8f9fa;}
  .kelin-news-read .myart tbody tr:hover {background-color: #e3f2fd;}
  .kelin-news-read .myart tbody tr:hover td {background-color: transparent;}
  .kelin-news-read .myart table caption {
    caption-side: top;
    padding: 12px 0;
    font-weight: 600;
    font-size: 16px;
    color: #333;
    text-align: left;
    margin-bottom: 8px;
  }
  .kelin-news-read .myart td.number, .kelin-news-read .myart th.number {text-align: right;font-family: 'Courier New', monospace;}
  .kelin-news-read .myart td.center, .kelin-news-read .myart th.center {text-align: center;}
}


/* 移动端优化（保留原代码，补充容器间距适配） */
@media screen and (max-width: 768px) {
  .kelin-news-read.main {
    padding-top: 25px;
    padding-bottom: 30px;
    /* 无需重复加左右padding，继承.container的15px间距 */
    width: 100%;
    overflow-x: hidden;
  }
  
  .kelin-news-read .newsnr h1 {
    font-size: 22px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  .kelin-news-read .myart {
    padding: 20px 0 10px;
    line-height: 1.5;
    font-size: 15px;
    width: 100%;
  }
  
  .kelin-news-read .myart .content-row {width: 100%;}
  .kelin-news-read .myart img {max-width: 100%;height: auto;}
  .kelin-news-read .myart .col-sm-8, .kelin-news-read .myart .col-sm-4, .kelin-news-read .myart .col-xs-12 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 20px;
  }
  
  .kelin-news-read .pnbar {
    margin-top: 25px;
    flex-direction: column;
    padding: 10px 0;
  }
  
  .kelin-news-read .pnbar > a {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* 移动端表格优化（保留原代码） */
@media screen and (max-width: 768px) {
  .kelin-news-read .myart table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .kelin-news-read .myart table {max-width: 100%;}
  .kelin-news-read .myart td, .kelin-news-read .myart th {
    min-width: 80px;
    word-wrap: break-word;
    word-break: break-word;
    padding: 8px 12px;
    font-size: 14px;
  }
}


/* 4. 超小屏幕（≤480px）：进一步缩小间距（适配手机小屏） */
@media screen and (max-width: 480px) {
  /* 全局容器间距最小化 */
  .container {
    padding-left: 10px; /* 超小屏左侧间距：15px→10px */
    padding-right: 10px; /* 超小屏右侧间距：15px→10px */
  }
  
  .kelin-news-read.main {
    /* 继承.container的10px间距，无需额外设置 */
  }
  
  .kelin-news-read .newsnr h1 {font-size: 20px;}
  .kelin-news-read .myart {font-size: 14px;}
  .kelin-news-read .pnbar p {font-size: 12px;}
}